vue生命周期以及执行顺序
前言:Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期created官方定义:实例创建完成后被立即调用,在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载...
前言:
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期
created
官方定义:
实例创建完成后被立即调用,在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见
个人理解:
模板渲染成html前调用,此时模板还没有被渲染成html,这时候通过id去查找页面元素是找不到的。通常用于初始化某些属性值,然后再渲染成视图。
用法:通常用于初始化数据。
computed
官方定义:
计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
个人理解:
在HTML DOM加载后马上执行的,比如赋值,比created更早执行。
注意:
计算属性也是属性,不能传参数
watch
官方定义:
用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项
个人理解:
是一种更通用的方式来观察和响应 Vue 实例上的数据变动,Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性
mounted
官方定义:
在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
个人理解:
vue模板已经渲染完毕,Dom操作一般是在mounted钩子函数中进行,document.getElementById(“name”).innerHtml 可以获取到,mounted 是指挂载完成,DOM结构加载完毕,一般要是执行ajax操作就是在这里
methods
官方定义:
将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例
个人理解:
必须要有一定的触发条件才能执行,如点击事件
默认加载顺序
computed–>created–>mounted–>watch,不执行methods
触发某一事件后
methods–>watch
更多推荐
所有评论(0)