简略了解区别 :
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 实例批示的所有货色都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 | - |