Vue知识点总结

1.Vue生命周期

》》在beforeCreate 和Created之间，进行初始化事件，进行数据的观测。此时还没有el选项
》》在Created钩子函数和beforeMount这一阶段发生的事情就比较多了。
首先 会判断对象是否有el选项，如果有就继续编译，如果没有则停止编译，也就意味着生命周期停止，直到在该实例上调用vm.$mount(el)

template参数选项对生命周期的影响

1. 如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
2. 如果没有template选项，则将外部HTML作为模板编译。
3. template中的模板优先级高于外部HTML的优先级
4. 在vue对象中还有一个render函数，它是以create element作为参数，然后做渲染操作。render函数的优先级最高。

》》beforeMount和mounted钩子函数之间 此时是给vue实例对象添加$el 成员，并且替换掉挂载的Dom元素。
》》在mounted之前还是通过{{message}}进行占位，在mounted之后就发生了变化。
》》beforeUpdate和update之间
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
》》beforeDestroy和destroyed钩子函数
beforeDestroy在实例销毁之前调用，在这一步，实例仍然可用。
destroyed在vue实例销毁之后调用。调用后，vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
综上：
第一次页面加载会触发哪几个钩子？
beforeCreated 、created 、 beforeMount、mounted
DOM渲染在mounted中就已经完成
生命周期钩子的一些使用方法：
　　beforecreate : 可以在这加个loading事件，在加载实例时触发
　　created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
　　mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数
　　beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

2.vue双向数据绑定原理

　　vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

　　具体步骤：
　　第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
　　第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
　　第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

   1、在自身实例化时往属性订阅器(dep)里面添加自己
　  2、自身必须有一个update()方法
　　3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中
　　绑定的回调，则功成身退。

　　第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
　　参考链接

3.MVVM

MVVM是Model-View-ViewModel的缩写，他是一种基于前端开发的架构模式，其核心是提供对View和View Model的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即双向数据绑定。

而Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。它的核心是MVVM中VM，也就是ViewModel。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

---

未完待续