Vue生命周期

最新推荐文章于 2024-07-22 11:56:16 发布

米卡小米

最新推荐文章于 2024-07-22 11:56:16 发布

阅读量237

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/cmy741741/article/details/119823402

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue实例的生命周期全过程（图）

1.在beforeCreate和created钩子函数间的生命周期

在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件

2.created钩子函数和beforeMount间的生命周期

首先系统会判断对象中有没有el选项

有el选项，则继续编译过程

没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)

(1)正常定义el时

new Vue({
  el: '#app',
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})

结果为

而当我们把el去掉：

new Vue({
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})

结果为

生命周期的钩子函数执行到created就结束了

而当我们不加el选项，但是手动执行vm.$mount(el)方法的话，也能够使暂停的生命周期进行下去

var vm = new Vue({
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})
vm.$mount('#app')

（2）template参数选项的有无对生命周期的影响

1.如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数

2.如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高

3.如果1,2条件都不具备，则报错

new Vue({
  el: '#app',
  template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})

也可以把参数选项写在外部HTML中，像这样：

<div id="app"><p>模板是在外部HTML中找到的~</p></div>
创建对象实例：
new Vue({
  el: '#app'
})

当模板同时放在template参数选项和外部HTML中

<div id="app"><p>模板是在外部HTML中找到的~</p></div>
new Vue({
  el: '#app',
  template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})

最终显示的是“模板在templated参数中找到了哟~”而不是“模板是在外部HTML中找到的~”，因为template参数的优先级比外部HTML的优先级要高 。

3.beforeMount和mounted钩子函数间的生命周期

正因为render函数和template选项的“优先级”比外部HTML要高，所以，最后一般会存在一个外部HTML模板被Vue实例本身配置的模板所“替代”的过程也就是上图所说的 “replace”

4.beforeUpdate钩子函数和updated钩子函数间的生命周期

在Vue中，数据更改会导致虚拟 DOM 重新渲染，并先后调用beforeUpdate钩子函数和updated钩子函数

5.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

【注意】就如同调用在Vue实例上调用$mounted会使暂停的生命周期继续一样，调用$destroy()会直接销毁实例

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成