详解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 回调。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
我们所熟知的Vue.js也在如何提取公共代码复用方面也一直在探索优化，本文小编就来和各位聊聊Vue.js代码复用的前世今生，希望对大家学习Vue有一定的帮助2023-05-05
Vue.js中的递归组件是一个可以调用自己的组件,递归组件一般用于博客上显示评论,形菜单或者嵌套菜单,文章主要给大家介绍了关于Vue3+TypeScript实现递归菜单组件的相关资料,需要的朋友可以参考下2021-08-08
unplugin-svg-component优雅使用svg图标指南
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了Vue项目中使用setTimeout存在的潜在问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue.js 父子组件通讯开发实例的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue自定义指令中无法获取this的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue使用zTree插件封装树组件操作,结合实例形式分析了vue.js整合zTree插件实现树组件与使用相关操作技巧,需要的朋友可以参考下2019-04-04
基于vue项目设置resolves.alias: ''@''路径并适配webstorm
这篇文章主要介绍了基于vue项目设置resolves.alias: '@'路径并适配webstorm,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-12-12
最新评论