vue修改计算属性的值_6.3 vue核心知识:什么是vue的计算属性?其缓存和方法调用的区别...

问题:什么是vue的计算属性?

计算属性:


模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

{{ message.split('').reverse().join('') }}

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,都应当使用计算属性

例子:

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})

结果:

Original message: "Hello"Computed reversed message: "olleH"

编辑器:

2808a9c3c9becb1f416773c0f3cf0a83.png

请说出计算属性的缓存和方法调用的有什么区别?

  1. 计算属性必须返回结果
  2. 计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。
  3. 使用计算属性还是methods取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。
  4. 计算属性是根据依赖自动执行的,methods需要事件调用
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页