VUE知识（三）计算属性、监听属性、动画

一、计算属性

（一）计算属性–computed

（1）目标

一个变量的值，依赖另外一些数据计算而来的结果

（2）语法

computed:{
	"计算属性名"(){
		return "值"
		}
}

（3）特点

函数内使用的变量改变，重新计算结果返回

（4）注意

场景：一个变量的值，需要用另外变量计算而得来
注意：计算属性和data属性都是变量—不能重名

（二）计算属性–缓存

（1）目标

计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果

（2）使用场景

当变量值依赖其他变量计算而得来才用

（3）优势

带缓存，只要依赖项不变，都直接从缓存中取
依赖项改变，函数自动执行并重新缓存

计算属性的优势：
带缓存
计算属性对应函数执行后，会把return值缓存起来
依赖项不变，多次调用都是从缓存取值
依赖项值变化，函数会“自动”重新执行并缓存新的值

（三）计算属性–完整写法

（1）目标

计算属性也是变量

（2）语法

computed:{
	"属性名":{
		set(值){
		},
		get(){
			return "值"
		}
	}
}

（4）使用场景

给计算属性变量赋值时，需要用计算属性的完整方法
set接收要赋予的值，get里要返回给这个计算属性具体值

二、监听属性

（一）监听属性–watch

（1）目标

可以侦听data/computed属性值的改变

（2）语法

watch:{
	"被侦听的属性名"(newVal,oldVal){
	}
}

（3）如何侦听到某个变量改变呢？

使用watch配置项，key是要侦听的data/计算属性名

（二）监听属性–深度监听

（1）目标

侦听复杂类型，或者立即执行侦听函数

（2）语法

watch:{
	"要侦听的属性名":{
		immediate:true,//立即执行
		deep:true,//深度侦听复杂类型内变化
		handler(newVal,oldVal){
			}
	}
}

（3）如何监听一个对象/数组呢

把侦听器写成对象形式，给handler方法和deep:true

三、动画

（一）动画

（1）transition

name

一开始就动画显示 :appear="true"相当于appear appear="true"相当于是字符串

（2）动画代码

App.vue
动画.vue

（二）过渡

（1）transition-group

当transition里面的标签为多个是变为transition-group 并在里面的标签上添加key值

（2）过渡代码

App.vue
过渡.vue(简写）

（三）网页

（1）步骤

1.打开终端 运行 npm install animate.css
2.引入 import ‘animate.css’
3.配置库 name=“animate__animated animate__bounce”
4.进入动画 enter-active-class=“animate__swing”
5.离开动画 leave-active-class=“animate__bounceOutUp”

（2）网页代码

App.vue

网页.vue