前端常見問題 - vue

vue的常見指令有哪些

• v-bild(:)
• v-on(@)
• v-if
• v-else-if
• v-else
• v-show
• v-for
• v-once
• v-model
• v-html

vue中的v-if和v-show的區別

專案	v-show	v-if
條件渲染的機制	始終渲染，只是修改元素的display值	根據條件去登出或重建條件塊內的元素、事件、元件等
開銷	更高的初始渲染開銷	更高的切換開銷

• 注：v-if是惰性的，當初始條件為假時，則什麼也不做，直到條件為真時才開始渲染條件塊

vue中v-on:click阻止冒泡事件

• v-on:click.stop = yourFunction

vue-router中有哪些鉤子函式

• beforeRouteUpdate
• beforeResolve
• afterEach
• beforeEnter
• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

vue中 input 的 value 和 v-model 有什麼異同

• 相同：隨著data的更改，檢視都會更新
• 不同：input裡的值被更改後，通過v-model繫結的data裡的資料會改變，通過value繫結的data裡的資料不會改變。
• 原因：
  • value為input原生屬性，為input的value繫結data中的值後，頁面檢視會隨資料更改而更改，但input輸入框內的值更改後元件的data裡對應的值並不會更改（即value屬於單項繫結）
  • v-model：雙向繫結（vue監測input的input事件，在input事件觸發後更改data中對應的值，從而實現資料的雙向繫結），所以其實v-model就是一種語法糖

  •   <input v-model="test">
      等價於
       <input v-bind:value="test" v-on:input="test=$event.target.value"> 
    複製程式碼

• 在vue中不能同時為input新增以上兩個屬性，會有衝突

元件間的資料傳遞怎麼做

• 父傳子
  1. slot
  2. props
  3. vuex
• 子傳父
  1. 自定義事件（$emit）
  2. .sync (語法糖)
  3. vuex
  4. v-model
  5. $refs（在父元件中直接獲取子元件）
• 任意元件間通訊
  1. bus匯流排（類似於vuex）
  2. vuex

vue的陣列是怎麼實現響應式的

• 詳見官方文件：陣列更新檢測

怎麼實現vue-router效果

• 掘金上有很多這樣的文章，這裡不做贅述，這裡列舉出來這個點是告訴自己這個點需要掌握~~