Vue学习笔记

一·什么是Vue.js？

vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。

二·数据与方法

当一个vue被创建时，它将data对象的所有属性都加入到vue的响应式系统中。当这些属性值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

注：只有当实例被创建时就已经存在data中的属性才是响应式的，新添加的属性变动不会触发任何视图变化。

var vm = new Vue({
    data: {
        name: "yimeimei",
        age: 3,
        isGirl: true
    }
})

比如上面的代码，data对象中的属性，name、age、isGirl三个属性时响应式的，更改他们的值，视图会发生相应的变化。

三·生命周期

beforeCreate：在实例初始化之后，数据观测、事件配置之前被调用；

created：实例创建完成后被立即调用。实例已完成以下配置：数据观测属性和方法的运算，watch/event事件回调。然而挂载阶段还未开始，$el还不可用；

beforeMount：挂载开始之前被调用（相关的render函数首次被调用）；

mounted：实例被挂载后调用，这时el已经被新创建的vm.$el替换了。注：mounted不会保证所有的组件也都挂载完成。如果希望整个视图都渲染完毕，可以在mounted内部使用vm.$nextTick：

mounted: function(){
    this.$nextTick(function(){
        // Code that will run only after the
        // entire view has been rendered
    })
}

beforeUpdate：数据更新时调用，发生在虚拟dom打补丁之前。

updated：由于数据更新导致的虚拟dom重新渲染和打补丁，在这之后调用该钩子；

beforeDestory：实例销毁之前调用，这一步实例依然可用；

destoryed：实例销毁后调用。该钩子被调用后，vue实例的所有指令都被解绑，所有的事件监听被移除，所有的子组件被销毁.

四·计算属性

先看一个例子：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

上例中可以看到，模板中放入了太多的逻辑，会让模板过重并难以维护。其实我们希望的是看到这样的代码：

<div id="example">
  {{ reverseMessage }}
</div>

这时候就可以使用计算属性，如下：

var vm = new Vue({
    el: "#element,
    data: {
        message: 'hello, yimeimie'
    },
    computed: {
        reverseMessage: function(){
            return this.message.split('').reverse().join('')
        }
    }
})

把复杂的逻辑写在计算属性中，尽量保持模板的简介。

*****计算属性和方法*****

methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

方法reverseMessage()和计算属性reverseMessage返回的结果是相同的。但是计算属性是有缓存的，在所计算的对象message没有发生改变时，计算属性每次返回的是缓存数据，不用每次都进行计算。这就是所谓的计算属性是基于它们的响应式依赖缓存的。

而使用方法，在每次触发的时候，都会从头执行方法。