vue钩子函数

vue 钩子函数简单理解


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

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

其中钩子函数包含有几下8个:
beforeCreatecreatebeforeMountmountedbeforeUpdateupdatebeforeDestroydestroyed
vue钩子函数
其中对各个钩子函数所表达的实际意思作出一下标注,并对1.0版本进行对比:
vue钩子函数

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

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已经更新

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

beforeDestroy

  • //实例销毁之前调用

directives-unbind

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

deactivated

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

destroyed

  • //实例销毁之后调用

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