Vue事件驱动原理

Vue事件驱动原理

1. 数据驱动
   当数据发生改变时，视图也会进行更新，这叫做数据驱动，也就是数据驱动视图
2. 深入响应式原理
   数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新
3. 双向数据绑定原理
   当我们使用 v-model 指令绑定了表单元素时，那么我们可以在视图直接获得数据，当视图发生改变时，数据也会进行更新

综上： 三者都是应用了同一个底层原理，这个底层原理由es5的 Object.defineProperty 属性来提供

​
HTML代码：

  <button> 修改 </button>
  <div class="box"></div>
  <input type="text">

JavaScript代码：

/* 
    Object.defineProperty( obj, attr, options )
      obj: 指的是要监听的对象
      attr: 是这个对象身上的属性
      options: 是对这个对象的属性的配置
        核心： 
            是否可读
            是否可遍历（ 枚举 ）
            存储器
              get 
              set
  */
  var box = document.querySelector( '.box' )
  var btn = document.querySelector('button')
  var input = document.querySelector('input')
  var people = {//创建一个对象
    name: '阿财'
  }
  Object.defineProperty( people, 'name' , {
    get () {//获取到people对象当前’name‘属性的值
      return 'Vue'//返回一个新的值
    },
    set ( val ) {
      console.log( val ) //val是修改后的值
      box.innerHTML = val//将people的'name'属性修改后的新值赋值给box
      console.log( 'set' )
    } 
  })
  box.innerHTML = people.name//此时people的'name'的属性值变为Vue
  btn.onclick = function(){
    people.name = "毛毛"//鼠标点击时将people的'name'的属性值设置为'毛毛'
  }
  // box.innerHTML = people.name 
  // console.log( people )


  input.oninput = function() {//实时监听input的value值
    console.log( input.value )
  }

• vue中底层原理的实现主要是依赖 存储器（ getter/setter ）

• 我们利用了数据劫持和事件的发布订阅来实现双向数据绑定，当我们在vue data选项中定义数据时，vue会通过观察者对象（ observer ）将data选项中的所有key，经过Object.defineProperty 的getter 和setter进行设置，当我们通过 v-model指令绑定元素是， 自动触发getter,getter会返回一个初始值，这样我们在视图中就可以看到数据了，当视图中内容改变时，会触发setter,setter会通知vue，视图已经进行了更新，vue会重新生成 虚拟DOM , 继而通过 新旧 虚拟DOM 对比， 生成patch对象，再将patch对应渲染到视图中

Vue.set/this.$set 的原理（ 数组的下标和length不响应 ）

底层：Object.assign

JavaScript代码：
 var obj1 = {
      name1: '阿财',
    }
    var obj2 = {
      name2: '毛毛'
    }

    var obj3 = Object.assign( {},obj1,obj2 ) //进行对象合并的

    console.log( obj3 )//{name1: "阿财", name2: "毛毛"}



  console.log(Object.keys( obj1 ))//["name1"]
  console.log(Object.values( obj1 ))//["阿财"]