目录
1. 概述
老话说的好:只要你有心努力,任何时候都不晚。
言归正传,今天我们来聊聊 VUE3 的 计算属性与侦听器。
闲话不多说,直接上代码。
2. 计算属性
2.1 概述
如果页面显示的内容,需要经过数据的计算获得,通常有三种方式:插值表达式中计算、方法中计算和计算属性中计算。
差值表达式中计算、方法中计算都有个缺点,当页面重新渲染时,就会重新计算,浪费系统资源。
在计算属性中计算时,只有当参与计算的数据发生变化时,才会重新计算,推荐使用计算属性。
2.2 插值表达式中计算
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
count : 6,
price : 3
}
},
template : "<div>{{price * count}}</div>" // 插值表达式中计算
});
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.3 方法中计算
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
count : 6,
price : 3
}
},
methods: {
// 只要页面重新渲染,就会重新计算
getTotal() {
console.info("methods getTotal 执行了")
return this.price * this.count;
}
},
template : "<div>{{getTotal()}}</div>" // 方法中计算
});
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
2.4 计算属性中计算
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
count : 6,
price : 3
}
},
computed: { // 计算属性(推荐优先使用计算属性)
// 当计算属性依赖的数据发生变更时,才会重新计算
total() {
console.info("computed total 执行了")
return this.price * this.count;
}
},
template : "<div>{{total}}</div>" // 计算属性中计算,注意这里写 total,而不是 total()
});
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
3. 侦听器
3.1 概述
侦听器,可以侦听某个数据,当数据发生变化时,就会执行侦听器中的方法。
在侦听器的方法中可以获取数据变动前和变动后的值。
3.2 侦听数据
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
count : 6,
price : 3
}
},
watch: {
count() { // 监听count的值,发生变化就执行方法
console.info("count的值变了")
}
},
template : "<div>{{price * count}}</div>"
});
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
3.3 侦听器方法中加入参数
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
count : 6,
price : 3
}
},
watch: {
price(cur, prev) {
console.info("之前的值:" + prev + " 当前值:" + cur);
}
},
template : "<div>{{price * count}}</div>"
});
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
4. 综述
今天聊了一下 VUE3 的 计算属性与侦听器,希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 :)
关注追风人聊Java,每天更新Java干货。
5. 个人公众号
追风人聊Java,欢迎大家关注