watch和computed的区别

最新推荐文章于 2025-07-11 09:25:22 发布

小黑七零八落

最新推荐文章于 2025-07-11 09:25:22 发布

阅读量4.4k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/U_Are_My_Halo/article/details/89321489

本文深入解析Vue框架中watch监听数据变化与computed计算属性的功能差异。通过实例展示，watch如何在数据变动时影响其他数据，而computed则根据已有数据生成新值，仅在依赖数据变化时更新。

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

watch 和 computed 的区别

computed：计算属性

计算属性是由data中的已知值，得到的一个新值。
这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
计算属性不在data中，计算属性新值的相关已知值在data中。
别人变化影响我自己。

watch：监听数据的变化

监听data中数据的变化
监听的数据就是data中的已知值
我的变化影响别人

little-demo：演示watch和computed的区别

<div id="app">
    <input type="text" v-model="name" />
    <span v-show="isShow">请输入3-6个字符</span>
    <br />
    <input type="text" v-model="todoName" />
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: "zs",
            todoName: "ls"
        },
        computed: {
            isShow() {
                //当this.name的长度小于3或者大于6时显示提示内容(我根据name的变化而变化)
                if (this.name.length >= 3 && this.name.length <= 6) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        watch: {
            //监听data中的name,如果发生了变化,就把变化的值给data中的todoName(我影响了别人)
            name(newVal) {
                this.todoName = newVal;
            }
        }
    });
</script>