四.MVVM原理

MVVM原理

es5 Object.defineProperty(obj,‘属性’,{
value:1,
set:function(){},
get:function(){}
})’’

<script>
    var obj = {
      a:10
    }
    var a = 10
    // Object.defineProperty() 可以定义没有属性或者存在属性
    Object.defineProperty(obj,'a',{
      get:function(){ // getter（获取的拦截器）
        console.log('a属性获取了')
        return a
      },
      set:function(newVal){  // setter （设置拦截器）
      
        console.log('a属性设置了新值是'+newVal)
        //这里重新赋值设置
        a = newVal
      }
    })
    //走获取拦截器
    console.log(obj.a)
    //走设置拦截器
    obj.a = 100
    //这里走get拦截器，但是值重新设置了
    console.log(obj.a) 
  </script>

注意：Object.defineProperty不兼容IE8及以下浏览器 所有vue不兼容IE8及以下浏览器

当我们创建一个实例（new Vue、组件），vue就会去遍历，new Vue传入的对象中的data属性（也是对象），将data这个对象中的所有的属性 通过 Object.defineProperty()转换成getter/setter,每个实例都有一个watcher(观察者)，观察这些getter/setter是否触发，触发之后，在观察者的回调中，去调用render（re-render）函数,生成虚拟dom

虚拟dom:
  就是利用 js对象的结构 描述一段dom结构
  <div id="box" class="cls">
    <p id="p">aa</p>
    <span>dwdw</span>
    我是文本内容
  </div>
	

  {
    tag:'div',
    props:{
      id:"box",
      className:'cls'
    },
    children:[
      {
        tag:'p',
        props:{
          id:'p'
        },
        children:['aa']
      },
      {
        tag:'span',
        props:{},
        children:['dwdw']
      },
      '我是文本内容'
    ]
  }

为什么要用虚拟dom:
页面首次渲染，渲染成功后，会生成一段初始虚拟dom存在内存中，当数据更新时，立即重新生成新的虚拟dom，新的虚拟dom会和上一次内存中保存虚拟dom（数据未改变前真实dom结构映射）进行比较（diff算法），得到最少dom操作，更新真实dom,同时会更新内存中的虚拟dom

循环中为什么要加key:（独一无二）
  相当于电影院中座位表
  diff算法 在逐层比较时，会按照 相同key进行比较，加key之后，就相当于给这一行的 某个元素 加了一个独一无二的标识 方便进行比较