Vue.js 计算属性是什么
一、总结
一句话总结:
模板 表达式 维护
在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
1、为什么会有计算属性?
模板 表达式 维护
在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
2、计算属性的特点?
依赖 改变
依赖的值改变,计算属性也改变
比如:下列代码中,b的值依赖于a的值,a的值由1变成2时,b的值由2变成了3
14 <script>
15 var vm = new Vue({
16 el: '#example',
17 data: {
18 a: 1
19 },
20 computed: {
21 // 一个计算属性的 getter
22 b: function () {
23 // `this` 指向 vm 实例
24 return this.a + 1
25 }
26 }
27 })
28
29 setTimeout(function(){
30 vm.a=2;
31 },3000);
32
33 </script>
当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。
3、vue对象如何调用?
对象 变量 调用
将对象赋值给一个变量,然后调用这个变量即可
14 <script>
15 var vm = new Vue({
16 el: '#example',
17 data: {
18 a: 1
19 },
20 computed: {
21 // 一个计算属性的 getter
22 b: function () {
23 // `this` 指向 vm 实例
24 return this.a + 1
25 }
26 }
27 })
28
29 setTimeout(function(){
30 vm.a=2;
31 },3000);
32
33 </script>
4、vue对象中的数据如何调用?
直接 点
vue对象直接.(点)的方式
14 <script>
15 var vm = new Vue({
16 el: '#example',
17 data: {
18 a: 1
19 },
20 computed: {
21 // 一个计算属性的 getter
22 b: function () {
23 // `this` 指向 vm 实例
24 return this.a + 1
25 }
26 }
27 })
28
29 setTimeout(function(){
30 vm.a=2;
31 },3000);
32
33 </script>
5、vue和其它js代码的关系是怎样的?
对象 互不干扰
vue只是js的一个对象,和其它js代码完全是互不干扰的
14 <script>
15 var vm = new Vue({
16 el: '#example',
17 data: {
18 a: 1
19 },
20 computed: {
21 // 一个计算属性的 getter
22 b: function () {
23 // `this` 指向 vm 实例
24 return this.a + 1
25 }
26 }
27 })
28
29 setTimeout(function(){
30 vm.a=2;
31 },3000);
32
33 </script>
6、什么时候适合用计算属性,什么时候适合用$watch?
计算属性 对象中 多属性
$watch 对象外 单属性
场景描述:
一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,如何实现?
解决方法:
$watch解决:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
计算属性解决:
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
显然这里计算属性解决更优,不过计算属性是在Vue对象里面解决的,$watch是在对象外面解决的,计算属性更加简洁,但是$watch感觉灵活一点
7、vue中的$watch函数的运行机制是怎样的?
监控 属性
看下面的代码可以知道,$watch是监控属性的,$watch监控的属性改变,$watch也跟着改变,代码中的示例是$watch一次监控一个属性
场景描述:
一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,如何实现?
解决方法:
$watch解决:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
8、一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,并且,全名变了的话,firstName和lastName也自动跟着改变,如何实现?
计算属性 get set
用计算属性的getter和setter实现
get方法用于firstName和lastName改变的时候,全名也跟着改变
set方法用于全名变了的话,firstName和lastName也自动跟着改变
具体调用的话可以用vue对象调用fullname、firstName、lastName进行验证
1 // ... 2 computed: { 3 fullName: { 4 // getter 5 get: function () { 6 return this.firstName + ' ' + this.lastName 7 }, 8 // setter 9 set: function (newValue) { 10 var names = newValue.split(' ') 11 this.firstName = names[0] 12 this.lastName = names[names.length - 1] 13 } 14 } 15 } 16 // ...
现在在调用 vm.fullName = 'John Doe'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会有相应更新。
二、Vue.js 计算属性
1、效果动图
2、代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>wue01</title> 7 <script src="vue.min.js"></script> 8 </head> 9 <body> 10 <div id="example"> 11 a={{ a }}, b={{ b }} 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el: '#example', 17 data: { 18 a: 1 19 }, 20 computed: { 21 // 一个计算属性的 getter 22 b: function () { 23 // `this` 指向 vm 实例 24 return this.a + 1 25 } 26 } 27 }) 28 29 setTimeout(function(){ 30 vm.a=2; 31 },3000); 32 33 </script> 34 </html>
计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。
基础例子
<div id="example">
a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})
结果:
{% raw %}
<div id="example" class="demo">
a={{ a }}, b={{ b }}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
b: function () {
return this.a + 1
}
}
})
</script>
{% endraw %}
这里我们声明了一个计算属性 b
。我们提供的函数将用作属性 vm.b
的 getter。
console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
你可以打开浏览器的控制台,修改例子的 vm。vm.b
的值始终取决于 vm.a
的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b
依赖于 vm.a
,因此当 vm.a
发生改变时,依赖于 vm.b
的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。
计算属性 vs. $watch
Vue.js 提供了一个方法 $watch
,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch
很诱人 —— 特别是如果你来自 AngularJS。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch
回调。考虑下面例子:
<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
上面代码是命令式的重复的。跟计算属性对比:
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
更好,不是吗?
计算 setter
计算属性默认只是 getter,不过在需要时你也可以提供一个 setter:
// ...
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 = 'John Doe'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会有相应更新。
参考:Vue.js 计算属性_w3cschool
https://www.w3cschool.cn/vuejs/srfd1js2.html