生命周期部分概述

目录

beforeCreate（创建前）

created（创建后）

beforeMount（载入前）

mounted（载入后）

beforeUpdate（更新前）

updated（更新后）

beforeDestroy（销毁前）

Destroy（销毁后)

V-modle指令

---

 

beforeCreate（创建前）

在组件实例初始化完成之后立即调用。

 详细信息

     在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子    在服务器端渲染期间不被调用。在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

• created（创建后）

  在组件实例处理完所有与状态相关的选项后调用。

• 详细信息

  当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

• beforeMount（载入前）

  在组件被挂载之前调用

• 详细信息

  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

• mounted（载入后）

  在组件被挂载之后调用。

• 详细信息

  组件在以下情况下被视为已挂载：

  这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)

• beforeUpdate（更新前）

  在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

• 详细信息

  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

• updated（更新后）

• 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

• 详细信息

  父组件的更新钩子将在其子组件的更新钩子之后调用。这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

• beforeDestroy（销毁前）

• 在组件销毁前调用

• 详细信息

• 在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事

• Destroy（销毁后)

• 在组件销毁后调用

• 详细信息

• 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

• V-modle指令

• v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
• v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。 在view层，model层相互需要数据交互，即可使用v-model。 v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。