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

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

Vue 实例

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

Vue 实例化的选项

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

data

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

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

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

computed

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

实例。

var vm = new Vue({
 data: { a: 1 },
 computed: {
 // 仅读取，值只须为函数
 aDouble: function () {
  return this.a * 2
 },
 // 读取和设置
 aPlus: {
  get: function () {
  return this.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 实例。

var vm = new Vue({
 data: { a: 1 },
 methods: {
 plus: function () {
  this.a++
 }
 }
})
vm.plus()
vm.a // 2

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

var vm = new Vue({
 el: '#example',
 data: {
 message: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
 }
 }
})

watch

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

var vm = new Vue({
 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结构：

<div id="app">
 <p>{{ number }}</p>
 <input type="text" name="btnSetNumber" v-model="number">
</div>

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

var app = new Vue({   
 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() 的回调函数中。

生命周期小结

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

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

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

# vue生命周期钩子  # 生命周期钩子  # vue生命钩子  # 聊聊vue生命周期钩子函数有哪些  # 分别什么时候触发  # Vue3生命周期钩子函数详解  # 深入理解Vue父子组件生命周期执行顺序及钩子函数  # 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)  # Vue 2.0中生命周期与钩子函数的一些理解  # Vue3中watch监听器及源码学习  # Vue3中使用监听器的具体实践  # Vue3.0监听器watch与watchEffect详解  # Vue 3中常用的生命周期钩子和监听器的操作方法  # 回调  # 的是  # 绑定  # 在这里  # 在这  # 将被  # 递归  # 这是  # 加载  # 几个  # 是在  # 还没有  # 会有  # 放在  # 都不  # 让我们  # 也就  # 多个  # 将会  # 这就是 

相关文章： 广东企业建站网站优化与SEO营销核心策略指南  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  ,想在网上投简历，哪几个网站比较好？  c# await 一个已经完成的Task会发生什么  建站10G流量真的够用吗？如何应对访问高峰？  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  h5在线制作网站电脑版下载,h5网页制作软件？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何制作一个表白网站视频,关于勇敢表白的小标题？  内部网站制作流程,如何建立公司内部网站？  招贴海报怎么做,什么是海报招贴？  上海网站制作开发公司,上海买房比较好的网站有哪些？  网站设计制作企业有哪些,抖音官网主页怎么设置？  制作网站建设的公司有哪些,网站建设比较好的公司都有哪些？  建站之星安装后如何配置SEO及设计样式？  TestNG的testng.xml配置文件怎么写  C++用Dijkstra(迪杰斯特拉)算法求最短路径  建站主机是否属于云主机类型？  建站之星×万网：智能建站系统+自助建站平台一键生成  如何选择最佳自助建站系统？快速指南解析优劣  如何通过WDCP绑定主域名及创建子域名站点？  网站制作新手教程,新手建设一个网站需要注意些什么？  浅谈Javascript中的Label语句  如何通过商城免费建站系统源码自定义网站主题？  C#如何在一个XML文件中查找并替换文本内容  西安大型网站制作公司,西安招聘网站最好的是哪个？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  营销式网站制作方案,销售哪个网站招聘效果最好？  北京的网站制作公司有哪些,哪个视频网站最好？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  如何在IIS中新建站点并配置端口与IP地址？  ,购物网站怎么盈利呢？  建站主机选择指南：服务器配置与SEO优化实战技巧  建站中国官网：模板定制+SEO优化+建站流程一站式指南  如何在云主机上快速搭建多站点网站？  攀枝花网站建设,攀枝花营业执照网上怎么年审？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  动图在线制作网站有哪些,滑动动图图集怎么做？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  如何获取上海专业网站定制建站电话？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  如何选择PHP开源工具快速搭建网站？  如何快速打造个性化非模板自助建站？  ,石家庄四十八中学官网？  建站之星各版本价格是多少？  建站之星与建站宝盒如何选择最佳方案？  建站之星如何实现PC+手机+微信网站五合一建站？