Vue得MVVM原理和数据驱动

MVVM原理

es5 Object.defineProperty(obj,‘属性’,{
value:1,
set:function(){},
get:function(){}
})
注意：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之后，就相当于给这一行的 某个元素 加了一个独一无二的标识 方便进行比较

数据驱动 尽量不要操作dom

解决 页面刷新 刚打开时 闪烁问题

问题原因：
代码执行顺序从上往下，在 vue实例还未创建，vue还没有作用html上，此时我们模板 只是单纯字符串
实例作用到html，模板开始解析

style
  [v-cloak]{
    display:none;
  }

<div v-cloak> {{ msg }} </div>

在 vue 实例还未作用到html上，此时v-cloak只是一个普通的自定义属性[v-cloak]属性选择器可以选中这个元素，
此时隐藏，当vue实例作用到html上之后，vue会自动去除 元素上的 v-cloak属性

表单修饰符

.lazy 将v-model由input事件触发改为 change事件
.trim 去除开头和结尾空格
.number  将输入的值过滤成数字
          1，按照parseFloat规则规律
          2，过滤不了 则 不解析 （原来字符串）