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

2024年3月13日 175次阅读 来源: koucxz

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

实例。官方API

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 实例。官方API

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的全部生命周期中，它供应了一些生命周期钩子，给了我们实行自定义逻辑的时机。

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

完全的代码托管在 codepen

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。官方API

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

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

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

什么时刻须要到Vue.nextTick()

  1. 在 Vue 生命周期的 created() 钩子函数举行的 DOM 操纵肯定要放在 Vue.nextTick() 的回调函数中。缘由是什么呢，缘由是
    在 created() 钩子函数实行的时刻 DOM 实在并未举行任何衬着，而此时举行 DOM 操纵无异于白费，所以此处肯定要将 DOM 操纵

的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数，由于该钩子函数实行时一切的 DOM 挂载和
衬着都已完成，此时在该钩子函数中举行任何DOM操纵都不会有题目 。

  1. 在数据变化后要实行的某个操纵，而这个操纵须要运用随数据转变而转变的 DOM 构造的时刻，这个操纵都应该放

进 Vue.nextTick() 的回调函数中。

生命周期小结

生命周期钩子的一些运用要领：

beforecreate : 可以在这加个loading事宜，在加载实例时触发
created : 初始化完成时的事宜写在这里，如在这完毕loading事宜，异步要求也相宜在这里挪用
mounted : 挂载元素，猎取到DOM节点
updated : 假如对数据一致处置惩罚，在这里写上响应函数
beforeDestroy : 可以做一个确认住手事宜的确认框
nextTick : 更新数据后马上操纵dom

官方示例中的生命周期钩子运用

一个极简的Markdown编辑器

运转这个例子须要marked组件，经由过程以下要领引入：
在项目目录下运转 npm i marked -S, js 文件中 import marked from 'marked' 即可。
这个例子没有用到生命周期钩子，简朴解读一下这段代码，

methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }

html 中 textarea 绑定了 @input = “update” ，要领顶用 debounce 指令设置了延时，在每次输
入后延时同步输入框的数据，减少了更新次数，进步机能。

GitHub 提交

这个例子从 Github 的 API 中猎取了最新的 Vue.js 提交数据，而且以列表情势将它们展现了出
来。你可以轻松地切换 master 和 dev 分支。

created: function () {
    this.fetchData()
  },

在 created 钩子顶用声明的 fetchData 函数猎取ajax异步数据并衬着到页面。

    原文作者：koucxz
    原文地址: https://segmentfault.com/a/1190000008771768
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞