详解Vue 实例中的生命周期钩子

2024-02-27 04:18:05 140

Vue框架的入口就是Vue实例，其实就是框架中的viewmodel，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

Vue实例

在文档中经常会使用vm这个变量名表示Vue实例，在实例化Vue时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

Vue实例化的选项

需要注意的是含this的函数大多不要使用箭头函数，因为我们期望this指向Vue实例。

data

Vue实例的数据都保存在data对象中，Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。

vardata={a:1}
//直接创建一个实例
varvm=newVue({
data:data
})
vm.a//->1
vm.$data===data//->true

这样数据就绑定在HTML中，Vue框架监视data的数据变化，自动更新HTML内容。

computed

计算属性将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue

实例。

varvm=newVue({
data:{a:1},
computed:{
//仅读取，值只须为函数
aDouble:function(){
returnthis.a*2
},
//读取和设置
aPlus:{
get:function(){
returnthis.a+1
},
set:function(v){
this.a=v-1
}
}
}
})
vm.aPlus//->2
vm.aPlus=3
vm.a//->2
vm.aDouble//->4

这里可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。

methods

methods将被混入到Vue实例中。可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

varvm=newVue({
data:{a:1},
methods:{
plus:function(){
this.a++
}
}
})
vm.plus()
vm.a//2

看下面这个例子，methods和computed看起来可以做同样的事情，单纯看结果两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method调用总会执行该函数。

varvm=newVue({
el:'#example',
data:{
message:'Hello'
},
computed:{
//acomputedgetter
reversedMessage:function(){
//`this`pointstothevminstance
returnthis.message.split('').reverse().join('')
}
}
})

watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。

varvm=newVue({
data:{
a:1,
b:2,
c:3
},
watch:{
//监控a变量变化的时候，自动执行此函数
a:function(val,oldVal){
console.log('new:%s,old:%s',val,oldVal)
},
//深度watcher
c:{
handler:function(val,oldVal){/*...*/},
deep:true
}
}
})
vm.a=2//->new:2,old:1

Vue实例的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。

接下来我们用几个例子来看看生命周期钩子是怎么用的：

HTML结构：


{{number}}

我们对input和p绑定了data对象的number数据，Vue实例构建如下：

varapp=newVue({
el:'#app',
data:{
number:1
}
})

在实例中分别在每个生命周期钩子中console.log('钩子名称',this.number)我们发现，第一次页面加载时触发了beforeCreate,created,beforeMount,mounted这几个钩子，data数据在created中可获取到。

再去console.log('mounted:',document.getElementsByTagName('p')[0])，DOM渲染在mounted中已经
完成。

我们再试着去更改input输入框中的内容，可以看到输入框上方的数据同步发生改变，这就是数据绑定的效果，在更新数据时触发beforeUpdate和updated钩子，且在beforeUpdate触发时，数据已更新完毕。

而destroy仅在调用app.$destroy();时触发，对vue实例进行销毁。销毁完成后，我们再重新改变number的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

Vue.nextTick

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

Vue.nextTick(function(){
//DOM更新了
})

官方还提供了一种写法，vm.$nextTick，用this自动绑定到调用它的实例上

created(){
setTimeout(()=>{
this.number=100
this.$nextTick(()=>{
console.log('nextTick',document.getElementsByTagName('p')[0])
})
},100)
}

什么时候需要用的Vue.nextTick()

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

生命周期小结

生命周期钩子的一些使用方法：

beforecreate:可以在这加个loading事件，在加载实例时触发
created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted:挂载元素，获取到DOM节点
updated:如果对数据统一处理，在这里写上相应函数
beforeDestroy:可以做一个确认停止事件的确认框
nextTick:更新数据后立即操作dom

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解Vue 实例中的生命周期钩子

热门推荐

随机推荐