VUE3 之 计算属性与侦听器
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,欢迎大家关注