Vue生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45700583/article/details/113122767

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.log('------beforeCreate创建前状态------');
    },
    add () {
       ...
    }
 </script>

vue整个的生命周期中的钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

创建渲染：
1.创建实例new Vue()之后会初始化事件和生命周期,只是一个空壳 ——》执行 beforeCreate()

2.挂载数据data、绑定事件等等 ——》执行 created()
(此时没有挂载元素el、但能更改数据data，在这里更改数据不会触发updated钩子函数 (没有渲染所以不会触发)，在这里可是渲染前倒数第二次更改数据的机会)

(编译模板：render函数选项 > template选项 >el挂载的outer HTML(template不存在时))
3.编译模板为虚拟dom放入到render函数中准备渲染 ——》执行beforeMount ()
在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以说是渲染前最后一次更改数据的机会而不会触发其他钩子函数。

 (两次更改数据不会触发updated钩子函数，因为有data单没有渲染显示，所以在显示前可以更改且不触发)

Vue的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
new Vue({
	router,   //路由
	store,    //根实例状态存储，子组件通过this.$store访问
	render:h=>h(App),  //App组件渲染，这里的h即是vm.$createElement，便是在vm._render这个阶段
	data:{
		//eventHub:new Vue()
	}
}).$mount('#app');

没渲染之前html中还是{{message}}

4 执行render() 后，渲染出真实dom， ——》执行mounted ()

更新：

5.当组件或实例的数据data更改之后 ——》执行 beforeUpdate ()
（ vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新执行render()渲染）

6.当更新完成后 ——》执行 updated()

销毁：
7. 当经过某种途径调用$destroy方法准备销毁，在实例销毁之前 ——》执行beforeDestroy()
(在这一步，实例仍然完全可用。一般在这里做一些善后工作，例如清除计时器)

8 清除组件的数据绑定、监听…去掉后只剩下dom空壳， Vue 实例销毁后——》执行 destroyed()
(vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁)

在这里插入图片描述

|
|
|
|
挂载代码的实现过程：

    (编程范式：声明式编程(做到数据与界面完全分离))
      挂载元素 ——》去解析这个元素，然后解析到某个变量message；
      看在data里面有没有定义这个变量，如果定义了就会把该变量的值在元素中显示。
      即：先根据el，找元素---》解析元素内容---》对照data；

点击看详细版