computed
computed是计算属性，用来计算一个属性的值
特点1 ： 调用的时候不需要加括号，可以直接当属性来用的。
特点2 ： 根据依赖的自动缓存，依赖不变，computed的值不会重新计算
computed的getter和setter
- computed的属性可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值).
- 一般情况下没有setter，computed只预设了getter，只能读取，不能设值。所以，computed默认格式（是不表明getter函数的）.
- 当赋值给计算属性的时候，将调用setter函数。
<template>
<div class="hello">
{{fullName}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: '飞',
lastName: "旋"
}
},
props: {
msg: String
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>
\
watch
watch的意思是监听，当属性发生变化时，监听并且执行函数。
- immediat：表示第一次是否运行，true是运行，false是不运行
- deep表示对对象里面的变化进行深度监听
- 不支持缓存，数据变，直接会触发相应的操作
template>
<div class="hello">
{{fullName}}
<button @click="setNameFun">click</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '飞',
lastName: "旋"
}
},
props: {
msg: String
},
methods: {
setNameFun() {
this.firstName = "大";
this.lastName = "熊"
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName(newval,oldval) {
console.log(newval)
console.log(oldval)
}
}
}
</script>
