「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」。
计算属性 computed
什么是计算属性?
计算属性,类似于过滤器,用于处理某个或者几个属性的复杂展示逻辑,但是并不会改变原数据
- 计算属性默认和普通数据一样,可以在HTML中使用即可:
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>拼接后为: {{ fullName }}</p>
</div>
- computed 中的属性都会被 vm 所代理,最终都要放到 vm 上;
- computed 中的属性和data中的属性不能同名,也不能和methods中的属性同名
- computed 计算属性还可以是个函数,相当于只设置 get 的情况, 函数的返回值就是 计算属性的值但是不能设置
- 如果一个属性依赖于其他属性计算而来,那么这个属性最好用 computed
- 计算属性的处理不能写在异步处理程序中，如定时器、ajax等
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>拼接后为: {{ fullName }}</p>
<button v-on:click="add">张三啥也不是</button>
</div>
</body>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
firstName: "张三",
lastName: '李四'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + "喜欢" + this.lastName;
},
// setter
set: function (newValue) {
console.log(newValue);
this.lastName = newValue;
}
},
// fullName() {
// return this.firstName + "喜欢" + this.lastName;
// }
},
methods: {
add() {
this.fullName = "啥也不是"
}
}
})
</script>
</html>
侦听器 watch
什么是侦听器?
- watch: 侦听器属性,用于监听某个属性的改变,如果发生改变就会触发对应的功能函数
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="sth"> <br>
{{msg}}
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
sth: '',
msg: '',
},
watch: {
// computed: 计算属性
// watch: 侦听器属性，用于监听某个属性改变，如果发生改变就会触发对应的函数
sth(newVal, oldVal) {
// 监听属性 sth，当 sth 属性发生变化时就会触发这个函数
// 这个函数有两个参数，第一个是 sth 的最新值，第二个是 sth 的上一个值
console.log(newVal);
console.log(oldVal);
setTimeout(() => {
if (newVal.length > 5) {
this.msg = '太长了'
}
if (newVal.length < 3) {
this.msg = '太少了'
}
}, 0)
}
}
});
// 在工作中能使用 computed 尽量使用 computed 而不要使用 watch；
</script>
</body>
</html>
区别
- computed 计算属性
- 页面加载就求值: 支持缓存,如果依赖的数据发生改变,才会重新计算;
- 不支持异步
- 如果一个属性是由其他属性计算而来,这个属性依赖其他属性,依赖发生变化时自动求取最近的计算结果
- watch 侦听器
- 页面加载时不求值,依赖值发生变化时再去求值;
- watch 支持异步
- watch 只能监听一个属性的变化,如果有属性依赖着结果,那么需要手动去重新计算这个结果
