vue三要素
- 響應式：vue 如何監聽到 data 的每個屬性變化？
- 模板引擎：vue 的模板如何被解析，指令如何處理？
- 渲染：vue 的模板如何被渲染成 html ？以及渲染過程
響應式：vue 如何監聽到 data 的每個屬性變化？
什么是響應式
修改 data 屬性之后，vue 立刻監聽到- data屬性代理綁定到vm上
var vm = new Vue({
el: '#app',
data: {
name: 'zhangsan',
age: 20
}
})
- vue實現響應式核心函數：Object.defineProperty 偽代碼
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
該函數無法通過babel等進行shim，所以IE8就悲劇??了
get set 函數
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]) // 監聽
return data[key]
},
set: function (newVal) {
console.log('set', newVal) // 監聽
data[key] = newVal
}
})
})(key)
}
瀏覽器兼容
image.png
2、模板引擎：vue 的模板如何被解析，指令如何處理？
3、渲染：vue 的模板如何被渲染成 html ？以及渲染過程
??你的鼓勵對我很重要，會激勵我寫出更加優秀的文章??
image.png
