它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue实现数据双向绑定主要是：

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）

来劫持各个属性的setter，getter，

在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，

Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。

用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，

在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，

整合Observer，Compile和Watcher三者，

通过Observer来监听自己的model的数据变化，

通过Compile来解析编译模板指令（vue中是用来解析 {{}}），

最终利用watcher搭起observer和Compile之间的通信桥梁，

达到数据变化 —>视图更新；

视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定:

<body>

    <div id="app">

    <input type="text" id="txt">

    <p id="show"></p>

</div>

</body>

<script type="text/javascript">

    var obj = {}

    Object.defineProperty(obj, 'txt', {

        get: function () {

            return obj

        },

        set: function (newValue) {

            document.getElementById('txt').value = newValue

            document.getElementById('show').innerHTML = newValue

        }

    })

    document.addEventListener('keyup', function (e) {

        obj.txt = e.target.value

    })

</script>

.创建局部指令

var app = new Vue({

    el: '#app',

    data: {

    },

    // 创建指令(可以多个)

    directives: {

        // 指令名称

        dir1: {

            inserted(el) {

                // 指令中第一个参数是当前使用指令的DOM

                console.log(el);

                console.log(arguments);

                // 对DOM进行操作

                el.style.width = '200px';

                el.style.height = '200px';

                el.style.background = '#000';

            }

        }

    }

})

.全局指令

Vue.directive('dir2', {

    inserted(el) {

        console.log(el);

    }

})

.指令的使用

<div id="app">

    <div v-dir1></div>

    <div v-dir2></div>

</div>

v-if按照条件是否渲染，v-show是display的block或none；

mvc和mvvm其实区别并不大。

都是一种设计思想。

主要就是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，

加载速度变慢，影响用户体验。

和当 Model 频繁发生变化，开发者需要主动更新到View 。