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
