computed watch

最新推荐文章于 2024-03-15 21:49:18 发布

原创最新推荐文章于 2024-03-15 21:49:18 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

VUE笔记专栏收录该内容

17 篇文章

订阅专栏

博客介绍了Vue中computed的get()执行时机，包括页面加载和相关属性变化时，还指出计算属性需返回值，且属性名不能与data里的重复。同时提到watch，其属性名即要监听的属性，属性变化时会执行。

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

computed 的get()执行的时机:页面加载/computed里面相关属性发生变化
//这个计算属性（函数）需要一个返回值作为函数的结果
计算属性名不能是data里面的属性名

watch:属性名就是要监听的属性名，属性发生变化就执行

在这里插入图片描述

watch 监听的属性发生改变，直接更新数据

computed 
get()  读取当前属性值 根据相关属性 计算并返回当前属性的值【】
//get()  监听了更多的属性   其中一个发生变化  就执行get()

//监视当前计算属性的变化     也就是get的return的值发生变化
set(newValue){

}


也就是说，变化的是get里面的元素，发生的是get()
发生变化的不是get里面的元素，而是这个属性值直接发生变化

在这里插入图片描述

计算属性	watch
get()监听多个属性	监听单个属性
set()可以监听当前计算属性值的变化，set()的变化如果不让get()里面的因素变化，就不会触发get(),修改了get里面的因素就会触发get()
get()是有缓存的，避免重复计算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="../VUE/vue.js"></script>

    <style>
        img {
            height: 100px;
        }

        .box {}
    </style>
</head>

<body>
    <div class="box">
        firstName<input type="text" v-model="firstName"><br>
        lastName<input type="text" v-model="lastName"><br>
        computed<input type="text" v-model="fullName"><br>
        watch<input type="text" v-model="fName_w"><br>
        <!-- {{fullName}}
        {{fullName}}
        {{fullName}} -->
    </div>

</body>
<script>
    const vm = new Vue({
        el: ".box",
        data: {
            firstName: "A",
            lastName: "B",
            fName_w:"A B",
            count:0
        },
        computed: {
            fullName:{
                get() {
                    console.log("fullName",this.count++)
                    return this.firstName +" "+ this.lastName;
                    //return 是  fullName的值
                },
                set(newVal) {
                    this.firstName = newVal.split(" ")[0];
                    this.lastName = newVal.split(" ")[1];
                }
            }
        },
        watch:{
            firstName(val){
                this.fName_w =  val +" " +this.lastName ;
            },
            lastName(val){
                this.fName_w = this.firstName + " "+val;
            }
        }
    })
</script>

</html>
<!-- 
{{msg}}
{{*msg}}
{{{msg}}}
 -->