【Vue.js基础教程】第2章 - Vue 实例与生命周期

Vue.js基础教程：第2章 - Vue 实例

欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中

标签：#Vue #前端开发 #Vue教程 #JavaScript #响应式编程

在这里插入图片描述

引言

有一次在面试中，我被问到：“如何用 Vue 创建一个待办事项应用？”当时我有点紧张，虽然知道用 Vue 是新建实例，但是要讲清楚其中的原理，突然就卡壳了。回家后，我决定好好研究一下 Vue 实例的基础知识，顺便写成这篇教程，分享给大家，希望你们看完不会像我当初那样尴尬！

什么是 Vue 实例？

每个 Vue 应用都是从一个 Vue 实例开始的。这就好比盖房子，Vue 实例是地基，有了它，整个应用才能稳固构建。

var vm = new Vue({
  // 选项
})

虽然 Vue 并没有完全遵循 MVVM 模型，但其设计灵感确实来自 MVVM。这就是为什么你经常会看到开发者用 vm（ViewModel 的缩写）作为 Vue 实例的变量名。

Vue 实例与组件的关系

一个 Vue 应用包含一个根实例，以及嵌套的组件树。例如，一个待办事项应用可能的结构如下：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

记住：每个组件本质上也是一个 Vue 实例。

数据与方法：响应式的魔力

Vue 的核心在于响应式系统。当数据发生变化时，视图会自动更新。这种“魔法”是如何实现的呢？来看一个例子：

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // true
vm.a = 2
console.log(data.a) // 2

注意事项

响应式的限制：只有实例创建时 data 中声明的属性是响应式的。

vm.b = 'hi' // 不会触发视图更新

解决方法：在初始化时声明 b。

data: { b: '' }

使用 Object.freeze：

var obj = { foo: 'bar' }
Object.freeze(obj)
new Vue({
  data: obj
})

冻结对象后，响应式系统将无法追踪其变化。

Vue 实例的生命周期

创建一个 Vue 实例并不是简单的“new 一下”就完事了，它需要经历一系列的初始化步骤，比如：

• 数据监听
• 编译模板
• 挂载 DOM
• 响应数据变化

生命周期钩子

在实例初始化的不同阶段，Vue 提供了钩子函数，允许你插入代码。例如：

new Vue({
  data: { a: 1 },
  created() {
    console.log('a is: ' + this.a)
  }
})

常用的生命周期钩子包括：

• created：实例创建完成后调用。
• mounted：实例挂载完成后调用。
• updated：数据更新后调用。
• destroyed：实例销毁后调用。

注意事项

不要使用箭头函数定义钩子：

created: () => console.log(this.a) // 错误，this 指向不正确

Vue 生命周期的图示

虽然刚开始学习时不必完全掌握，但这张图会是你日后开发中的宝藏：

在这里插入图片描述

总结

学习 Vue 实例是入门 Vue.js 的第一步。掌握它的初始化方式、数据绑定原理，以及生命周期钩子函数的使用，将为你构建复杂的 Vue 应用打下坚实基础。

所以，下一次面试官再问你如何用 Vue 开发一个待办事项应用，你就可以自信地回答了，不仅能说怎么做，还能讲明白其中的逻辑！