![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)

Logo

前往低代码交流专区

更多推荐