Vue.js 计算属性
Posted shi_zi_183
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 计算属性相关的知识，希望对你有一定的参考价值。
Vue.js 计算属性
通常我们会在模板中绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑，模板会变得臃肿不堪，维护变得非常困难。因此，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。
什么是计算属性
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="didi" />
<input type="text" v-model="family" />
<br>
didi=didi,family=family,didifamily=didifamily
</div>
</body>
<script>
new Vue(
el: "#example",
data:
didi: 'didi',
family: 'family'
,
computed:
// 一个计算属性的getter
didifamily: function()
return this.didi + this.family
)
</script>
</html>
当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，并且会自动同步更新DOM部分。
前面实例只提供了getter，实际上除了getter，我们还可以设置计算属性的setter。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="didi"/>
<input type="text" v-model="family"/>
<input type="text" v-model="didifamily">
<br>
didi=didi,family=family,didifamily=didifamily
</div>
</body>
<script>
new Vue(
el: "#example",
data:
didi: 'didi',
family: 'family'
,
computed:
didifamily:
// 一个计算属性的getter
get: function()
return this.didi + ' ' + this.family
,
// 一个计算属性的setter
set: function (newVal)
var names = newVal.split(' ')
this.didi = names[0]
this.family = names[1]
)
</script>
</html>
计算属性缓存
计算属性的特性的确很诱人，但是如果在计算属性方法中执行大量的耗时操作，则可能会带来一些性能问题。例如，在计算属性getter中循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算。
只有在计算依赖的属性值发生了改变时才会重新执行getter，这样存在一个问题，就是只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter。但是有时候计算属性依赖实时的非观察属性数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
example
</div>
</body>
<script>
new Vue(
el: "#example",
data:
welcome: 'welcome to join didiFamily'
,
computed:
example: function()
return Date.now() + this.welcome
)
</script>
</html>
我们需要在每次访问example时都取得最新的时间而不是缓存的时间。Vue.js 默认提供了缓存开关，在计算属性对象中指定cache字段来控制是否开启缓存。
new Vue(
el: "#example",
data:
welcome: 'welcome to join didiFamily'
,
computed:
example:
cache: false,
get: function()
return Date.now() + this.welcome
)
设置cache为false关闭缓存之后，每次直接访问vm.example时都会重新执行getter方法。
常见问题
计算属性getter不执行的场景
从前面章节中我们了解到，当计算属性依赖的数据属性发生改变时，计算属性的getter方法就会执行。但是在有些情况下，虽然依赖数据属性发生了改变，但计算属性的getter方法并不会执行。
当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<button @click="toggleShow">Toggle Show Total Price</button>
<p v-if="showTotal">Total Price = totalPrice</p>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
showTotal: true,
basePrice: 100
,
computed:
totalPrice: function ()
return this.basePrice + 1
,
methods:
toggleShow: function ()
this.showTotal = !this.showTotal
)
</script>
</html>
当点击按钮使showTotal为false时，此时P元素会被移除，在P元素内部的计算属性totalPrice的getter方法不会执行。但是当计算属性一直出现在模板中时，getter方法还是会被执行。
<div id="example">
<button @click="toggleShow">Toggle Show Total Price</button>
<p>totalPrice</p>
<p v-if="showTotal">Total Price = totalPrice</p>
</div>
以上是关于Vue.js 计算属性的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Vue.js 中创建 Date(now) 以在计算属性中使用？