关于Vue生命周期
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。
(可以在浏览器F12控制台中查看相关记录)启动顺序:
- beforeCreate
- created
- beforeMount
- mounted
更新属性值的事件流程:
- beforeUpdate
- updated
Vue销毁流程:
- beforeDestroy
- destroyed
在属性值更新之后(更新属性值是异步操作),要执行DOM操作可以在下面的代码中执行.
1 2 3 4 | this.msg="更新值"; this.$nextTick(function () { // msg值已经完成更新,并且DOM已经重新加载. }) |
示例
示例中的销毁Vue实例,因为会执行消息提示到页面,所以会执行更新属性值的事件!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | <!DOCTYPE html> <html lang="en"> <head> <title>Vue</title> <meta charset="UTF-8"/> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> </style> </head> <body> <div id="app"> <div>name:{{name}}</div> <div>name input:<input type="text" v-model="name"/></div> <div style="color:#ff0000;font-size: 22px;">{{msg}}</div> <div><input type="button" value="销毁vue实例" @click="destroyVue()"/></div> </div> <script> let vue = new Vue({ el:"#app", data:{ name:'李四', msg:'-', eventArr:[] }, methods:{ destroyVue:function() { /* 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 触发 beforeDestroy 和 destroyed 的钩子。 在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。 */ this.msg="警告信息: Vue 实例已销毁!"; this.$nextTick(function () { // DOM 更新之后,销毁实例. this.$destroy(); }) } }, beforeCreate:function(){ // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 console.log("beforeCreate"); }, created:function(){ // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 console.log("created") }, beforeMount:function(){ // 在挂载开始之前被调用：相关的 render 函数首次被调用。 // // 该钩子在服务器端渲染期间不被调用。 console.log("beforeMount") }, mounted:function(){ /* el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted： mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } 该钩子在服务器端渲染期间不被调用。 */ console.log("mounted") }, beforeUpdate:function(){ /* 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。 */ console.log("beforeUpdate"); }, updated:function(){ /* 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。 注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated： updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) } 该钩子在服务器端渲染期间不被调用。 */ console.log("updated"); }, activated:function() { /* keep-alive 组件激活时调用。 该钩子在服务器端渲染期间不被调用。 */ console.log("activated"); }, deactivated:function() { /* keep-alive 组件停用时调用。 该钩子在服务器端渲染期间不被调用。 */ console.log("deactivated"); }, beforeDestroy:function(){ /* 实例销毁之前调用。在这一步，实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。 */ console.log("beforeDestroy"); }, destroyed:function(){ /* Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 */ console.log("destroyed"); }, errorCaptured:function(){ /* 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。 错误传播规则 默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。 */ console.log("errorCaptured"); } }) </script> </body> </html> |
