- 生命周期
beforeCreate :
數據觀測 和 初始化事件還未開始
created :
完成數據觀測 , 屬性和方法運算 , 初始化事件 , $el屬性還沒有顯示出來
beforeMount :
render函數 首次被調用.
完成了 編譯模板 , data中數據 結合 模板 生成了html虛擬對象.
但未掛載到頁面上
mounted :
el屬性 被 vm.$el 替換 , 並掛載到實例上之后調用.
使用內存中的html對象 替換掉 el屬性指向的Dom對象.完成模板中的html渲染到html頁面中.
此過程可以進行ajax操作.
beforeUpdate :
數據更新之前調用.
發生在虛擬dom重新渲染和打補丁之前.
可以在該鈎子中 進一步更改狀態 . 不會觸發重新渲染的過程
updated :
數據更新導致的虛擬dom重渲染之后調用.
可以執行依賴於dom的操作.
避免更新狀態 , 也就是用到 dom時 , 最好時讀操作 , 因為有可能導致更新無限循環.
在服務器渲染期間不被調用.
beforeDestroy :
實例銷毀前調用 . 即 還可以操作實例.
destroyed :
實例銷毀之后調用 .
調用后 所有的事件監聽器會被移除.
所有子實例被銷毀.
在服務器渲染期間不被調用.
- 雙向數據綁定
實現原理 :
數據劫持 + 發布者-訂閱者 模式.
通過 Object.defineProperty() 來劫持各個屬性的setter/getter .
在數據變動時,發布消息給訂閱者,觸發相應監聽回調.
- 組件間參數傳遞
父子組件傳值
父 -> 子 : 子組件通過props方法接受數據
子 -> 父 : $emit方法傳遞數據
非父子組件傳值
eventBus : 事件中心 . 傳遞事件 , 接收事件 . 相當於中轉站 .
項目比較小的時候 推薦使用.
- 路由
hash模式 和 history模式
hash模式 :
符號"#"及其后面的字符 所構成的字符串.
js通過 window.location.hash獲取
hash不會包含在請求中傳遞.
history模式:
采用HTML5的新特性.
提供了 pushState() , replaceState() 對瀏覽器歷史記錄棧進行修改.
提供了 popState() 來監聽轉台的變更.
想用好 必須有后台的配置支持.
- 自定義指令
局部指令:
new Vue({
el:"#app",
data:{},
directives:{
dir_01:{
inserted(el){
console.log(el);
console.log(arguments);
}
}
}
});
全局指令:
Vue.directive('dir2',{
inserted(el){
console.log(el);
}
});
指令的使用 :
<div id="app">
<div v-dir_01 ></div>
<div v-dir2 ></div>
</div>
- 自定義過濾器
<div id="app">
<input type="text" v-model="msg" />
{{ msg | capitalize }}
</div>
局部過濾器:
new Vue({
el:"#app",
data:{
return {
msg : ''
}
},
filters:{
capitalize : function(value){
if(!value) return ''
return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);
}
}
});
全局過濾器:
Vue.filter('capitalize' , function(value){
if(!value) return ''
return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);
});
- keep-alive
keep-alive 是 Vue的一個內置組件 , 用以能避免重復渲染.
包含兩個屬性 : include , exclude . 其中exclude的優先級更高.
兩個屬性支持 正則,函數,數組等表達式.
多條件 用逗號 ',' 分隔.
- vue的計算屬性
在模板中放入太多的邏輯會讓模板難以維護.
對數據進行復制處理 , 且可能多次使用的時候 , 盡量采取計算屬性方式.
優點 :
- 數據處理結構清晰
- 依賴於數據 , 數據更新 , 處理結果自動更新
- 計算屬性內部this指向vm實例.
- 在template調用時,直接寫計算屬性名即可.
- 與methods相比:
-
- 當依賴的數據不變時,computed會從緩存中獲取
- 而methods無論如何都會重新計算.
- 其他面試題
v-if 與 v-show 區別
v-if 條件判斷 , v-show 操作css屬性 display ( block 或 none).
v-show 性能更好.v-if 適用的情況更廣.
vueJs的核心是 : 數據驅動 , 組件系統
vue 常用指令
v-if , v-for , v-bind , v-on , v-show , v-else
vue常用修飾符
.prevent : 提交事件不再重載頁面
.stop : 阻止事件冒泡
.self : 當事件發生在該元素本身而不是子元素的時候觸發
.capture : 事件監聽, 當事件發生的時候調用.
v-on可以綁定多個方法.
vue等單頁面應用的缺點:
- 不支持低版本,最低支持IE9
- 不利於SEO
- 第一次加載頁面耗時相對長一些
- 不能使用瀏覽器導航按鈕前進,后退. 需要自行實現邏輯.