Vue.js核心概念解析-优快云博客

一、创建一个Vue实例

每个Vue应用都是使用Vue函数创建一个Vue实例。所有的Vue组件都是一个Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

数据和方法

当一个实例被创建后，它向Vue的响应式系统加入了其data对象中能找到的所有属性。当这些属性的值改变的时候，视图也会跟着响应。

注意：

1.值得注意的是，只有当Vue实例被创建的时候的data对象中的存在的属性才是响应式的。
2.如果你知道你会在晚些时候需要一个属性，但是一开始它为空或者不存在，那么你仅需要设置一些初始值。
3.这里唯一的例外是使用object.freeze()，这会阻止修改现有的属性。
4.当然除了数据属性，Vue实例还暴露出了一些实例属性和方法，它们都有前缀$,这样便于和用户自定义的属性区分开来。

二、实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听，编译模板，将实例挂载到DOM并且在数据变化时更新DOM。同时在这个
过程中会运行一些叫生命周期钩子的函数。生命周期钩子的this上下文指向调用它的实例

created：用于在一个实例被创建之后执行的代码
mounted:
updated:
destroyed:
所有生命周期方法被调用的时候，this都指向所在的Vue实例。

实际的生命周期方法调用次序：
1.new Vue();
2.在进行create之前，需要调用beforeCreate生命周期钩子；
3.然后观察数据(observe Data);初始化事件（init Events）；
4.然后调用create生命周期方法；
5.判断是否有el的选项，如果有，再判断其是否有template选项；如果没有的话，就在vm.$mount(el)被called的时候，再去判断其是否有template的选项。
6.这时候判断有无template选项，如果有的话，就看他将template模板变成render function，
7.在mount之前，还要调用beforeMount，执行完beforeMount之后，就将el渲染成vm.$el。然后调用mounted。
8.渲染完之后，如果数据有变化的话，就需要重新渲染，然后就调用beforeUpdate，虚拟DOM重新渲染并更新。更新完之后调用updated；
9.如果页面即将被销毁的时候，先调用beforeDestroy，然后等销毁完之后，就调用destroyed。

三、计算属性和侦听器

1.计算属性

var vm = new Vue({
    el: '#example',
    data:{
        message: 'hello'
    },
    computed:{
                //reverseMessage是计算属性，因为其依赖了message数据属性，当message变化的时候，reverseMessage也跟着改变
        reverseMessage: function(){
            return this.message.split("").reverse().join("");
        },   
                //now也是计算属性，但是它并不是响应式依赖，计算属性是基于它们的依赖来缓存
        now: function(){
            return Date.now();
        }
    }
    methods:{
        reverseMessage:function(){
            return this.message.split("").reverse().join("");
        }
    }
})

2.侦听属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

看起来计算属性要比侦听属性好用得多，侦听属性看起来滥用watch。

3.计算属性的setter
计算属性默认只有getter，不过在需要的时候，也提供一个setter。

computed:{
        reverseMessage: function(){
            return this.message.split("").reverse().join("");
        },
        now: function(){
            return Date.now();
        },
        fullName:{
            get: function(){
                return this.firstName + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(" ");
                this.firstName = names[0];
                this.lastName = names[names.length - 1] 
            }
        }
    }

4.侦听器
虽然计算属性在大多数情况下合适，但也需要一个自定义的侦听器。Vue通过watch选项，提供一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。