生命周期及使用场景

生命周期及使用场景

完整周期图

beforeCreate

在实例初始化之后，props 解析之后、数据观测(data()、computed observer)和事件配置之前被调用。在这个阶段，实例的属性和方法还没有被初始化。

这个阶段的应用场景包括：进行插件和扩展的开发、进行全局事件的订阅和注册、进行全局的网络请求拦截等。

• 在实例加载时触发loading事件
• 在loading时进行渲染
• 初始化数据
• 调用不会操作组件数据的API

created

在实例创建完成之后被立即调用。在这个阶段，实例已经完成了数据观测(data observer)、属性和方法的运算、watch/event事件回调等配置。但是$el属性并没有被创建，因此在这个阶段是不能进行DOM操作的。

这个阶段的应用场景包括：进行数据初始化、进行ajax请求获取数据等

• 通常用于初始化某些属性值，例如data中的数据，然后再渲染成视图。
• 可以在这个阶段发送数据的请求、初始化一些属性值等操作。

beforeMount

在挂载开始之前被调用，即在render函数首次被调用之前。在这个阶段，模板(template)已经编译完成，但是还没有被渲染成html。

这个阶段的应用场景包括：进行组件的初始化、进行组件的预处理等。

• 在这个钩子函数中可以进行一些初始化的操作，例如读取数据、计算属性等。此时，Vue实例已经完成了数据观测和属性、方法的运算，但是还没有将模板渲染成真实的DOM节点。
• 在这个钩子函数中也可以进行一些DOM操作，例如获取DOM元素、绑定事件等。此时，虚拟DOM已经生成，但是还没有被渲染到真实的DOM节点上。

mounted

实例挂载之后调用，即模板(template)已经被渲染成html并放到页面中。在这个阶段，实例的$el属性已经指向了真正的DOM元素，可以进行DOM操作。这个阶段的应用场景包括：进行DOM操作、进行组件的渲染等

• 在组件的 HTML 节点上执行 DOM 操作
• 初始化需要访问 DOM 的第三方库
• 启动需要访问 DOM 的动画或计时器
• 在组件的 HTML 节点上注册事件侦听器
• 发送 HTTP 请求以获取组件随后将显示的数据

beforeUpdate

在数据更新之前被调用，即在响应式数据发生改变时，虚拟DOM重新渲染之前被调用。

在这个阶段，实例的数据已经更新，但是DOM并没有被重新渲染。这个阶段的应用场景包括：进行数据更新、进行数据的预处理等。

updated

在数据更新之后被调用，即响应式数据发生改变，虚拟DOM重新渲染并应用到真正的DOM后被调用。

在这个阶段，实例的数据已经更新，DOM也已经被重新渲染。这个阶段的应用场景包括：进行DOM操作、进行数据的后处理等。

beforeDestroy

在实例销毁之前调用。在这个阶段，实例仍然完全可用，可以进行一些清理工作。

这个阶段的应用场景包括：进行资源的释放、取消事件的订阅等。

destroyed

在实例销毁之后调用。在这个阶段，实例和DOM已经完全分离，无法访问实例的属性和方法。

这个阶段的应用场景包括：进行资源的释放、取消事件的订阅等

methods(非钩子)对象

methods属性是用于在Vue组件中定义方法的对象属性。这些方法可以在组件内部使用，也可以在组件模板中使用。它们不是钩子函数，而是普通的函数。

• 定义事件响应函数

• 定义组件公共处理函数
  方法可以在组件内部使用，也可以在组件模板中使用。它们不是钩子函数，而是普通的函数。

• 定义事件响应函数

• 定义组件公共处理函数

• 表示一个具体的操作，主要书写业务逻辑