Vue生命周期钩子函数以及实例上的属性和方法简单总结

前端小白简单总结，还望各位大佬多多指教~

Vue生命周期钩子函数

大致分为三个阶段：

1、初始化阶段：

• beforeCreate（组件创建前）：data和methods中的数据还未被初始化 —— 一般用不到

• created（组件创建结束）：data和methods中的数据已经完成初始化 —— 获取ajax，初始化操作

• beforeMount（组件挂载前）：模板编译完成，但还未渲染挂载到页面

• mounted（组件挂载结束）：真实dom渲染完成，挂载到页面，可以操作dom了

2、运行阶段：

触发条件：当数据发生变化时

• beforeUpdate（页面更新前）：数据已更新，页面中的数据还未更新 —— 一般用watch来替换

• updated（页面更新结束）：页面也完成更新，和数据保持一致

3、销毁阶段：

触发条件：当组件销毁时

• beforeDestroy（组件销毁前）：data、methods、指令、过滤器等都还可以正常使用，未执行销毁

• destroyed（组件销毁结束）：data、methods、指令、过滤器等都已经不可用

图片来自黑马前端教程

vm实例上的属性和方法

• this.$data：vm上的数据
• this.$watch：监控
• this.$el：当前el元素
• this.$set：后加的属性实现响应式变化
• this.$option：vm上的所有属性
• this.$refs:$