computed阐述
监听值未在data中定义，以return返回值形式；计算属性变量在computed中定义，属性监听在data中定义。计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数
computed 使用阐述
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
<—more—>
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed微信computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <template>
<div>
<div>{{ formSum.sum }}</div>
<div><button @click="buttonPlusClcik">加点击</button></div>
<div>{{ dataSum.sum }}</div>
<div><button @click="buttonReduceClcik">减点击</button></div>
<div>{{ theSum }}</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
formSum: {
sum: 0,
sumbutton: 100,
},
dataSum: {
sum: 10,
sumbutton: 1000,
},
};
},
computed: {
theSum() {
return this.formSum.sum + this.formSum.sumbutton + this.dataSum.sum + this.dataSum.sumbutton;
},
},
methods: {
buttonPlusClcik() {
this.formSum.sum += 1;
this.formSum.sumbutton += 100;
},
buttonReduceClcik() {
this.dataSum.sum -= 1;
this.dataSum.sumbutton -= 100;
},
},
};
</script>
|
computed 传参问题
官方文档说明中，并不支持的在computed中进行传参操作，假如现在就想在computed中进行传参操作该怎么做呢？在JavaScript语言中，我们提到过闭包这种设计，它的主要作用，不就是用来访问其他函数内部的变量，然后返回操作结果。所以，我们可以利用闭包来实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <template>
<div>
<div>{{ formSum.sum }}</div>
<div><button @click="buttonPlusClcik">点击</button></div>
<div>{{ dataSum.sum }}</div>
<div><button @click="buttonReduceClcik">点击</button></div>
<div>{{ theSum(formSum.sum, dataSum.sum, formSum.sumbutton, dataSum.sumbutton) }}</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
formSum: {
sum: 0,
sumbutton: 100,
},
dataSum: {
sum: 10,
sumbutton: 1000,
},
};
},
computed: {
theSum() {
return function (a, b, c, d) {
return a + b + c + d;
};
},
},
methods: {
buttonPlusClcik() {
this.formSum.sum += 1;
this.formSum.sumbutton += 100;
},
buttonReduceClcik() {
this.dataSum.sum -= 1;
this.dataSum.sumbutton -= 100;
},
},
};
</script>
|
computed 【getter和setter】
每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法 ， 只是利用了 getter来读取。在你需要时，也可以提供一个 setter 函数 ， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <template>
<div>
<div id="example">
<p>给定以下三个词语组成一句话</p>
<span>{{ nameOne }}</span>
<span>{{ nameTwo }}</span>
<span>{{ son }}</span>
<p style="padding: 12px 0">答案为：{{ result }}</p>
<button @click="btnClick">改变语句</button>
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
nameOne: "父亲",
nameTwo: "母亲",
son: "儿子",
};
},
computed: {
result: {
get: function () {
return this.nameOne + this.nameTwo + this.son;
},
set: function (newVal) {
this.nameOne = newVal.substr(0, 2);
this.nameTwo = newVal.substr(2, 2);
this.son = newVal.substr(4);
},
},
},
methods: {
btnClick() {
this.result = "儿子外出打工";
},
},
};
</script>
|
computed 与 watch 使用区别阐述
不支持缓存，数据变，直接会触发相应的操作；watch支持异步；watch监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；当一个属性发生变化时，需要执行对应的操作；一对多；watch监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
vue3.0和vue2.0中计算属性的使用方式是一样的
微信
支付宝
