vue生命周期钩子
什么是生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
- beforeCreate：是第一个生命周期函数，表示实例完全被创建出来之前会执行这个函数。在此函数执行时，data和methods中的属性与方法定义都还没有初始化。
- created：是第一个生命周期函数，在此函数中，data 和 methods 都已经被初始化好了。
- beforeMount：是第三个生命周期函数，表示模板已经在内存中编辑完成了，但是还没有被渲染到页面中。
- mounted：第四个生命周期函数，此时内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当此函数执行完毕，表示实例已经被完全创建好了。
- beforeUpdate：此时界面还没有被更新。
- updated：updated 事件执行的时候，页面和 data 数据已经保持同步。
- beforeDestroy：销毁之前执行，当beforeDestroy函数执行时，表示vue实例已从运行阶段进入销毁阶段，vue实例身上所有的方法与数据都处于可用状态。
- destroyed：当destroy函数执行时，组件中所有的方法与数据已经被完全销毁。
例：
<!DOCTYPE html> <html> <head> <title>Vue的属性、方法和生命周期_侠课岛(9xkd.com)</title> <script src="./src/vue.min.js" type="text/javascript" ></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="button" @click="change" value="更新数据" /> <input type="button" @click="destroy" value="销毁" /> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message : "侠课岛欢迎你" }, methods:{ change() { this.message = '好好学习，天天向上'; }, destroy() { app.$destroy(); } }, beforeCreate: function () { console.group('beforeCreate 创建前状态：'); console.log("%c%s", "color:gary" , "el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message) }, created: function () { console.group('created 创建完毕状态：'); console.log("%c%s", "color:green","el : " + this.$el); console.log("%c%s", "color:green","message: " + this.message); }, beforeMount: function () { console.group('beforeMount 挂载前状态：'); console.log("%c%s", "color:gary","el : " + (this.$el)); console.log("%c%s", "color:gary","message: " + this.message); }, mounted: function () { console.group('mounted 挂载结束状态：'); console.log("%c%s", "color:orange","el : " + this.$el); console.log("%c%s", "color:orange","message: " + this.message); }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态：'); console.log("%c%s", "color:gary","el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态：'); console.log("%c%s", "color:Violet","el : " + this.$el); console.log("%c%s", "color:Violet","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态：'); console.log("%c%s", "color:gary","el : " + this.$el); console.log("%c%s", "color:gary","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态：'); console.log("%c%s", "color:blue","el : " + this.$el); console.log("%c%s", "color:blue","message: " + this.message) } }) </script> </body> </html>
钩子函数
一个指令定义对象可以提供如下几个钩子函数，这些钩子函数都是可选：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- unbind：只调用一次，指令与元素解绑时调用。
- inserted：被绑定元素插入父节点时调用。
- update：所在组件的 VNode 更新时调用，可能发生在其子 VNode 更新之前。
- componentUpdated：指令所在组件的 VNode 及其子 VNode全部更新后调用。
钩子函数参数
指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM。
- binding：一个对象，包含属性有name、value、oldValue、arg、expression、modifiers等。
- vnode：Vue 编译生成的虚拟节点。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
