Vue - 生命周期详解

最新推荐文章于 2022-04-11 14:48:31 发布

李不烦

最新推荐文章于 2022-04-11 14:48:31 发布

阅读量244

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/103668447

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期示意图如下：

生命周期文件解析：

先看完整代码：

控制台打印如下：

可以看到一个vue实例在创建过程中调用的几个生命周期钩子。

详细情况如下：

new Vue()

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后才会执行beforeCreate钩子函数，

beforeCreate

官方解释：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项对象还未创建，el 和 data 并未初始化，没有挂载到vm对象。因此无法访问methods， data， computed等上的方法和数据。

var vm = new Vue({
    el: '#app',
    data: {
      message: '好好学习！！！'
    },
    beforeCreate(){
      console.group('beforeCreate 创建前状态==========>>');
      console.log("%c%s", "color:red", "el     : ",this.$el);   //undefined
      console.log("%c%s", "color:red", "data   : ",this.$data); //undefined
      console.log("%c%s", "color:red", "message: ",this.message);   //undefined
    },
// ....

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

说明：在此阶段我们可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，在这里更改数据不会触发updated钩子函数。注意此时el元素还未存在，不能对dom元素进行操作。

 created(){
      console.group('created 创建完毕状态==========>>');
      console.log("%c%s", "color:red", "el     : ",this.$el);   //undefined
      console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
      console.log("%c%s", "color:red", "message: ",this.message);   //好好学习！！！
      this.message="good good study"; // 不会触发updated钩子函数
      console.log("%c%s", "color:red", "message: ",this.message); //  good good study
    },

首先会判断对象是否有挂载元素el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上手动挂载，即调用vm.$mount(el)。

此时如果注释掉vm中的代码:

 var vm = new Vue({
    //el: '#app',
    data: {
      message: '好好学习！！！'
    },
   // ...

然后运行，到created就停止了。

页面显示:

如果我们在后面继续调用vm.$mount(el),可以发现代码继续向下执行了

vm.$mount('#app')

然后，我们往下看，template参数选项的有无对vue生命周期的影响。

（1）.如果vue实例对象中有template参数选项，则将其作为模板template编译成虚拟dom放入到render函数中准备渲染。
（2）.如果没有template选项，则将挂载元素el的outerHTML作为模板template编译。
（3）.可以看到template中的模板优先级要高于outerHTML的优先级。
修改代码如下, 在HTML结构中增加了一串html，在vue对象中增加了template选项：

// ...
<body>
<div id="app" @click="change">
  <p>{{message +'这是在outer HTML中的'}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
    data: {
      message: '好好学习！！！'
    },
 // ...

执行后结果页面显示:

那么将vue对象中template的选项注释掉后打印如下信息：

在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.

//.. 
render: function(createElement) {
      return createElement('h2', 'this is createElement')
    },
//..

所以综合优先级排名：
render函数选项 > template选项 > el选项/(template不存在时)outer HTML.

找到实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

在这个函数中$el属性已存在，$el值不再是undefined，虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以说是渲染前最后一次更改数据的机会而不会触发其他钩子函数。并且替换掉挂载的DOM元素el。

 beforeMount(){
      console.group('beforeMount 挂载前状态==========>>');
      console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
      console.log("%c%s", "color:red", "message: "+this.message);   //好好学习！！！

    },

在mounted之前，p中还是通过{{message}}进行占位的，因为此时还没有挂在到页面上，还是以JavaScript中的虚拟DOM形式存在。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

 mounted(){
      console.group('mounted 挂载结束状态==========>>');
      console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]
      console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！
    },

beforeUpdate

当组件或实例的数据data更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

说明：beforeUpdate是指view层的数据变化前触发，不是data中的数据改变前触发（此时data中的数据已经改变）。因为Vue是数据驱动的。

updated

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

执行vm.$destroy()函数触发beforeDestroy和destoryed钩子函数

beforeDestroy

在实例销毁之前立即执行beforeDestroy，在实例销毁之前调用。在这一步，实例仍然完全可用。一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

destroyed

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

李不烦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue - 生命周期详解

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期示意图如下：生命周期文件解析：先看完整代码：控制台打印如下：可以看到一个vue实例在创建过程中调...
复制链接

扫一扫

专栏目录