专栏首页Modeng的专栏Vue2.5笔记:Vue的实例与生命周期

Vue2.5笔记:Vue的实例与生命周期

理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作。

首先 Vue 没有完全遵守 MVVM 的架构模式,但是它的设计也受到了该模式的启发,Vue 也就是在该模式中起到 VM(ViewModel) 的作用。如果有对 MVC、MVVM 模式不了解的同学可以参考阮一峰老师的 《MVC,MVP 和 MVVM 的图示》 这篇文章可以对它们有一个简单对了解。

Vue 的实例从创建到使用以及销毁的过程中会有多个生命周期钩子,这些钩子在我们整个的实例过程中起到了非常重要,而且有了这些钩子我们可以很好的去控制我们的整个过程的逻辑。

Vue 借鉴了 MVVM 架构模式,Vue 在整个过程中起到的就是 VM 的作用,如果我们对 MVVM 有过了解,V 即 View( 视图层)就是我们看到的模版HTML,M 即 Model(数据层)就是我们想要显示出来的数据,Vue 就是负责把 View-Model 连接起来。

创建Vue实例

每个 Vue 实例都是通过 Vue 函数来创建的,在 Vue 中的每一个应用都是会创建一个实例,组件也是一个实例。

当创建一个 vue 实例的时候,我们可以传入一个选项对象,如data、el、methods、生命周期钩子函数等等。

var vm = new Vue({
  el: '#root',
  data: {
    name: 'Modeng'
  },
  methods: {
    handleClick () {
        console.log(123);
    }
  }
})

从上面的图片我们看到我们的实例已经挂在到 DOM 元素上,数据和方法都已经拥有。最后我们就是要把这些数据怎么显示到我们到眼前,这里就需要用到 Vue 另一个知识点 模版了。

<div id="root">
    <div>Hello {{name}}</div>
</div>

我们只需要使用 模版的 {{}} 语法将我们的数据绑定到视图上就能显示我们要的结果。

如果你以为仅仅是这么简单那你就太年轻了,我们也就没有使用 Vue 的必要了,当我们创建一个实例时,Vue 会把视图与数据进行连接,当我们修改数据时,视图会自动更新。

有一点值得我们注意的是,我们在使用 Vue 实例时,需要关注下 this,千万不要在含有 this 的函数时,使用箭头函数,因为箭头函数是没有绑定 this 的,所以会出现问题。

实例的属性、方法与 API

除了上面我们所说的数据的属性以外,Vue 给我们暴露了很多的实例与方法,例如: 「data」、「data」、「data」、「el」、「watch」、「watch」、「watch」、「refs」、「watch」、「watch」、「watch」、「mount」等等,如果你对等多的实例属性与方法感兴趣可以移至API 参考,不过后面我们也会介绍一些常用的方法和属性 watch、methods、refs等

Vue 实例不尽带了很多等实例方法与属性,还自带了很多 API 其中全局的有 11 个,全局配置的有 9个,如果想查看也是在上面的链接中。

生命周期构子

Vue 实例会有一个完整的生命周期,从实例的初始化,设置数据、编译模板、将实例挂载到 DOM 更新数据,销毁等一系列的过程,称为生命周期,在不同的过程中会自动执行一些函数,我们称为生命周期钩子函数。Vue 给了我们很多 生命周期函数,我们可以在整个生命周期的不同过程中使用它。

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

  • beforeCreate: 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,「$el」 属性目前不可见。
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted:el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
  • activated:keep-alive 组件激活时调用。
  • deactivated:keep-alive 组件停用时调用。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  • errorCaptured:2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
var vm = new Vue({
  el: "#root",
  data: {
    name: "Modeng",
  },
  beforeCreate() {
    console.log("实例初始化");
    console.log("beforeCreate");
    console.log("------------------");
  },
  created() {
    console.log("实例创建完成");
    console.log("created");
    console.log("------------------");
  },
  beforeMount () {
    console.log("实例挂载DOM之前");
    console.log("beforeMount");
    console.log("------------------");
  },
  mounted () {
    console.log("实例挂载DOM完成");
    console.log("mounted");
    console.log("------------------");
  },
  beforeUpdate () {
    console.log("实例的数据更新之前");
    console.log("beforeUpdate");
    console.log("------------------");
  },
  updated () {
    console.log("实例的数据更新完成,DOM更新");
    console.log("updated");
    console.log("------------------");
  },
  beforeDestroy () {
    console.log("实例销毁之前");
    console.log("beforeDestory");
    console.log("------------------");
  },
  destroyed () {
    console.log("实例销毁完成");
    console.log("destoryed");
    console.log("------------------");
  }
});

我们可以看到从实例开始创建到渲染挂载到 DOM 结束后,会执行的钩子函数,下面我们来尝试进行数据的更新与销毁实例看看钩子是怎么执行的。

总结

这边文章主要是介绍了下 Vue 的实例与生命周期,在Vue 实例化的过程中我们可以添加许多可选对象,比如 data、methods、生命周期钩子函数等,让实例产生我们想要的行为。

实例创建完成之后,我们就可以让它与视图同步,只要我修改数据视图会自动跟着同步。

在实例的创建过程中会存在许多的生命周期钩子函数,它会在我们实例的不同阶段产生不同的效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 简史

    「 JavaScript 」 诞生于 1995年,当时主要是用于处理由服务器负责的一些输入验证操作。

    六小登登
  • 聊一聊Vue组件模版,你知道它有几种定义方式吗?

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

    六小登登
  • Mac安装Python3.7

    Python 目前有两个版本一个是 Python2,一个是Python3,当然我们在学习一门技术的时候,应该是开始学习比较新的,而且官方也是推荐大家使用Pyht...

    六小登登
  • KNN(k-nearest neighbor的缩写)原理及使用

    如果一个实例在特征空间中的K个最相似(即特征空间中最近邻)的实例中的大多数属于某一个类别,则该实例也属于这个类别。所选择的邻居都是已经正确分类的实例

    用户5745385
  • 腾讯云 CVM 实例类型

    腾讯云提供不同的实例类型来满足用户特定的使用场景。这些实例类型由 CPU、内存、存储和网络组成不同的组合。您需要根据将要运行在实例上的程序或者软件的要求,来选择...

    勤劳的小蜜蜂
  • 云服务器 CVM

    https://cloud.tencent.com/redirect.php?redirect=1014&cps_key=6f5f5aedea72d213ca3...

    勤劳的小蜜蜂
  • 类 对象 实例的区别

    对象是new 过的类 (包含 可以实例化的 和不能实例化的 ,比如抽象类就不能实例化)

    lilugirl
  • 腾讯云推出竞价实例 云服务器开销最高下降90%

    伴随着数字化技术的广泛应用,企业业务上云成为大势所趋,企业在服务器等方面的IT成本得以大幅下降。但是追求性价比之路永无止境,企业的长久发展依赖成本的长期优化,对...

    尊托云数
  • C# 程序开发:设计模式之单例模式

    1、定义:单例模式就是保证在整个应用程序的生命周期中,在任何时刻,被指定的类只有一个实例,并为客户程序提供一个获取该实例的全局访问点。

    用户4831957
  • 注册中心 Eureka 源码解析 —— 应用实例注册发现(八)之覆盖状态

    这里要注意下,不是应用实例的状态( status ),而是覆盖状态( overridestatus ) 。代码如下:

    芋道源码

扫码关注云+社区

领取腾讯云代金券