初识Vue中计算属性，方法以及侦听器

2019年1月18日15:28:31 发表评论阅读(1,657)

本文最后更新于2019年1月17日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

计算属性，方法以及侦听器的使用在vue中非常重要，我们一起来学习一下吧。

computed（计算属性）

我们先来看一下computed（计算属性）的一个实例：

<div id="app">
{{firstName + " " + lastName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee"
}
})
</script>

以上的代码输出结果为Dell Lee，我们可以看到在插值表达式中过这样写{{firstName + " " + lastName}}，是可以输出整个名字的，但是细心的我们会发现，这样写会有一些逻辑在模板上，我们不希望在模板上写逻辑表达式，模板负责显示就好，那么我们是否可以这样写呢？写一个fullName把姓和名都写出来呢？

比如这样：

<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee",
fullName: "Dell Lee"
}
})
</script>

但是通过以上的代码，我们会发现数据发生了冗余（重复），那么我们可以用别的办法，既不产生冗余又可以把fullName显示出来呢？这个时候衍生出了computed(计算属性)这个概念，具体代码如下：

<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee",
age: 28
},
//计算属性
computed: {
fullName: function () {
console.log("计算了一次")
return this.firstName + " " + this.lastName;
}
}
})
</script>

这样一来就可以达到效果了，另外，计算属性有一个很重要的知识点自带缓存机制，缓存的机制是这样的：依赖的变量（本文中是fistName和lastName）没发生任何改变的时候，计算属性就不会重新计算了，它会用之前计算的结果，这样的话会提高一些性能，我们可以通过实例来了解一下：

console输入vm.age = "29"来试一下，作用是改变其中age的值来观察是否会打印计算了一次的文字，来判断是否有缓存机制：

我们会发现页面重新渲染了，但是没有重新计算fullName，依据是console没有打印计算了一次，因此是有缓存机制的。那么当依赖的值发生改变会怎样呢？console输入vm.firstName = “hi”，会发现console打印出了计算了一次，因此印证了我们的说法：依赖的变量（firstName）发生改变，计算属性重新计算了。