资讯专栏INFORMATION COLUMN

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

gityuan / 2975人阅读

摘要:实例在文档中经常会使用这个变量名表示实例,在实例化时,需要传入一个选项对象,它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程,就是生命周期。

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结构:

{{ number }}

我们对 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()

在 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

官方示例中的生命周期钩子应用 一个极简的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异步数据并渲染到页面。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82117.html

相关文章

  • 详解vue生命周期

    摘要:注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: showImg(https://segmentfau...

    svtter 评论0 收藏0
  • 实例vue发生了什么?(详解vue生命周期)

    摘要:实例化发生了什么详解生命周期本文将对的生命周期进行详细的讲解让你了解一个实例的诞生都经历了什么我在上建立了一个存放笔记的仓库以后会陆续更新一些知识和项目中遇到的坑有兴趣的同学可以去看看哈欢迎传送门实例化一个这是一个方法触发钩子函数组件实例刚 实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Githu...

    pcChao 评论0 收藏0
  • vue入门笔记体系(二)vue生命周期

    摘要:此时还未有选项钩子函数和间的生命周期完成后,会有一个判断过程,判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。 vue生命周期 这是vue生命周期的图示具体内容:showImg(https://segmentfault.com/img/bV4xju?w=1200&...

    scola666 评论0 收藏0
  • 详解 mpvue 小程序框架 及和原生的差异

    摘要:在这一步,实例已完成以下的配置数据观测,属性和方法的运算,事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发 特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

    IamDLY 评论0 收藏0
  • Vue生命周期

    摘要:和下面手动调用在控制台中输入在这个阶段会销毁实例,生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期 为什么要认识Vue的生命周期 Vue的生命周期是一个非常重要的点,如果不懂Vue的生命周期,那么很多时候,就不知道Vue的实际渲染时机,程序中会出现各种bug。 因此,学习Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

    y1chuan 评论0 收藏0

发表评论

0条评论

gityuan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<