1. Vue的雙向綁定數(shù)據(jù)的原理
- vue 實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式
- 通過(guò) Object.defineProperty() 來(lái)劫持各個(gè)屬性的 setter，getter滤灯，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者坪稽，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)
2. 單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定
- 單向數(shù)據(jù)流：
定義：數(shù)據(jù)流是單向的，數(shù)據(jù)流動(dòng)方向可以跟蹤鳞骤。
缺點(diǎn)：如果想讓UI發(fā)生變更就必須創(chuàng)建各種 action 來(lái)維護(hù)對(duì)應(yīng)的 state - 雙向數(shù)據(jù)綁定：
定義：數(shù)據(jù)之間是相通的窒百，將數(shù)據(jù)變更的操作隱藏在框架內(nèi)部
優(yōu)點(diǎn)：是在表單交互較多的場(chǎng)景下，會(huì)簡(jiǎn)化大量與業(yè)務(wù)無(wú)關(guān)的代碼
缺點(diǎn)：就是無(wú)法追蹤局部狀態(tài)的變化豫尽，增加了出錯(cuò)時(shí) debug 的難度
3.Vue生命周期函數(shù)
- beforeCreate() 在實(shí)例創(chuàng)建前執(zhí)行篙梢，數(shù)據(jù)未加載狀態(tài)
- created() 在實(shí)例創(chuàng)建后，能初始化數(shù)據(jù)美旧，dom渲染之前執(zhí)行
- beforeMount() 虛擬dom已創(chuàng)建完成渤滞，在數(shù)據(jù)渲染前最后一次更改數(shù)據(jù)
- mounted() 頁(yè)面、數(shù)據(jù)渲染完成榴嗅，真實(shí)dom掛載完成
- beforeUpadate() 重新渲染之前觸發(fā)
- updated() 數(shù)據(jù)更新完成妄呕，dom 重新 render 完成,更改數(shù)據(jù)會(huì)陷入死循環(huán)
- beforeDestory() 和 destoryed() 前者是銷(xiāo)毀前執(zhí)行（實(shí)例仍然完全可用），后者則是銷(xiāo)毀后執(zhí)行
4. v-if 和 v-show 區(qū)別
- 使用 v-if 的時(shí)候嗽测，如果值為 false 绪励，那么頁(yè)面將不會(huì)有這個(gè) html 標(biāo)簽生成。
- v-show 則是不管值為 true 還是 false 唠粥，html 元素都會(huì)存在疏魏，只是 CSS 中的 display 顯示或隱藏
5.NextTick 作用
- nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick晤愧，則可以在回調(diào)中獲取更新后的 DOM
具體可參考官方文檔 深入響應(yīng)式原理
6. Vue 單頁(yè)面應(yīng)用的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)： 良好的交互體驗(yàn)大莫，良好的前后端工作分離模式，減輕服務(wù)器壓力
缺點(diǎn)：SEO難度較高养涮，前進(jìn)葵硕、后退管理，初次加載耗時(shí)多
7. Vue 自定義指令
全局注冊(cè)
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注冊(cè)
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
參考 官方文檔-自定義指令
8. 對(duì) keep-alive 的了解
-
keep-alive是Vue內(nèi)置的一個(gè)組件贯吓，可以使被包含的組件保留狀態(tài)懈凹，或避免重新渲染
<keep-alive>
<component>
<!-- 該組件將被緩存！ -->
</component>
</keep-alive>
- 可以使用API提供的
props悄谐，實(shí)現(xiàn)組件的動(dòng)態(tài)緩存
具體參考 官方API
