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，欢迎大家关注