学然后知不足,教然后知困。知不足,然后能自反也;知困,然后能自强也

0%

Vue (04) 计算器和侦听器

1、计算器 computer

我们知道,在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量,我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称,我们就需要写多个

这就要用到我们将要学习到的computed计算属性。

image-20201229104050193

使用计算属性:

image-20201229104115633

每个计算属性都包含一个getter和一个setter。在上面的例子中,我们只是使用getter来读取。在某些情况下,也可以提供一个setter方法。

计算属性实现了2种监听方式:

  • 一是监听计算因子的变化(get方法):即firstName属性和lastName属性的变化,任何一个计算因子发生变化都会导致计算属性fullName重新计算。
  • 二是监听计算属性fullName本身的变化(set方法):即当fullName发生变化时,可以被监听到并触发set方法,我们可以去做一些动作。

image-20201229105321541

我们可能会考虑这样的一个问题:methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?
原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。

2、侦听器 watch

除了计算属性,Vue还提供了另外一种方式实现对属性变化的监听,watch 侦听器,同样是上面的需求:

image-20201229111846355

我们什么情况下要去使用属性侦听watch呢?

watch属性侦听的方法可以传入两个参数,一个是新值newVal,一个是旧值oldVal。即当我们需要知道数据由什么变成了什么的时候,watch属性侦听是不二之选。

2.1 深度监听

  • 侦听对象的属性,侦听数组的变化

  • 侦听一个属性,都是属性发生变化时,才调用回调函数,我们想在初始化的时候直接调用一次该怎么做?

image-20201229120217272

  • player是一个对象,当我们需要侦听对象属性的变化时,需要设置参数deep:true。否则侦听无效。注意监听数组的变动时不需要设置deep:true(前提是要用数组响应式函数操作数组,直接通过数组下标操作数组不是响应式的,也无法被侦听到。)。
  • 当我们希望页面加载的时候,handler方法就被调用(可用于数据初始化)。需要设置参数immediate:true。否则只有在侦听属性发生变化时,handler才会被调用。

如果我们只是想侦听对象某一个属性,该怎么办?

1
2
3
'player.firstName':function(){
console.log("player.firstName-handler函数被调用")
}

侦听对象player的属性firstName,用引号括起来。不用加deep:true。