vue钩子函数

vue 钩子函数简单理解

---

在vue中，钩子函数是不需要手动调用就可以直接执行的。

以下是网上查询得到整个实例流程中钩子函数所触发的位置图：

其中钩子函数包含有几下8个：
beforeCreate、create、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

其中对各个钩子函数所表达的实际意思作出一下标注，并对1.0版本进行对比：

在页面首次加载执行顺序有如下：

1、初始化vue
beforeCreate

• //在实例初始化之后、创建之前执行

created

• //实例创建后执行

beforeMounted

• //在挂载开始之前调用

filters

• //挂载前加载过滤器

computed

• //计算属性

directives-bind

• //只调用一次，在指令第一次绑定到元素时调用

directives-inserted

• //被绑定元素插入父节点时调用

activated

• //keek-alive组件被激活时调用，则在keep-alive包裹的嵌套的子组件中触发

mounted

• //挂载完成后调用

2、渲染页面
{{}}

• //mustache表达式渲染页面

3、修改页面元素及内容时，自动调用的选项
watch

• //首先先监听到了改变事件
  filters
• //过滤器没有添加在该input元素上，但是也被调用了
  beforeUpdate
• //数据更新时调用，发生在虚拟dom打补丁前
  directived-update
• //指令所在的组件的vNode更新时调用，但可能发生在其子vNode更新前
  directives-componentUpdated
• //指令所在的组件的vNode及其子组件的vNode全部更新后调用
  updated
• //组件dom已经更新
• 该钩子函数触发方式为：只有事先设置好的data变量如下arrData改变并且要在页面重新渲染{{ arrData }}完成之后,才会进updated方法，光改变arrData但不渲染页面是不会进的。

4、组件销毁时，执行顺序如下

beforeDestroy

• //实例销毁之前调用

directives-unbind

• //指令与元素解绑时调用，只调用一次

deactivated

• //keep-alive组件停用时调用

destroyed

• //实例销毁之后调用

原文：https://blog.csdn.net/qq_38627581/article/details/79385556