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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue