目录
- 计算属性 computed
- 监听属性 watch
- 动画
计算属性 computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。
-
computed具有缓存功能，可以监听对象某个具体属性。 -
变量不在
data中定义，而是定义在computed中。定义时像方法，使用时是属性，不带小括号（）。 -
根据一个现有数据去生成一个新数据，并且这两个数据会永久的建立关系，还会建立缓存，当无关数据改变的时候，不会重新计算而是直接使用缓存中的值。
-
计算属性与方法的区别：将同一函数定义为一个方法而不是一个计算属性，两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只要相关依赖不发生改变，多次访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。 而
methods中每调用一次就会重新计算一次，再次执行函数，为了进行不必要的资源消耗，选择用计算属性 。 -
计算属性初始化的时候就可以被监听到并且计算。
<div id="box">
<p>单价 <input type="text" v-model="price"></p>
<p>数量 <input type="text" v-model="number"></p>
<p>金额计算 {{computedSum}}</p>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
price: 100,
number: 1,
sum: '',
},
computed:{
computedSum(){
var sum = 0;
if(this.price * this.number <1000){
sum = this.price * this.number + 100
}else {
sum = this.price * this.number
}
return sum
}
}
})
</script>
计算属性是基于它们的依赖进行缓存的，计算一遍，之后用到直接调用结果。上述例子中vm.computedSum 的值取决于 vm.price 和 vm.number，计算属性只有在它的相关依赖发生改变时才会重新求值。
监听属性 watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。要求watch中的方法名要与data中的属性名一致。
-
watch 监听的是已经在 data 中定义的变量, 当该变量变化时，会触发 watch 中的方法
-
当需要在数据变化时执行异步或开销较大的操作时，这时watch是非常有用的。
-
watch 只能监听简单数据类型，如果监听复杂数据类型，如对象，无法监听对象具体某个属性。
-
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
<div id="box">
<p>单价 <input type="text" v-model="price"></p>
<p>数量 <input type="text" v-model="number"></p>
<p>金额计算 {{sum}}</p>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
price: 100,
number: 1,
sum: '',
},
watch:{
price(){
console.log('价格变了')
if(this.price * this.number <1000){
this.sum = this.price * this.number + 100
}else {
this.sum = this.price * this.number
}
},
number(){
console.log('数量变了')
if(this.price * this.number <1000){
this.sum = this.price * this.number + 100
}else {
this.sum = this.price * this.number
}
}
}
})
</script>
动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。在下列情形中，可以给任何元素和组件添加进入/离开过渡。
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
语法格式：
<transition name = "nameOfTransition">
<div></div>
</transition>
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
CSS过渡，将过渡效果写在css的transition中，通过类名引用。
CSS动画，类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
自定义过渡的类名，通过以下特性来自定义过渡类名，自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)
引入animate.css动画库
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
