关于vue中计算属性computed的详细讲解
目录
- 1.定义
- 2.用法
- 3.computed的响应式依赖(缓存)
- 4.应用场景
- 附：计算属性的 getter 与 setter
- 总结
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>
<!-- 调用两次fullName -->
<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值的变化
附：计算属性的 getter 与 setter
默认情况下，计算属性函数是一个 getter 函数，如果计算属性只有 get 需求，则可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- <input type="checkbox" v-model='isAll'> -->
<input type="text" v-model='n'>
+
<input type="text" v-model='m'>
=
<input type="text" v-model='x'>
</div>
{{o}}
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
is: true,
obj: {
// a: 1
a: 1
},
n: '',
m: ''
},
computed: {
//计算属性在这里写的属性不要在data重复写 跟data中的数据一样可以通过vm.获取或者修改
isAll: {
get() {
//只要获取这个属性就会触发get这个函数
console.log(1);
return this.is
},
set(val) {
// val 设置的值
this.isAll = this.is
}
},
x: {
// 只要是依赖的值（必须有setter和getter响应的数据）发生改变了就会重新计算自己的值
get() {
return Number(this.n) + Number(this.m)
},
// set(){
// Number(this.n) + Number(this.m)
// }
},
o: {
get() {
//如果没有在data的obj中初始化 就没有getter和setter响应 当改变this.obj.a的时候不会影响 数据o
return this.obj.a + 1
}
},
ss: {
get() { },
//计算属性必须要有get可以没有set
//v-model绑定的计算属性有get和set
//其他的一般只有get
set() { }
},
xx() {
//如果这个计算属性只有get可以写成一个函数的形式
},
bb() {
//第一次获取的时候依赖值没有发生改变但是也会默认执行一次
// 必须要有return 不支持异步
let a = 'kk';
setTimeout(() => {
a = this.aa + a
}, 1000)
console.log(a);
return this.aa
}
}
})
</script>
</body>
</html>
参考：https://cn.vuejs.org/v2/guide/computed.html
https://segmentfault.com/a/110000012948175
总结
到此这篇关于vue中计算属性computed的详细讲解的文章就介绍到这了,更多相关vue计算属性computed内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap
-
vue计算属性computed、事件、监听器watch的使用讲解
一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据
-
Vue.js每天必学之计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp
-
Vue computed 计算属性代码实例
什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri
-
Vue.js第三天学习笔记（计算属性computed）
今天给大家分享下vue.js中的计算属性(computed) 示例一 computed的get属性 html: <template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div> <
-
Vue computed计算属性的使用方法
computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('
-
Vue.js计算属性computed与watch（5）
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p
-
Vue中计算属性computed的示例解读
计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的
-
vue计算属性computed的使用方法示例
本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
-
vue中计算属性（computed）、methods和watched之间的区别
前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函