vue中的计算属性computed
路过的朋友，可以点个赞，关注一下~~~
computed介绍
计算属性computed，是vue中的一个挂载方法，主要是依赖本实例中的数据进行计算，但是也可以依赖其他的实例的属性。计算属性有缓存，如果计算属性所依赖的数据没有必变，它会去缓存中取。
var app2 = new Vue({
data: {
msg2: 'hhhhh'
}
})
var app1 = new vue({
data: {
msg1: 'hhhhh'
}，
computed: {
messages1: function () {
return this.msg1+'www' // 可以使用本实例的属性
}，
messages2: function () {
return app2.msg2 // 可以使用其他实例的属性
}，
}
})
计算属性的使用
计算属性的本质是一个方法，但是计算属性在使用的时候，不需要加小括号，可以完全当做一个属性来使用
计算属性默认都有get和set方法
在计算属性中，每一个计算方法都默认有与之对应的getter方法和setter方法，当获取计算属性时默认调用get方法，当改变值的时候会调用set方法
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
运行vm.fullName时，getter就会调用；运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
computed 和 methods的区别
computed有缓存- computed中的方法，主要是依据data中的数据生成的新的数据，里面的方法，在第一次编译调用之后便不再进行调用（数据不改变的情况下），即数据不更新便不再执行。
method没有缓存-
只要使用该方法便进行调用。
-
computed和watch有什么区别
- 大多数情况下，computed和watch都可以互换，
- watch中可以写异步，
- watch中的写法复杂一点，
- watch可以实现一些简单的功能
特别提醒
能使用computed就不要使用watch
computed小练习之全选与反选
使用计算属性computed，来实现全选反选案例
效果图
画页面
<div id="app">
全选:<input type="checkbox">
<br>
<template v-for="(check,item) in checks">
{{check.name}}<input type="checkbox" v-model="check.value">
</template>
</div>
<script>
//....
data(){
return{
checks:[
{name:'苹果',value:true},
{name:'橘子',value:false},
{name:'香蕉',value:true},
]
}
},
//......
</script>
实现选中完，全选选中
<div id="app">
全选:<input type="checkbox" v-model="checkAll">
<!-- .... -->
</div>
<script>
//....
computed: {
checkAll(){
return this.checks.every((check=>check.value))
}
},
//....
</script>
实现全选，下选；全不选，下不选
// ...
computed: {
checkAll: {
get(){
return this.checks.every((check=>check.value))
},
set(newValue){
this.checks.forEach(check => {
check.value = newValue;
});
}
}
},
//...
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
全选:<input type="checkbox" v-model="checkAll">
<br>
<template v-for="(check,item) in checks">
{{check.name}}<input type="checkbox" v-model="check.value">
</template>
</div>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
checks:[
{name:'苹果',value:true},
{name:'橘子',value:false},
{name:'香蕉',value:true},
]
}
},
computed: {
checkAll: {
get(){
return this.checks.every((check=>check.value))
},
set(newValue){
this.checks.forEach(check => {
check.value = newValue;
});
}
}
},
})
</script>
</body>
</html>
