🎩vue核心原理---vue三要素之响应式

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