Vue实例笔记当vue实例被创建的时候，将data对象中的所有属性加入到vue的响应式系统中。当这些属性的值发生变化的

一、数据响应式

当vue实例被创建的时候，将data对象中的所有属性加入到vue的响应式系统中。当这些属性的值发生变化的时候，视图会产生响应。也就是所谓的数据驱动。

如果属性没有存在于data中，那么数据就不是响应式的。它的改变不会触发视图的更新。

data中的数据都是需要设置一些初始值的。

var vm = new Vue({
    data:{
        num: 0,
        str: '',
        arr: [],
        obj: null,
        boolean: false
    }
})

唯一例外的地方就是使用Object.freeze(),会阻止修改现有的属性，使其相应系统无法再追踪变化。对于纯展示的大数据，都可以使用Object.freeze提升性能。 Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉。举个栗子

<p v-for="item in list">{{item.value}}</p>
new Vue({
    data: {
        list: Object.freeze([
            {value: 1},
            {value: 2}
        ])
    },
    mounted(){
        // 界面不会有响应
        this.list[0].value= 10
        // 下面两种做法，界面都会有响应
        this.list = [
            {value: 10},
            {value: 20}
        ]
        this.list = Object.freeze([
            {value: 10},
            {value: 20}
        ])
    }
})

注意： this的指向问题在vue中不要在选项属性或者回调函数中使用箭头函数。因为箭头函数没有this，this会作为变量一直向上级词法作用域查找。例如： created:()=>{console.log(this.a)} vm.$watch('a',newVal => this.method() )

二、生命周期

还是得先上图

1、beforeCreate到created之间，初始化事件、初始化注入、校验、created的时候数据已经和data进行绑定了。但此时尚未挂载在dom上，el还不可用

2、created和beforeMounte之间，在这个阶段，首先判断对象是否有el选项，如果有向下继续编译，如果没有停止编译,也就停止了生命周期，直到在Vue实例上调用vm,$mounte(el)

如果 Vue 实例对象中有 template 选项，则将其作为模板编译成 render 函数。如果没有 template 选项，则将外部 HTML（outerHTML）作为模板编译。由此可以看出，template 中的模板优先级要高于 outerHTML 的优先级。

参照原文：blog.csdn.net/TalonZhang/…

所以综合排名优先级： render 函数选项 > template 选项 > outerHTML

3、beforeMount和mounted之间，此时是给vue实例对象添加$el，并且替换掉挂载DOM元素。beforeMount中属性还是以虚拟DOM存在的，mounted之后发生了变化。

4、beforeUpdate和updated之间从图中我们可以看到，当 vue 中的数据发生改变，会触发对应组件的重新渲染（re-render），先后调用 beforeUpdate 和 updated 钩子函数。

这里的 update 指的是，view 层的 update，而不是 vue 对象中 data 属性的 update。所以，这两个函数都发生在 data 改变之后（很容易理解，因为就是 data 属性的改变才触发了这两个函数），区别是 beforeUpdate 发生在 view 层的改变之前，也就是页面还没有重新渲染，此时页面仍然显示 “Vue的生命周期”（beforeUpdate 也是在页面重新渲染前修改 data 的最后时机）；而 updated 是发生在 view 层改变之后，也就是此时的页面已经重新渲染为 “触发组件更新”。

5、 beforeDestroy 和 destroyed 之间的生命周期

beforeDestroy 是在实例被销毁之前调用，在这一步，实例仍然完全可以调用。 destroyed 函数在实例被销毁之后调用，此时 vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue实例 笔记

一、数据响应式

二、生命周期

Vue实例笔记