vue计算属性和监听属性

官网 ---- https://cn.vuejs.org/v2/guide/computed.html

computed 计算属性

在模板经常需要对数据进行各种逻辑转换,导致模板过重难以维护,如下:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

为了解决在模板中放入太多的逻辑会让模板过重且难以维护,vue开发了 computed (计算属性)。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

上面的代码,可以改写为下面的代码:

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

这样就避免了在模板中放入过多的逻辑,导致难以维护。

计算属性的缓存与方法

在上面的例子中,我们同样可以使用 method 在实现同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

1、计算属性在第一次访问时会对计算的结果进行缓存,在之后再次访问计算属性都不会重新计算,直接从缓存中取值。
2、只有当它依赖的数据发生改变时(上例中依赖的是 message),才会重新计算并更新缓存。
所以当需要进行复杂逻辑计算且依赖于其它数据多次复用时,使用计算属性可以大大减少开销

但这也意味这下面的计算属性不会更新,因为 Date.now() 不是响应式依赖:

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性的 setter

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

当执行赋值语句( vm.fullName = 'John Doe' ) 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

watch 监听属性

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

data(){
	return {
		obj: {
			a: 1
		}
	}
},

watch: {
	obj: {
	    handler(newValue, oldValue) {
	      console.log('obj.a changed');
	    },
	    // 第一次绑定后立刻执行 handler 函数
	    immediate: true,
	    // 是否深度监听,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器
	    // 但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler
	    deep: true
  	}
}

注意:在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
eg:在上面的代码中执行复制语句 this.obj.a = 2newValueoldValue 的值将相同。

watch如何监听数组的变化

如何监听数组的变化

computed 与 watch 的区别

1、computed 计算属性

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算
  • 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的值
  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用 computed
  • 如果computed属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在 computed 中的,属性都有一个 get 和一个 set 方法,当数据变化时,调用 set 方法。\

2、watch 监听属性

  • 不支持缓存,数据变,直接会触发相应的操作;
  • watch 支持异步;
  • 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 当一个属性发生变化时,需要执行对应的操作;一对多;
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论

打赏作者

碳酸金鱼。

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值