說一下使用Jquery和使用框架的區(qū)別
- 數(shù)據(jù)和視圖的分離砍艾，解耦（開放封閉原則）
- 以數(shù)據(jù)驅(qū)動視圖茧泪，只關(guān)心數(shù)據(jù)變化清笨，DOM操作被封裝
說一下對MVVM的理解
- Model(模型业稼、數(shù)據(jù)) View（DOM、視圖横漏、模板） ViewModel ViewModel是鏈接Model和View的一個橋
- view可以通過事件綁定的方式影響model
- model可以通過數(shù)據(jù)綁定影響view
VUE谨设、MVVM框架的三要素
- 響應(yīng)式：vue如何監(jiān)聽到data的每個屬性變化？
- 模板引擎：vue的模板如何被解析缎浇，指令如何處理扎拣？
- 渲染：vue的模板如何被渲染成html？以及渲染過程
vue中如何實現(xiàn)響應(yīng)式
- 什么是響應(yīng)式
- 修改data屬性后素跺，vue立刻監(jiān)聽到
- data屬性被代理到vm上
- Object.defineProperty(obj, prop, desc) 實現(xiàn)響應(yīng)式的核心函數(shù)
Object.defineProperty(obj, prop, desc)的作用就是直接在一個對象上定義一個新屬性二蓝，或者修改一個已經(jīng)存在的屬性
模板中沒有的數(shù)據(jù)，不會走get監(jiān)聽指厌，所以也不會走set監(jiān)聽刊愚，Object.defineProperty的原則是走get才會走set,防止無用的數(shù)據(jù)重復渲染。
- 問題解答
- 關(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的整個實現(xiàn)流程
- 解析模板成render函數(shù)
- 響應(yīng)式開始監(jiān)聽
- 首次渲染牡借，顯示頁面，且綁定依賴
- data屬性變化厕九，觸發(fā)rerender
