Vue 实例以及生命周期

时间：2021-11-15 14:43:57

最简单的 Vue 实例

//html
<div id="app">
  {{message}}
</div>

//javascript
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

　　由于 Vue 借鉴了 MVVM 的思想，这里的字符串 "Hello Vue!" 就相当于 Model，DOM 就相当于 View，Vue 实例 "vm" 则是起连接 Mode 和 View 作用的 ViewModel，因此我们才得以通过数据驱动视图，而不需要关心它是怎么实现的，因为 Vue 已经帮我们做好了一切。

　　Vue 实例内置的属性和方法都是以 "$" 开头的，例如：vm.$data、vm.$el 等，另外选项并不等于实例，选项是通过 new Vue() 构造函数时传入的参数对象，但是实例可以从暴露的接口访问某些选项的值，例如：console.log(vm.$data.message) 输出 "Hello Vue!"。

实例的生命周期

　　在创建实例的过程中，Vue 提供了一些生命周期钩子函数，允许我们再某一特定阶段执行一些额外的操作：

beforeCreate：

在实例初始化之后，数据绑定之前会调用这个函数，例如：

//javascript
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log(this.message);  //undefind
  }
})

需要说明的有两点：1、这里的 "this" 指向 Vue 实例，即 "vm"，2、Vue 实例同时也代理了选项中 "data" 下的所有属性，也就是说 vm.message == vm.$data.message == "Hello Vue!"，但是因为在这个阶段数据并没有绑定到 Vun 实例上面，所以输出 "undefind"。在这之前数据会先保存在 vm.$options 中，如果要在这个阶段获取数据，可以先通过 vm.$options.data() 方法，返回 "data" 对象，通过 vm.$options.data().message 返回对应的值。

在这个阶段可以做一些不需要数据的工作，比如说开启全局 loading 效果。

created：

在实例创建完成，数据绑定之后会调用这个函数，此时 console.log(this.message) 输出正确的值 "Hello Vue!"。

在这个阶段，数据已经初始化为选项中的默认值，但是真实的数据还要通过 ajax 从后端数据库获取，因此这个阶段可以向后端发请求获取数据，然后绑定到对应属性上。

之后判断选项中有无 "el" 属性(作为 Vue 实例的挂载目标，在这里就是 id 为 app 的 div 标签)，如果没有，则需要手动调用 vm.$mount(el) 方法指定挂载的目标；

接着判断选项中有无 "template" 属性，如果没有，则直接使用 "el" 属性指定的挂载目标，如果有，那么就用 "template" 属性指定的字符串模板替换挂载目标，挂载目标中的所有内容将被忽略；

beforeMount：

在实例挂载之前调用。

在这个阶段可以移除全局 loading 效果。

mounted：

在实例挂载之后调用。

在这个阶段页面已经加载完毕，可以对 DOM 进行操作。

beforeUpdate：

在数据更新时调用。

在这个阶段可以在数据更新前访问现有的 DOM。

updated：

在数据更新之后调用。

在这个阶段可以对更新后的 DOM 进行操作。

beforeDestroy

在实例销毁之前调用

destroy

在实例销毁之后调用

标签：

相关文章