Vue双向数据绑定原理

Vue双向数据绑定原理

• 知识点预热

  #1.单向数据传递
   优点：数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷(便于控制)
   缺点：繁琐，不方便。需要多个action控制各个view
  #2.双向数据绑定
    优点：model和view双向绑定，数据改变驱动视图自动更新，操作简单方便
    缺点：数据相互依赖相互绑定，数据问题的源头难以被跟踪到(容易不受控制) 解决方案：Vuex状态管理
  #3.Vue双向数据绑定的原理(专业术语：数据劫持)
   Vue内部通过Object.defineProperty方法属性拦截的方法，把data对象里每一个数据的读写转化为getter/setter,当数据变化时通知试图更新；
  

双向数据原理.PNG

Watcher 起到了桥梁的作用连接了Compile 和Observer ，数据变化会驱动视图更新

订阅者模式：与关注某某大咖一样，关注了后大咖发布新的消息就会推送给你，若上图添加订阅后数据发生变化就会触发Watcher钩子

Object.defineProperty()

#代码表述：
let obj = {};
obj.gf_age = 18;
console.log( obj.gf_age );
#文字表述：
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性返回这个对象；
#与代码交流是不是明白了 QAQ

# Object.defineProperty()的属性操作符
# 1. get:一个给属性提供getter的方法，如果没有getter 则为undefined
# 2. set:一个给属性提供setter的方法，如果没有setter则为undefined，当属性值修改时
# 触发执行该方法，该方法将接受唯一参数，即该属性新的参数值
# 3.configurable:当且仅当该属性的configurable为true时，该属性描述符才能够被改变
# 同时该属性也能从对应的对象上被删除，默认为true
# 4.value:该属性对应的值，可以是任何有效的js值(数值，对象，函数..)。默认为undefined
# 5.writable:当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为true
# 6.enumerable:当且仅当改属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为true

    
        
        
        
        
    
    
    
        

        
        

            
 假如我有一个女朋友 
            
她的名字叫 
            
她今年