1. 双向数据绑定 :
      vue的数据双向绑定,将mvvm 作为数据绑定的入口,整合 Observer, Complie 和watcher 三者,通过Observer 来监听自己的model 的 数据变化, 
      通过Compile 来解析编译模板指令(vue 中是用来解析{{}})最终利用 watcher 搭起 Observer 和Compile 之间的通信桥梁,
      达到数据变化-》 视图更新-》;视图变化(input)->数据model 变更双向绑定 
        <input id='app' />
        <span id='spanVal'> </span>
        var obj = {}
        var initVal = 'aaa';
        Object.defineProperty(obj,initVal,{
            get(){
              console.log('获取obj的最新值')
              return initVal
            },
            set(val){
                  initVal = val;
                  console.log('设置最新的值')
                  document.getElementById('initVal').text(initVal)
            }
        })
        document.addEventListener('keyup',function(e){
            obj.initVal = e.target.value; // 监听获取文本框输入的值
        }) 
    2. 响应式原理 : 
        vue 在初始化数据时,会对数据进行递归遍历,把每个属性都转换成get 和set 通过 Object.defineProperty () 方法实现数据劫持  
        他可以接收三个参数 第一个参数 要操作的对象,第二个参数 要定义或修改的对象属性名 第三个 描述对象,
        当数据变化时,会触发setter,setter会通知所有订阅者,订阅者就会更新页面视图,从而实现了数据双向绑定

Logo

前往低代码交流专区

更多推荐