Vue：深入实例：生命周期钩子 / 内置属性方法 / 响应式原理

在进一步学习计算属性之前，让我们先深入的了解一些Vue的实例。

提示：原理/底层，理解难度大，面试易涉及……

在Vue实例化时，我们传入了一个选项对象，其属性除了我们已经学过的el和data，还可以有：

实例生命周期钩子

比如：created、 mounted、updated、destroyed……

        var vm = new Vue({

            el: "#yz-hello",

            data: {

                students: ['夏康平', '陈国栋', '韩佳宝']

            },

            created: function(){

                console.log('I was created');

            },

            mounted: function () {

                console.log('I was mounted');

            },

            updated: function () {

                console.log('I was updated');

            }

        })这些都是函数，内容由开发人员自定义，他们会在Vue实例初始化的某些个特定阶段被执行。他们又被称之为钩子（hook）函数。

演示：

交换钩子函数的位置，观察他们的执行顺序是否变化

更改vm.student，updated被触发

生命周期

我们把一个对象从生成（new）到被销毁（destroy）的过程，称之为生命周期。

学习Vue实例的生命周期，实际上就是学习：一个Vue对象，从创建到被销毁，它究竟干了些什么。在现目前阶段，我们稍微简化一下：

初始化：init

实例化一个Vue的JavaScript对象，在JavaScript语言内部为接下来的DOM渲染做准备。

该阶段以调用钩子函数：created结束。

演示：在created中设置断点，查看

未被渲染的HTML页面

控制台vm.students

挂载：mount

通过el获取模板，根据模板和vue data生成DOM元素，然后将其挂载到原HTML页面（渲染）。

该阶段以调用钩子函数：mounted结束。

演示：在mounted中设置断点，查看：HTML页面被渲染

@想一想@：使用Ajax获取数据的代码，放在created还是mounted里面好？

更新：update

当vue监控（watch）到vue data发生变动，需要重新（响应式）渲染，渲染完成后会触发钩子函数：updated。

演示：updated不会再次created或mounted

销毁：destroyed

顾名思义，如标题。

但问题是：什么情况下Vue实例才会被销毁呢？

@试一试@：

document.getElementById('yz-hello').remove()

或者，重新加载页面？……

要演示vm的实例的销毁，我们需要：

vm.$destroy()

PS：更多内容参考vue文档完整图

实例属性和方法

Vue为我们提供了这种内置的，属于Vue实例的属性和方法。

以$开头，主要是为了和开发人员自定义的：

data中的属性（复习）

methods中的方法：

data: {

    students: ['夏康平', '陈国栋', '韩佳宝']

},

methods: {  //和data、钩子函数并列

    greet: function () {

        return "Hello, 源栈";

    }

},methods中定义的方法可以

直接由vm实例调用

vm.greet()

在template中使用

<h1>{{greet()}}</h1>

相区别。

F12控制台演示：

vm.$el

vm.$options.el

vm.$options.data()

vm.$data

响应式原理

复习：效果

Object.defineProperty()

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter

控制台演示：

var fg = {}    //空对象

Object.defineProperty(fg, 'name', { value: '飞哥' })

还可以传入一个setter 函数，当属性值被修改时，会调用此函数。

Object.defineProperty(fg, 'name', {

    set: function (value) {

        console.log('set is called，and value is: ' + value);

    }

});

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

简单的理解：有了getter/setter，才能在赋值的时候添加逻辑（又被称之为：数据劫持）。

@想一想@：为什么不直接用obj.Property=XXX呢？

阅读源代码

code is everything。

加载时渲染

在Vue.js上设置断点，5901行：

    function createElm (    该方法会在渲染生成HTML元素时使用，查看调用堆栈：

function Vue (options)    //Vue实例构造函数

Vue.prototype.$mount = function (    //将生成的element挂载（mount）到DOM树

var Watcher = function Watcher (    //Watcher类

Vue.prototype._update = function (vnode, hydrating) {    //更新节点

响应式渲染

断点设置在1053行：

  function defineReactive$$1 (    //1014行

    var dep = new Dep();

    Object.defineProperty(obj, key, {

      set: function reactiveSetter (newVal) {

        dep.notify();

然后更新vue data。

响应式自定义

为了便于演示，我们把vue data独立出来：

var objGreet = {

    greet: "Hello, 源栈"

};

var vm = new Vue({

    el: "#yz-hello",

    data: objGreet,

freeze()

在某些特殊情况下，我们可能想禁用掉Vue的响应式功能。

这时候我们可以使用Object.freeze()方法“冻结”住vue data：

//Object.freeze(objGreet);

演示：略

set()

基于上述知识，我们知道，Vue实例会在初始化时遍历vue data属性，然后予以监控（watch）。

因为Vue只会被实例化一次，所以，之后添加到vue data的属性，Vue是不