vue（1）MVVM

一、和jQuery的区别

• 数据和视图的分离，解耦（开放封闭原则，扩展开放，修改封闭）
• 以数据驱动视图，只关心数据的变化，DOM 操作被封装

二、MVC

• M：Model 数据
• V：View 视图
• C：Controller 控制器、逻辑处理

三、MVVM

• M：Model 数据
• V：View 视图，模板
• VM：ViewModel 负责连接 View 跟 Model，是两者之间的桥梁，View 通过事件绑定来操作 Model，Model 通过数据绑定来操作 View

  <!-- view 视图，模板 -->
  <div id="app">
    <div>
      <input v-model="title" type="text">
      <button @click="add">提交</button>
    </div>
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
  </div>

  <script>
    // model 数据
    var data = {
      title: '',
      list: [],
    };

    // viewModel （view 和 model 之间的桥梁） 
    var vm = new Vue({
      el: '#app',
      data,
      methods: {
        add() {
          this.list.push(this.title);
          this.title = '';
        }
      }
    })
  </script>


// 对应的 render 函数
with (this) {
    return _c('div', {
        attrs: {
            "id": "app"
        }
    },
        [_c('div', [
            _c('input', {
                directives: [{
                    name: "model",
                    rawName: "v-model",
                    value: (title),
                    expression: "title"
                }],
                attrs: {
                    "type": "text"
                },
                domProps: {
                    "value": (title)
                },
                on: {
                    "input": function ($event) {
                        if ($event.target.composing) return;
                        title = $event.target.value
                    }
                }
            }),
            _v(" "),
            _c('button', {
                on: {
                    "click": add
                }
            }, [_v("提交")])]),
        _v(" "),
        _c('ul', _l((list),
            function (item) {
                return _c('li', {
                    key: item
                },
                    [_v(_s(item))])
            }))])
}

四、VUE三要素

1. 响应式：vue 如何监听到 data 的每个属性变化
2. 模板引擎：vue 的模板如何被解析，指令如何处理
3. 渲染：vue 的模板如何被渲染成 html ？以及渲染过程

五、响应式

1. 什么是响应式？
   (1) 修改 data 属性后，vue 能立刻监听到
   (2) data 属性被代理到 vm 上（vm.name可以访问）

2. defineProperty

var obj = {};
var name = 'jack';

Object.defineProperty(obj, 'name', {
    // 监听获取
    get() {
        console.log('get', name);
        return name;
    },
    // 监听设置
    set(newVal) {
        console.log('set', newVal);
        name = newVal;
    }
})
console.log(obj.name);  // 获取
obj.name = 'list';      // 设置

3. 模拟实现 vue

let vm = {};
let data = {
    price: 100,
    name: 'jack'
};
for (var key in data) {
    // 用var声明就要用闭包来保证 key 的独立作用域，不然值就全是 jack
    (function (key) {
        Object.defineProperty(vm, key, {
            get() {
                console.log('get', data[key]);
                return data[key];
            },
            set(newVal) {
                console.log('set', newVal);
                data[key] = newVal;
            }
        })
    })(key)
}

六、vue 中如何解析模板

1. 模板是什么
   (1) 本质就是字符串
   (2) 有逻辑，如v-if v-for等
   (3) 与 html 格式很像（标签），但有很大的区别（逻辑）
   (4) 最终还要转换为 html 来显式
   (5) 模板最终必须转换成 JS 代码，因为有逻辑，必须使用 JS 才能实现（css,html无法实现逻辑）
   (6) 转换为 html 渲染页面，必须用 JS 才能实现
   (7) 因此，模板最终转换成一个 JS 函数（render 渲染函数）
2. render 函数
   (1) 模板中所以的信息都包含在 render 函数中
   (2) this 即 vm
   (3) price 即 this.price 即 vm.price，即 data 中的 price
   (4) _c 即 this._c 即 vm._c
   3.render 函数与 vdom
   (1) vm._c其实就相当于 snabbdom 中的 h 函数
   (2) render 函数执行之后，返回的是 vnode
   (3) 使用 patch 函数来对比返回的 vnode 跟上一次的 vnode 对比
   (4) updateComponent 中实现了 vdom 的 patch，页面首次渲染执行 updateComponent，data 中每次修改属性，执行 updateComponent

七、vue 的整个实现流程

• 第一步：解析模板成 render 函数
• 第二步：响应式开始监听
• 第三步：首次渲染，显示页面，且绑定依赖
• 第四步：data 属性变化，触发 rerender