经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » Vue.js » 查看文章
谈谈vue的生命周期
来源:cnblogs  作者:妖色调  时间:2018/10/24 9:23:12  对本文有异议

什么是生命周期?

  • 生命周期就是指一个对象的生老病死

  • 产品生命周期(product life cycle),简称PLC,是产品的市场寿命,即一种新产品从开始进入市场到被市场淘汰的整个过程。弗农认为:产品生命是指市场上的营销生命,产品和人的生命一样,要经历形成、成长、成熟、衰退这样的周期。

  • vue生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子

vue生命周期图解

生命周期钩子组件状态补充
beforeCreate在实例初始化之后,this指向创建的实例。此时组件的选项还未挂载,因此无法访问methods,data,computed上的方法或数据常用于初始化非响应式变量
created实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组通常我们可以在这里对实例进行预处理。例如ajax请求
beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用。-
mounted实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问常用于获取VNode信息和操作,ajax请求
beforeupdate数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。-

注意!!!

  • created阶段与mounted阶段ajax请求的区别:前者页面视图未出现,如果请求的信息过多页面会长时间处于白屏状态

  • vue2.0之后主动调用$destroy()不会移除dom节点,作者不推荐直接destroy这种做法,如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点

vue生命周期的各个阶段

beforeCreate 创建前

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     beforeCreate:function(){
  7.         console.log("----------beforeCreate创建前----------")
  8.         console.log(this.$el)
  9.         console.log(this.$data)
  10.         console.log(this)
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     }
  14. })

created 创建后

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     created: function() {
  7.         console.log('----------created创建后----------')
  8.         console.log(this.$el);
  9.         console.log(this.$data);
  10.         console.log(this);
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     },
  14. })

beforeMount 挂载前

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     beforeMount: function() {
  7.         console.log('------beforeMount挂载前------');
  8.         console.log(this.$el)
  9.         console.log(this.$data)
  10.         console.log(this)
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     },
  14. })

mounted 挂载后

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     mounted: function() {
  7.         console.log('------mounted挂载后------');
  8.         console.log(this.$el)
  9.         console.log(this.$data)
  10.         console.log(this)
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     },
  14. })

beforeupdate 更新前 与 updated 更新后

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     beforeUpdate: function () {
  7.         console.log('----------------beforeUpdate 更新前状态---------------')
  8.         console.log(this.$el)
  9.         console.log(this.$data)
  10.         console.log(this)
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     },
  14.     updated: function () {
  15.         console.log('-------------------updated 更新完成状态---------------')
  16.         console.log(this.$el)
  17.         console.log(this.$data)
  18.         console.log(this)
  19.         console.log(this.perfect)
  20.         console.log(this.$refs) 
  21.     },
  22. })
  23. vm.perfect = '不完美'

这两个钩子看起来并没有什么不同,在两个钩子中分别写入console.log(this.$el.innerHTML)

  1. // beforeUpdate
  2. <div>完美</div> <a href="http://baidu.com">百度</a> <a href="file:///C:/Users/yantian/Desktop/vue.html">返回</a>
  3. // updated
  4. <div>不完美</div> <a href="http://baidu.com">百度</a> <a href="file:///C:/Users/yantian/Desktop/vue.html">返回</a>

据官方介绍
beforeupdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

beforeDestroy 销毁前 与 destroyed 销毁后

  1. var vm = new Vue({
  2.     el: "#app",
  3.     data:{
  4.         perfect:'完美'
  5.     },
  6.     beforeDestroy: function () {
  7.         console.log('----------------beforeDestroy销毁前--------------------')
  8.         console.log(this.$el)
  9.         console.log(this.$data)
  10.         console.log(this)
  11.         console.log(this.perfect)
  12.         console.log(this.$refs)
  13.     },
  14.     destroyed: function () {
  15.         console.log('-----------------destroyed销毁后-----------------------')
  16.         console.log(this.$el)
  17.         console.log(this.$data)
  18.         console.log(this)
  19.         console.log(this.perfect)
  20.         console.log(this.$refs)
  21.     },
  22. })

组件的生命周期

父组件

  1. <template>
  2.   <div class="hello">
  3.     <p>{{'msg'+msg}}</p>
  4.     <p>{{'str'+str}}</p>
  5.     <router-link to="/child">去child页面</router-link>
  6.     <bor1 v-bind:change="str" v-on:add="ok"/>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. import bor1 from './bor1.vue'
  12. export default {
  13.   components: {
  14.     bor1
  15.   },
  16.   name: 'HelloWorld',
  17.   data () {
  18.     return {
  19.       msg: 'Welcome to Your Vue.js App',
  20.       str: 100
  21.     }
  22.   },
  23.   methods: {
  24.     ok: function (param) {
  25.       this.str = param
  26.     }
  27.   },
  28.   beforeCreate () {
  29.     console.log('------hello---beforeCreate---创建前------')
  30.   },
  31.   created () {
  32.     console.log('------hello---created---创建后------')
  33.   },
  34.   beforeMount () {
  35.     console.log('------hello---beforeMount---挂载前------')
  36.   },
  37.   mounted () {
  38.     console.log('------hello---mounted---挂载后-------')
  39.   },
  40.   beforeUpdate () {
  41.     console.log('------hello---beforeUpdate---更新前-------')
  42.   },
  43.   updated () {
  44.     console.log('------hello---updated---更新后-------')
  45.   },
  46.   beforeDestroy () {
  47.     console.log('------hello---beforeDestroy---销毁前-------')
  48.   },
  49.   destroyed () {
  50.     console.log('------hello---destroyed---销毁后-------')
  51.   }
  52. }
  53. </script>

子组件

  1. <template>
  2.     <div>
  3.         <div>
  4.             {{surprise}}
  5.         </div>
  6.         <button @click="btn()">点击换字</button>
  7.         <div>{{change}}</div>
  8.     </div>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13.   name: 'bor1',
  14.   props: ['change'],
  15.   data () {
  16.     return {
  17.       surprise: '惊不惊喜'
  18.     }
  19.   },
  20.   beforeCreate () {
  21.     console.log('------bor1---beforeCreate---创建前------')
  22.   },
  23.   created () {
  24.     console.log('------bor1---created---创建后------')
  25.   },
  26.   beforeMount () {
  27.     console.log('------bor1---beforeMount---挂载前------')
  28.   },
  29.   mounted () {
  30.     if (this.change === 100) {
  31.       this.surprise = '刺不刺激'
  32.     }
  33.     console.log('------bor1---mounted---挂载后-------')
  34.   },
  35.   beforeUpdate () {
  36.     console.log('------bor1---beforeUpdate---更新前-------')
  37.   },
  38.   updated () {
  39.     console.log('------bor1---updated---更新后-------')
  40.   },
  41.   beforeDestroy () {
  42.     console.log('------bor1---beforeDestroy---销毁前-------')
  43.   },
  44.   destroyed () {
  45.     console.log('------bor1---destroyed---销毁后-------')
  46.   },
  47.   methods: {
  48.     btn () {
  49.       this.$emit('add', 200)
  50.     }
  51.   }
  52. }
  53. </script>

点击按钮后

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号