详解vue 计算属性与方法跟侦听器区别(面试考点)
2018-04-23 09:18
916 查看
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<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中methods(方法)、computed(计算属性)、watch(侦听器)的区别
- Vue 计算属性,方法和侦听器
- Vue.js中计算属性和方法的区别
- 详解Vue的computed(计算属性)使用实例之TodoList
- vue计算属性computed和methods的区别
- vue从入门到进阶:计算属性computed与侦听器watch(三)
- vue 计算属性computed和观察watch 和方法methods
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- 关闭Vue计算属性自带的缓存功能方法
- 关于computed(计算属性) methods watched (VUE)区别
- vue中的计算属性的使用和vue实例的方法示例
- vue计算属性详解——小白速会
- vue 更改计算属性后select选中值不更改的解决方法
- vue生命周期、computed属性和 method方法、watch 属性区别
- JAVA length属性和length()方法和size()方法的区别详解
- vue的计算属性(computed)、methods、watched三者区别
- vue中计算属性和watch的区别
- vue.js使用之计算属性与方法返回的差别
- VUE--(2)计算属性和侦听器
- 关于vue的使用计算属性VS使用计算方法的问题