0x1 精读Vue官方文档之基础 – Vue 实例

精读 Vue 官方文档系列 ?

创建实例

const vm = new Vue({...})
复制代码

所有 Vue 组件都是 Vue 的实例，通过 new Vue() 创建的实例则是 Vue 的“根实例”。

实例的属性、数据与方法

数据

只有在创建实例时为 data 对象添加的成员才会被加入到 Vue 的响应式系统中，成为响应式的值。

响应式的值一旦发生改变就会触发视图的重新渲染。

这些响应式的值，可以通过 vm[propertyName] 的格式进行访问与修改。

let data = {n:'a'};
const vm = new Vue({data});

vm.a; //'a'
vm.a = 'b',console.log(data.a); // 'b';
复制代码

以下几种情况为实例的 data 属性新增成员并不会被 Vue 转换成响应式变量：

1. Vue 实例创建之后动态向 data 属性加入的成员属性。
2. 被 Object.freeze() 冻结的成员属性。

属性与方法

除了通过 Vue实例对象来直接访问 data 对象中定义的响应式数据之外，Vue 的实例还暴露了一些其它有用的“属性”与“方法”。

这些方法与属性的名称都是以 $ 作为前缀，以便与用户自定义的 property 区分开来。

*vm.$data : 获取响应式系统中的响应式数据。
*vm.$props : 当前组件实例所接收到的 props 对象。
*vm.$el : Vue 实例使用的根 DOM 元素。
*vm.$watch : 观察Vue实例上的一个表达式或函数计算结果的变化。

vm.$watch 只能监控前实例上的响应式数据。

生命周期

“生命周期”是每个 Vue 实例在创建后进行初始化过程的不同阶段。例如：数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

“生命周期钩子”便是在初始化过程中不同阶段提供回调的函数，这给用户在不同阶段添加自己代码的机会。

需要注意的是生命周期函数不能使用箭头函数，以免无法正确获取上下文对象。

created

在 created 生命周期之前，Vue 实例已经经历过了”创建(new Vue())” -> “初始化事件与生命周期(Life Cycle)” -> “beforeCreate” -> “初始化依赖注入与响应式数据”。

created 生命周期的特点在于以下几点：

1.在实例创建完成后被立即调用，调用时机只比 beforeCreated 晚，但也很早了。
2.可以使用响应式数据。
3.可以获得特性比较完整的 Vue 实例，例如在 beforeCreate 生命周期中无法使用事件与响应式数据。
4.挂载阶段还没开始，所以 $el 属性目前尚不可用。

beforeMount

在挂载开始之前调用，相关的 render 函数首次被调用，开始生成虚拟DOM。
vm.$el 依然是创建实例时传入的DOM，例如通常是 #app。

mounted

实例被挂载后调用。这时 el 被新创建的 vm.$el 替换(通常是 App.vue 中的根元素)。

当此生命钩子触发，DOM 也已经挂载到文档中了。

mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

new Vue({
    mounted(){
        this.$nextTick(function(){
            //.....
        });
    }
})
复制代码

beforeUpdate

当数据更新时调用。发生在虚拟DOM打补丁之前。
这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

updated

该生命周期钩子被调用时，说明由数据更改导致虚拟 DOM 重新渲染和打补丁的操作已经完成，组件新的 DOM 已经完成更新，可以执行依赖于 DOM 的操作。

然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

destroyed

当组件与其所有子组件的实例被销毁后调用。与 beforeDestory 的不同在于 beforeDestory 中还可以获取组件实例。

生命周期图示

下面是官方提供的 Vue 实例生命周期流程图：