vue的生命周期及配图

最新推荐文章于 2024-04-18 13:33:03 发布

Princess_Wuyou

最新推荐文章于 2024-04-18 13:33:03 发布

阅读量775

点赞数 2

文章标签： vue vue.js node.js

本文链接：https://blog.csdn.net/princess_Wuyou/article/details/107515348

版权

vue的生命周期及配图

这是一张vue生命周期的官方文档图的中文解释版。
在这里插入图片描述

vue的生命周期一共分为八个阶段

1、BeforeCreate (创建前)
2、Created (创建后)
3、BeforeMount (载入前)
4、Mounted (载入后)
5、BeforeUpdate (更新前)
6、Updated (更新后)
7、BeforeDestroy (销毁前)
8、Destroyed (销毁后)

这几个阶段上图给出了很好的解释

vue第一次加载页面会触发的几个钩子函数

1、BeforeCreate
2、Created
3、BeforeMount
4、Mounted

DOM渲染在Mounted周期中就已经完成了

其实对于vue的生命周期，第一张的官方文档图就给出了很好的解释

mounted

1.在mounted里面修改data里面的数据，并不是想要的直接就拿mounted里面的修改过的
值渲染界面，而是还会先拿data里面的初始值进行渲染，然后走beforeUpdate这里拿新的
数据进行渲染
2.这是不是说如果想要修改data里面的数据，要在beforeMounted的时候修改呢
3.其实beforeMounted也是先按照默认值进行渲染，如果beforeMounted里面修改数据比较
慢的话，他是不会等着的，还是会直接执行下一个生命周期函数。也就是说所有的生命周期
函数之间没有done的操作
4.如果在beforeMounted里面加一个setInterval()来延迟修改值的话，也会触发
beforeMounted函数
5.往下看其实发现在mounted生命周期之前修改data里面的数据都是在修改虚拟dom，直
到mounted之后任何修改才会被渲染到页面上。
6.所以理论上只要在mounted之前修改数据都行，比如mounted里面进行ajax请求，也是
这个原理
7.这个还需要再看下源码，应该就能记得比较清楚
8.挂载页面。

beforeCreate

1.进行初始化事件，this指向创建的实例
2.不能访问到data
3.不能访问computed
4.不能访问watch
5.不能访问methods
6.以上的方法和数据
7.用来初始化非响应变量

created钩子

1.实例创建完成
2.数据已经和data属性绑定，此时放在data中的属性值发生改变的同时，视图也会改变
3.可以初始化ajax请求了
4.可以访问data
5.可以访问computed
6.可以访问watch
7.可以访问methods
8.可以访问到以上的方法和数据
9.未挂载到DOM
10.不能访问到ref属性内容为空数组

beforeMount

1.判断是否有el选项，有就继续，没有就停止编译，除非调用vm.$moune(el)
2.是否有template参数选项
3.有template参数选项，将模板编译为render函数
4.没有template选项，将外部html作为模板编译
5.template中的模板优先级要高于outerHTML的优先级

<body>
<divid="app">
<!--html中修改的-->
<h1>{{message+'这是在outerHTML中的'}}</h1>
//有template属性的时候这个就不会被渲染了
</div>
</body>
<script>
varvm=newVue({
el:'#app',
template:"<h1>{{message+'这是在template中的'}}</h1>",//在vue配置项中修改
的
data:{
message:'Vue的生命周期'
}
</script>

6.如果Vue对象中还有一个render函数的话，那么又会先渲染render函数里面的内容。所
以这是有优先级的
7.模板编译完成，但是未挂载，无法获取dom
8.给实例对象添加$el成员
9.在挂载开始前被调用，在beforeMount之前，会找到对应的template，并编译成render
函数

mounted

1.在mounted之前还是通过{{message}}进行占位的，因为还没有挂载到页面上，还是在js
中以虚拟dom形式存在的
2.mounted之后换成了我们想要的样子
3.实例挂载到DOM上，此时可以通过DOMapi获取到DOM节点。
4.$ref属性可以访问
5.常用于获取VNode信息ajax请求