目录

Vue 实例

创建一个 Vue 实例

数据与方法

生命周期钩子

Vue 实例

创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的&＃xff1a;

var vm &＃61; new Vue({// 选项
})

Vue 实例和 Vue 应用是什么关系呢&＃xff1f;官方介绍&＃xff1a;一个 Vue 应用由一个通过new Vue()创建的根 Vue 实例&＃xff0c;以及可选的嵌套的、可复用的组件树组成。所以 Vue 实例是属于 Vue 应用的一部分&＃xff0c;与组件树组成了 Vue 应用&＃xff1a;

// 一个Vue应用&＃xff0c;由根实例&＃43;组件树组成
根实例
└─ 根组件 // 此行开始&＃xff0c;为组件树├─ 组件1│ ├─ 组件1-1│ └─ 组件1-2└─ 组件2├─ 组件2-1└─ 组件2-2

数据与方法

当一个 Vue 实例被创建时&＃xff0c;它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时&＃xff0c;视图将会产生“响应”&＃xff0c;即匹配更新为新的值。

当这些数据改变时&＃xff0c;视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property&＃xff0c;比如&＃xff1a;

vm.code &＃61; 0

那么对 code 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property&＃xff0c;但是一开始它为空或不存在&＃xff0c;那么你仅需要设置一些初始值。比如&＃xff1a;

var data &＃61; { msg: "hello vue", code: null }

这里唯一的例外是使用 Object.freeze()&＃xff0c;这会阻止修改现有的 property&＃xff0c;也意味着响应系统无法再追踪变化。

// 我们的数据对象var data &＃61; { msg: "hello vue", code: null }// 阻止修改现有的 propertyObject.freeze(data)// 该对象被加入到一个 Vue 实例中var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: data})

Vue 实例提供了非常丰富的选项&＃xff08;new Vue()时传入的选项&＃xff09;&＃xff0c;除了下面介绍的生命周期之外&＃xff0c;最常见的大概是这几个了&＃xff1a;

除了数据 property&＃xff0c;Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $&＃xff0c;以便与用户定义的 property 区分开来。

vm.$data; // 获取 data
vm.$props; // 获取 props
vm.$el; // 获取挂载元素
vm.$options; // 获取 Vue 实例的初始选项
vm.$parent; // 获取父实例
vm.$root; // 获取根实例
vm.$children; // 获取当前实例的直接子组件
vm.$refs; // 获取持有注册过 ref 特性 的所有 DOM 元素和组件实例vm.$watch; // 观察 Vue 实例变化的一个表达式或计算属性函数
vm.$set; // 向响应式对象中添加一个属性&＃xff0c;并确保这个新属性同样是响应式的&＃xff0c;且触发视图更新
vm.$delete; // 删除对象的属性。如果对象是响应式的&＃xff0c;确保删除能触发更新视图

更完整的选项内容和 API&＃xff0c;大家可以去官网查询。

生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如&＃xff0c;需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数&＃xff0c;这给了用户在不同阶段添加自己的代码的机会。

在 Vue 中要渲染一块页面内容的时候&＃xff0c;会有这么几个过程&＃xff1a;

&＃xff08;1) 解析语法生成 AST。

&＃xff08;2) 根据 AST 结果&＃xff0c;完成 data 数据初始化。

&＃xff08;3) 根据 AST 结果和 data 数据绑定情况&＃xff0c;生成虚拟 DOM。

&＃xff08;4) 将虚拟 DOM 生成真正的 DOM 插入到页面中&＃xff0c;此时页面会被渲染。

当我们绑定的数据进行更新的时候&＃xff0c;又会产生以下这些过程&＃xff1a;

(5) 框架接收到数据变更的事件&＃xff0c;根据数据生成新的虚拟 DOM 树。比较新旧两棵虚拟 DOM 树&＃xff0c;得到差异。

(6) 把差异应用到真正的 DOM 树上&＃xff0c;即根据差异来更新页面内容。

当我们清空页面内容时&＃xff0c;还有&＃xff1a;

(7) 注销实例&＃xff0c;清空页面内容&＃xff0c;移除绑定事件、监听器等。

Vue 生命周期说明

官方的生命周期图如下&＃xff1a;

 生命周期钩子的使用方式也很简单&＃xff0c;我们可以根据需要在特定的生命周期钩子里进行一些处理&＃xff1a;

// 我们的数据对象var data &＃61; { msg: "hello vue", code: null }// Object.freeze(data)// 该对象被加入到一个 Vue 实例中var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: data,beforeCreate: function() {// 在实例初始化之后&＃xff0c;数据观测 (data observer) 和 event/watcher 事件配置之前被调用console.log("beforeCreate", this.msg, this.$el);},created: function() {// 在实例创建完成后被立即调用// 在这一步&＃xff0c;实例已完成以下的配置&＃xff1a;数据观测 (data observer)&＃xff0c;属性和方法的运算&＃xff0c;watch/event 事件回调// 挂载阶段还没开始&＃xff0c;$el 属性目前不可见console.log("created", this.msg, this.$el);},beforeMount: function() {// 在挂载开始之前被调用&＃xff1a;相关的 render 函数首次被调用console.log("beforeMount", this.msg, this.$el);},mounted: function() {// el 被新创建的 vm.$el 替换&＃xff0c;并挂载到实例上去之后调用该钩子// 如果 root 实例挂载了一个文档内元素&＃xff0c;当 mounted 被调用时 vm.$el 也在文档内// mounted 不会承诺所有的子组件也都一起被挂载// 如果希望等到整个视图都渲染完毕&＃xff0c;可以用 vm.$nextTick 替换掉 mountedconsole.log("mounted", this.msg, this.$el);this.$nextTick(function() {// 此处整个视图已渲染完毕});},beforeUpdate: function() {// 数据更新时调用&＃xff0c;发生在虚拟 DOM 打补丁之前// 这里适合在更新之前访问现有的 DOM&＃xff0c;比如手动移除已添加的事件监听器},updated: function() {// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁&＃xff0c;在这之后会调用该钩子// 当这个钩子被调用时&＃xff0c;组件 DOM 已经更新&＃xff0c;所以你现在可以执行依赖于 DOM 的操作},beforeDestroy: function() {// 实例销毁之前调用。在这一步&＃xff0c;实例仍然完全可用},destroyed: function() {// Vue 实例销毁后调用// 调用后&＃xff0c;Vue 实例指示的所有东西都会解绑定&＃xff0c;所有的事件监听器会被移除&＃xff0c;所有的子实例也会被销毁}})

页面中我们可以看到输出结果&＃xff0c;验证了几个生命周期的data、DOM 挂载等情况&＃xff1a;