說一下使用Jquery和使用框架的區(qū)別
- 數(shù)據(jù)和視圖的分離，解耦（開放封閉原則）
- 以數(shù)據(jù)驅(qū)動(dòng)視圖，只關(guān)心數(shù)據(jù)變化，DOM操作被封裝
說一下對(duì)MVVM的理解
- Model(模型、數(shù)據(jù)) View（DOM、視圖、模板） ViewModel ViewModel是鏈接Model和View的一個(gè)橋
- view可以通過事件綁定的方式影響model
- model可以通過數(shù)據(jù)綁定影響view
VUE、MVVM框架的三要素
- 響應(yīng)式：vue如何監(jiān)聽到data的每個(gè)屬性變化？
- 模板引擎：vue的模板如何被解析，指令如何處理？
- 渲染：vue的模板如何被渲染成html？以及渲染過程
vue中如何實(shí)現(xiàn)響應(yīng)式
- 什么是響應(yīng)式
- 修改data屬性后，vue立刻監(jiān)聽到
- data屬性被代理到vm上
- Object.defineProperty(obj, prop, desc) 實(shí)現(xiàn)響應(yīng)式的核心函數(shù)
Object.defineProperty(obj, prop, desc)的作用就是直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性
模板中沒有的數(shù)據(jù)，不會(huì)走get監(jiān)聽，所以也不會(huì)走set監(jiān)聽，Object.defineProperty的原則是走get才會(huì)走set,防止無用的數(shù)據(jù)重復(fù)渲染。
- 問題解答
- 關(guān)鍵是理解Object.defineProperty
- 將data的屬性代理到vm上
var vm = {}
var data = {
name: 'zhangsan',
age: 20
}
var key, value
for (key in data) {
(function (key) {
Object.defineProperty(vm, key, {
get: function () {
console.log('get', data[key]) // 監(jiān)聽
return data[key]
},
set: function (newVal) {
console.log('set', newVal) // 監(jiān)聽
data[key] = newVal
}
})
})(key)
}
vue中如何解析模板
- 模板是什么？
- 本質(zhì)：字符串
- 有邏輯，如v-if v-for等
- 與html很像，但有很大區(qū)別
- 最終還要轉(zhuǎn)化成html來顯示
- 模板最終要裝換成js代碼（render函數(shù)）
//模板
<div id="app">
<p>{{price}}</p>
</div>
//render函數(shù)
function render() {
with(this) { // this 就是 vm
return _c(
'div',
{
attrs: {'id': 'app'}
},
[
_c('p', [_v(_s(price))])
]
)
}
}
//在vue源碼中搜索code.render，然后alert(code.render)可以看render函數(shù)
問題解答
- h函數(shù)生成vdom
- patch函數(shù)渲染成dom
vue的整個(gè)實(shí)現(xiàn)流程
- 解析模板成render函數(shù)
- 響應(yīng)式開始監(jiān)聽
- 首次渲染，顯示頁面，且綁定依賴
- data屬性變化，觸發(fā)rerender
