vue生命周期钩子函数(详解及使用场景)
![1、beforeCreate (使用频率低)* 在实例创建以前调用* 没有实例化,数据访问不到2、created (使用频率高)* 实例被创建完成后调用* 能拿到数据* 能修改数据,* 且修改数据不会触发updatedbeforeUpdate钩子函数*可以在这个钩子函数里发请求,访问后端接口拿数据*判断是否存在el,是否存在template,如果二者都有,以t...
![1、beforeCreate (使用频率低)
* 在实例创建以前调用
* 没有实例化,数据访问不到
2、 created (使用频率高)
* 实例被创建完成后调用
* 能拿到数据
* 能修改数据,
* 且修改数据不会触发updated beforeUpdate钩子函数
* 可以在这个钩子函数里发请求,访问后端接口拿数据
* 判断是否存在el,是否存在template,如果二者都有,以template为主优先, 如果 没有template,会选择el模板。
如果二者都没有,有$mount 也可以调用模板
3、beforeMount
- 真实的dom节点挂载到页面之前
- 编译模板已经结束,虚拟dom已经存在,
- 可以访问数据,也可以更改数据
- 且修改数据不会触发updated beforeUpdate钩子函数
- 在beforeMount和mounted之间隐藏了一个render函数,千万不能写,会覆盖系统函数
4、mounted(挂载)- 真实的dom节点挂载到页面以后
- this.$refs找到ref表示的节点
- 可以访问和更改数据
- 且修改数据会触发updated beforeUpdate钩子函数
5、beforeUpdate
* 修改之前调用
6、updated
* 修改之后调用
* beforeUpdate 、updated 可以监控data里的所有数据变化
* 不要在update beforeUpdate修改不定数据,否则会引起死循环
* 监听data里的所有的数据,非updated莫属
7、beforeDestroy
* 实例卸载以前调用,可以清理非vue资源,防止内存泄露
8、destroyed
9、activated (使用频率较低) keep-alive 缓存组件时候调用
10、deactivated 缓存组件卸载的时候调用
11、watch: 监听特定值的变化,监听路由参数的变化,用函数的形式不能监听对象的变化(与updated对立)
](https://img-blog.csdnimg.cn/20190305170946803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDQ5MA==,size_16,color_FFFFFF,t_70)
更多推荐
所有评论(0)