简略了解区别 :
1.created 办法是在初始化页面之前对 dom 的操作。
2.mounted 办法是在初始化页面之后对 dom 的操作。
为什么要有这个辨别?
因为有些需要就是要在页面加载之后能力申请到的,比方 id,js 中用 document.getElementById(“xxx”)
一张表格来具体理解一下生命周期钩子函数
生命周期钩子 | 组件状态 | 最佳实际 |
---|---|---|
beforeCreate | 实例初始化之后,this 指向创立的实例,不能拜访到 data、computed、watch、methods 上的办法和数据 | 罕用于初始化非响应式变量 |
created | 实例创立实现,可拜访 data、computed、watch、methods 上的办法和数据, 未挂载到 DOM ,不能拜访到 $el 属性,$ref 属性内容为空数组 |
罕用于简略的 ajax 申请,页面的初始化 |
beforeMount | 在挂载开始之前被调用,beforeMount 之前,会找到对应的 template,并编译成 render 函数 | – |
mounted | 实例挂载到 DOM 上 ,此时能够通过 DOM API 获取到 DOM 节点,$ref 属性能够拜访 |
罕用于获取 VNode 信息和操作,ajax 申请 |
beforeupdate | 响应式数据更新时调用,产生在虚构 DOM 打补丁之前 | 适宜在更新之前拜访现有的 DOM,比方手动移除已增加的事件监听器 |
updated | 虚构 DOM 从新渲染和打补丁之后调用,组件 DOM 曾经更新,可执行依赖于 DOM 的操作 | 防止在这个钩子函数中操作数据,可能陷入死循环 |
beforeDestroy | 实例销毁之前调用。这一步,实例依然齐全可用,this 仍能获取到实例 | 罕用于销毁定时器、解绑全局事件、销毁插件对象等操作 |
destroyed | 实例销毁后调用,调用后,Vue 实例批示的所有货色都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 | – |