vue compute set（vue中computed的详细讲解）

时间2025-06-15 08:57:41分类IT科技浏览4848

导读：1.定义 computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新...

1.定义

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

2.用法

一般情况下，computed默认使用的是getter属性

3.computed的响应式依赖(缓存)

1. computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName ，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName

就会重新执行。

2.computed计算属性会被缓存，在下面代码中使用了两次fullName ，但在控制台只输出了一次 “这是fullName ” 。 <template> <div> <div> 姓：<input type="text" v-model="firstName" /> </div> <div> 名：<input type="text" v-model="lastName" /> </div>  <div>姓名：{{ fullName }}</div> <div>姓名：{{ fullName }}</div> </div> </template> <script> export default { data() { return { firstName: "张", lastName: "三", }; }, computed: { fullName() { console.log("这是fullName"); return this.firstName + this.lastName; } } }; </script>

4.应用场景

当一个数据受多个数据影响时，可以使用computed

1.本组件计算

2.计算props的值

3.计算vuex的state或者getters值的变化

参考：https://cn.vuejs.org/v2/guide/computed.html

https://segmentfault.com/a/1190000012948175

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。