时间:2021-05-25
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<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——特别是如果你之前使用过以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.计算属性和侦听器1.1计算属性{{message}}{{reversedMessage}}newVue({el:'#app',data:{message:'
本文实例讲述了Vue计算属性与侦听器用法。分享给大家供大家参考,具体如下:vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代
响应式侦听和计算有时我们需要依赖于其他状态的状态——在Vue中,这是用组件计算属性处理的,以直接创建计算值,我们可以使用computed方法:它接受getter
本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习。打包的一个EventUtil对象varEventUt
事件的概念事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。一、事件流1.