前端UI框架——VueAPI使用之计算属性和侦听器(监听器)

最新推荐文章于 2025-01-08 15:52:22 发布

Blockchain Explorer

最新推荐文章于 2025-01-08 15:52:22 发布

阅读量602

点赞数

CC 4.0 BY-SA版权

分类专栏： Web框架/Vue/ 文章标签： vue 计算属性缓存计算属性监听属性计算属性getter&amp;setter

本文链接：https://blog.youkuaiyun.com/TDCQZD/article/details/82154657

Web框架/Vue/ 专栏收录该内容

11 篇文章

订阅专栏

博客围绕Vue的计算属性和监听属性展开。介绍了计算属性的基础使用、缓存机制、getter/setter，以及监听属性watch和$watch的用法，并给出了相应代码案例及运行结果，帮助理解Vue中这两种属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本介绍

计算属性和侦听器
1、基础使用
2、计算属性缓存
3、计算属性的 getter/setter
4、监听属性watch $watch

二、代码案例

1、基础使用

代码实例：

<!--计算属性和侦听器
1、基础使用
2、计算属性缓存
3、计算属性的 getter/setter
4、监听属性watch $watch
-->
<body>
<div id="app">
    <input type="text" v-model="msg1"> <br>
    <input type="text" v-model="msg2"> <br>
    <input type="text" v-model="msg3">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg1:"A",
            msg2:"B"
        },
        computed:{
            //计算属性所对应的函数 什么时候被执行？
            //     1. msg3指令被vue解析时
            //     2. 当计算属性所依赖的属性产生变化时
            msg3() {
                console.log("msg3");
                return `${this.msg1}-${this.msg2}`
            }
        }
    })
</script>

代码运行结果：
这里写图片描述
2、计算属性缓存

代码实例：

<head>
    <meta charset="UTF-8">
    <title>02_计算属性缓存</title>
</head>
<body>
    <div id="app">
        {{msg3}}
        {{msg3}}
        {{msg3}}
        {{msg3}}
        {{msg3}}
        {{msg3}}
        {{msg3}}
        {{msg3}}
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg1:"A",
            msg2:"B",
            msg4:"A-B"
        },
        computed:{
            //get方法
            msg3:{
                get(){
                    console.log("计算属性msg3的get方法");
                    return `${this.msg1}-${this.msg2}`;
                }
            }
        }
    })

</script>

代码运行结果：

A-B A-B A-B A-B A-B A-B A-B A-B

3、计算属性的 getter/setter

代码实例：

<head>
    <meta charset="UTF-8">
    <title>实现双向监听</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg1"> <br>
    <input type="text" v-model="msg2"> <br>
    <input type="text" v-model="msg3">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg1:"A",
            msg2:"B",
            msg4:"A-B"
        },
        computed:{
            //get方法
            msg3:{
                get(){
                    return `${this.msg1}-${this.msg2}`;
                },
                set(val){
                    let arr = val.split("-");
                    this.msg1 = arr[0];
                    this.msg2 = arr[1];
                }
            }
        }
    })

</script>

代码运行结果：
这里写图片描述
4、监听属性watch $watch

代码实例：

<head>
    <meta charset="UTF-8">
    <title>实现监听</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg1"> <br>
    <input type="text" v-model="msg2"> <br>
    <input type="text" v-model="msg3"> <br>
    <input type="text" v-model="msg4">
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg1:"A",
            msg2:"B",
            msg4:"A-B"
        },
        computed:{
            msg3() {
                console.log("msg3");
                return `${this.msg1}-${this.msg2}`
            }
        }/*,
        watch:{
            msg1(newV,oldV){
                this.msg4 = `${newV}-${this.msg2}`;
            },
            msg2(newV,oldV){
                this.msg4 = `${this.msg1}-${newV}`;
            }
        }*/
    })

    //$watch内部不要使用es6的语法
    vm.$watch("msg1",function(newV,oldV){
        this.msg4 = `${newV}-${this.msg2}`;
    })
    vm.$watch("msg2",function(newV,oldV){
        this.msg4 = `${this.msg1}-${newV}`;
    })
</script>

代码运行结果：
这里写图片描述