VUE3 之 计算属性与侦听器

Posted 2021-12-20 追风人聊Java

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