Vue.js 计算属性是什么
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进行验证
// ...
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 计算属性
1、效果动图
2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>wue01</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="example">
a={{ a }}, b={{ b }}
</div>
</body>
<script>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
}) setTimeout(function(){
vm.a=2;
},3000); </script>
</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
Vue.js 计算属性是什么的更多相关文章
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- vue.js计算属性 vs methods
计算属性:Vue.js 模板内的表达式非常便利,但是缺点就是只能用于简单的运算,如果模板中有太多的逻辑运算会让模板不堪重负且难以维护.恰恰计算属性可以处理复杂的逻辑运算,也就是说对于任何复杂逻辑你都应 ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
随机推荐
- [Haskell]解决hslua unknown symbol `___s trtod'的问题
用cabal编译libpandoc时遇到这样的错误: HShslua-0.3.12.o: unknown symbol `___s trtod' ghc.exe: unable to load pac ...
- 10.Git远程仓库
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了.可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Git ...
- T-SQL练习题
转自:http://www.cnblogs.com/jenrrychen/p/5348546.html 1 - 3 题: 数据表结构: OrderID ProductID OrderDate Sal ...
- mysql 数据操作 单表查询 group by 聚合函数
强调: 如果我们用unique的字段作为分组的依据,则每一条记录自成一组,这种分组没有意义 多条记录之间的某个字段值相同,该字段通常用来作为分组的依据 如果按照每个字段都是唯一的进行分组,意味着按照这 ...
- [随感]GIS开发的困惑
从事GIS应用开发也有3年了,但是做了些东西自己始终不满意,不是不稳定就是效率低,不是功能杂就是不实用! 首先是AE开发,我必须说自己很欣赏ArcGIS的软件设计架构和思想.但是在开发的过程中也确实遇 ...
- [py][mx]django实现根据城市和课程机构类别过滤
实现根据城市&课程机构过滤 实现点谁谁高亮,支持取交集. 直接上代码吧 本质上是过滤,多层过滤,取交集 def get(self, request): all_orgs = CourseOrg ...
- Selenium之Chrome浏览器的启动
1.下载Chromedriver.exe文件放至需要的目录中: 2.编写代码 import org.openqa.selenium.WebDriver; import org.openqa.selen ...
- C#让应用程序只运行一个实例的几种方法
一 判断是否有相同的实例已经运行 1 根据“Mutex”判断是否有相同的实例在运行 /// <returns>已有实例运行返回true,否则为false</returns>pu ...
- （21）纹理缓存（Texture Cache）
简介 纹理缓存是将纹理缓存起来方便之后的绘制工作.每一个缓存的图像的大小,颜色和区域范围都是可以被修改的.这些信息都是存储在内存中的,不用在每一次绘制的时候都发送给GPU. CCTextureCach ...
- Hadoop mapreduce自定义分区HashPartitioner
本文发表于本人博客. 在上一篇文章我写了个简单的WordCount程序,也大致了解了下关于mapreduce运行原来,其中说到还可以自定义分区.排序.分组这些,那今天我就接上一次的代码继续完善实现自定 ...