共计 758 个字符，预计需要花费 2 分钟才能阅读完成。
简略了解区别 :
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 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁 | – |
正文完