vue数据响应式原理

vue2.x数据响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因

    <div id="app"></div>
    const data = {
        name:'张三'
    }
    const vm = {}
    Object.defineProperty(vm,'name',{
        // 数据是否可以被修改 
        configurable:true,
        //数据是否可以被枚举
        enumerate:true，
        get() {
            return dataname       
        },
        set (newValue) {
           if(newValue === data.name) return
           data.name = newValue
           document.querySelector('#app').textContent = newValue
         }
    })
    vm.name = '李四'

vue3.x数据响应式原理

vue3 是通过ES6提供的ProxyAPI取代了之前defineProperty来实现对数据的侦测

   <div id="app"></div>
   const data = {name:'张三'}
   const vm = new Proxy(data,{
       get (target,key) {
           return target.key
       },
       set (target,key,newValue) {
           if(target.key === newValue) return
           target.key = newValue
           document.querySelector('#app').textContent = newValue
       }
   })
   vm.name = '李四'

proxy对比Object.defineProperty

proxy的优势如下

• Proxy 可以直接监听对象而非属性
• Proxy 可以直接监听数组变化
• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的
• Proxy 返回的是一个新对象，我们可以只操作新对象来达到目的，而Object.defineProperty只能遍历对象属性直接修改

Object.defineProperty的优势如下

• 兼容性好支持IE9，而Proxy存在浏览器兼容问题，而且无法用 polyfill。