Vue (04) 计算器和侦听器

1、计算器 computer

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

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

使用计算属性：

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

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

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

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

2、侦听器 watch

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

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

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

2.1 深度监听

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

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

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

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

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

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