MVVM

view、model以及ViewModel三部分组成，ViewModel即VM，是关联层，负责数据Model改变时，自动更新视图View，View变化时，自动更新model。
优点：开发者不用过多关注视图变化，更注重数据逻辑处理。
缺点：BUG需要到View和Model中去找。同时，model和view中数据关联性较强，不利于重用。

Vue的双向绑定

利用数据劫持和发布订阅模式，实现View和Model的双向绑定
Vue2: Object.defineProperty() 劫持各个属性的setter和getter方法，触发相应的getter和setter回调函数，通知发布者，发布者通知观察者，观察者接收到通知后，更新视图层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
</body>
</html>
<script>
    var obj = {};
    Object.defineProperty(obj, 'prop', {
        get: function () {
            return val;
        },
        set: function (newVal) {
            val = newVal;
            document.getElementById('text').innerHTML = val;
        }
    });
    document.addEventListener('keyup', function (e) {
        obj.prop = e.target.value;
    });
</script>

Vue3: 利用ES6的Proxy方法，对对象进行拦截。不用单独去兼容数组等，但不支持IE。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
</body>
</html>
<script>
    var obj = {};
    var obj1 = new Proxy(obj, {
        // receive就是返回的obj(返回的proxy对象)
        get: function (target, key, receive) {
            // 返回该属性值
            return target[key];
        },
        set: function (target, key, newVal, receive) {
            target[key] = newVal;
            document.getElementById('text').innerHTML = target[key];
        }
    })
    document.addEventListener('keyup', function (e) {
        obj1[0] = e.target.value;
    });
</script>

v-model

本质是一个父子组件通信的语法糖，通过prop和$.emit实现

<input type="text" v-model="name">
实则是等于下面的：
<input type="text" :value="name" @input="name=$event.target.value">

// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>

// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>

props:{value:aa,}
methods:{
    onmessage(e){
        $emit('input',e.target.value)
    }
}

this.$nextTick

Vue的数据驱动视图更新的操作，是异步执行，需要等到同一事件循环中的所有数据变化结束后，视图统一更新。
在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

Vue相关知识

MVVM

Vue的双向绑定

v-model

this.$nextTick