详解vue 计算属性与方法跟侦听器区别(面试考点)
更新时间：2018年04月23日 09:18:17 作者：前端小智
这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
基础例子
<div id="app">
{{fullName}}
</div>
var vm = new Vue({
el: '#app',
data: {
firstName: "王",
lastName: "小智",
age: 28
},
// 计算属性
computed: {
fullName: function () {
console.log("计算了一次")
return this.firstName + " " + this.lastName
}
}
})
结果：
王小智
然后我们通过浏览器改变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属性的值，让页面重新渲染:
大家可以看到,和fullname不相关的改变，fullName没有变化，跟计算属性类似，会有缓存，只有在它的相关依赖发生改变时才会重新求值,将它与计算属性的版本进行比较,好得多了，不是吗？
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过
AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3.2是一款非常流行的JavaScript框架,它让在前端领域开发变得更加的便捷,下面这篇文章主要给大家介绍了关于VUE3.2项目使用Echarts5.4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最近在写一个关于vue的商城项目，然后集成在移动端中，开发需求中有一界面，类似淘宝商城评价界面！接下来通过本文给大家分享vue实现类似淘宝商品评价页面星级评价及上传多张图片功能，需要的朋友参考下吧2018-10-10
这篇文章主要介绍了详解Vue组件实现tips的总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
在现代的 Web 应用中,图片预览是一个常见的需求,本文将介绍如何使用 Vue3 和 TypeScript 开发一个图片预览组件,支持展示单张或多张图片,并提供了丰富的配置选项,需要的朋友可以参考下2024-04-04
本篇文章主要介绍了vue 计时器组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue3.0中setup的两个注意点，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue项目中$t()的意思是什么，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
详解从Vue.js源码看异步更新DOM策略及nextTick
本篇文章主要介绍了从Vue.js源码看异步更新DOM策略及nextTick，具有一定的参考价值，感兴趣的小伙伴们可以参考一2017-10-10
最新评论