vue计算属性与方法跟侦听器区别的解析

来源：动视网责编：小采时间：2020-11-27 19:34:36

vue计算属性与方法跟侦听器区别的解析

vue计算属性与方法跟侦听器区别的解析:这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),内容挺不错的，现在分享给大家，也给大家做个参考。计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<p

推荐度：

点击下载本文 文档为doc格式

导读vue计算属性与方法跟侦听器区别的解析:这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),内容挺不错的，现在分享给大家，也给大家做个参考。计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<p

然后我们通过浏览器改变age属性的值，让页面重新渲染:

大家可以看到，我们改变了age值计算属性的方法没有被调用,那如果计算属性的值发生了改变，如lastName或者firstName改变，打印结果又会怎么样呢?

大家可以看到，当他依赖的发生变化的时候，计算属性会重新计算一次。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:

<p>Reversed message: "{{ fullName() }}"</p>


// 在组件中
methods: {
 fullName: function () {
 console.log("计算了一次")
 return this.firstName + " " + this.lastName;
 }
}

结果：

王小智

同样参照上面，我们通过浏览器改变age属性的值，让页面重新渲染:

可以看出，我们页面只要重新渲染，方法都会执行一次，而计算属性只有在它的相关依赖发生改变时才会重新求值。

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性 vs 侦听属性

你可能已经注意到我们还可以通过侦听属性达到同样的效果:

var vm = new Vue({
 el: '#app',
 data: {
 firstName: "王",
 lastName: "小智",
 age: 28，
 fullName
 },
 // 计算属性
 watch: {
 firstName: function () {
 console.log("计算了一次");
 this.fullNmae = this.firstName + this.lastName;
 },
 lastName: function () {
 console.log("计算了一次")
 this.fullNmae = this.firstName + this.lastName;
 }
 }
})

结果：

王小智

同样参照上面，我们通过浏览器改变age属性的值，让页面重新渲染: