🎩vue三要素

• 响应式：vue 如何监听到 data 的每个属性变化？
• 模板引擎：vue 的模板如何被解析，指令如何处理？
• 渲染：vue 的模板如何被渲染成 html ？以及渲染过程

1、响应式：vue 如何监听到 data 的每个属性变化？

什么是响应式

• 修改 data 属性之后，vue 立刻监听到 响应式
• data属性被绑定到vm上

var vm = new Vue({
    el: '#app',
    data: {
        name: 'zhangsan',
        age: 20 
    }
})

• vue实现响应式核心函数：Object.defineProperty 伪代码 该函数无法通过babel等进行shim，所以IE8就悲剧😬了

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)
}

浏览器

2、模板引擎：vue 的模板如何被解析，指令如何处理？

3、渲染：vue 的模板如何被渲染成 html ？以及渲染过程