Vue 计算属性，监听属性，动画

计算属性（computed）

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，应当使用计算属性。

示例：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

computed vs methods
当依赖的data对象中的属性值发生变化时、会触发计算方法，在data对象中生成新的变量，会将新的变量缓存起来；（只要依赖的data对象属性值不发生改变，将不会触发计算方法）
可以用计算属性实现的，也可以用方法methods实现，但是methods性能不如computed；methods每次渲染后都会被调用，computed只要响应式依赖(data中的属性)没有发生改变，就不会重新计算，并且计算后会重新被缓存；

computed 的 setter
计算属性默认只有getter，在需要时可以提供一个setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

监听属性（watch）

1.当属性发生改变就会触发watch函数，每个函数都会接受两个值，一个是新值，一个是旧值
2.可以在watch当中判断来减少虚拟dom的渲染
使用方法：

1.通过 watch 监听 data 数据的变化，数据发生变化时，就会打印当前值

watch{
	data(oldval,newval){
		console.log(oldval);
		console.log(newval);
	}
}

2.使用深度监听，一般watch只会对一个对象监听，要想对对象中属性的改变监听要使用深度监听

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }    
}

如果只想对对象中某个特定属性进行监听的话，可以使用字符串形式监听对象属性

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    'list.id': {
        handler(newVal) {
            this.number++
        },
        deep: true
    }    
}

3.通过 watch 监听 data 数据的变化，数据发生变化时，执行change方法

data（） {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
}，
watch: {
    list: 'change'
}
methods: {
	change(curval, oldval){
		consloe.log(curval, oldval);
	}
}

watch 中的 immediate、handler 和 deep 属性
watch有个特点，当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果需要在最初绑定值的时候也执行函数，就需要 immediate 属性
deep 属性可以使 watch 进行深度监听

总结：一位（多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要深度监听

动画

Vue 中需要实现动画效果的标签需要< transition >标签包裹
transition标签中如果没有设置name属性，那么默认为v-enter、v-leave等

在 Vue 中使用 Animate.css 库
1.必须引入animate.css库
2.必须使用class自定义名字的方式，来使用animate.css库