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

Ashin 发布于2019-08-23 12:10 / 1515人阅读

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

理解与认识 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 另一个知识点模版了。


    Hello {{name}}

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

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

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

实例的属性、方法与 API

除了上面我们所说的数据的属性以外，Vue 给我们暴露了很多的实例与方法，例如：「$data」、「$el」、「$watch」、「$refs」、「$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 也在文档内。

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、生命周期钩子函数等，让实例产生我们想要的行为。

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

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

关注微信公众号：六小登登。领取全套学习资源

GPU云服务器云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

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

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

vue入门笔记体系（二）vue生命周期

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

scola666 2019-08-23 10:30 评论0 收藏0
(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
Vue2.5笔记：Vue中的模版

摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。模...

shevy 2019-08-23 12:11 评论0 收藏0
实例化vue发生了什么?(详解vue生命周期)

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

pcChao 2019-08-22 13:49 评论0 收藏0
再谈Vue的生命周期----结合Vue源码

摘要：中的生命周期函数也可以称之为生命周期钩子函数，在特定的时期，调用特定的函数。吊起钩子函数调起钩子函数问题为什么是一个数组卸载组件，会触发一个这行代码之后发生了什么背后实现原理。简介关于Vue的生命周期函数，目前网上有许多介绍文章，但也都只是分析了表象。这篇文档，将结合Vue源码分析，为什么会有这样的表象。 Vue中的生命周期函数也可以称之为生命周期钩子（hook）函数，在特定的时期...

KavenFan 2019-08-23 12:16 评论0 收藏0