Vue-响应式数据

响应式数据

　　所谓的响应式数据就是如果内存中的数据变化了页面UI也会动态跟着刷新这种数据就是响应式数据

Vue实现响应数据的原理

　　vue2.0 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

　　vue3.0 --使用es6 proxy 代理了data对象

Vue实现响应式数据的源代码

function MyVue(option){
        let _myvm={}
        //劫持
        let arr=Object.keys(option.data)
        for(let i=0;i<arr.length;i++){
             Object.defineProperty(_myvm,arr[i],{
             set(v){
             //劫持
             option.data[arr[i]]=v
             //响应-刷新页面
             let title=document.querySelector(option.el+" #title")
             let msg=document.querySelector(option.el+" #msg")
             title.innerHTML=_myvm["title"]
             msg.innerHTML=_myvm["msg"]
             },
             get(){
                 return option.data[arr[i]]
             }
         })
     _myvm[arr[i]]=option.data[arr[i]]
                      
}
                 
                                                 
　　return _myvm
}