003-读书笔记-Vue官网 计算属性与监听器

1.计算属性

1-1 计算属性概述

计算属性也是 Vue 实例的属性，和 data 方法中返回的对象中的属性是等同的存在。通常来说，计算属性可以简单理解：

1. 计算属性其实就是 Vue 实例的一个属性
2. 计算属性一般依赖传统的 Vue 实例属性
3. 计算属性一般是通过运算得到的属性

如果要更加深入的理解计算属性，可以往下看。

1-2 搭建HTML结构

由于计算属性有几个特性，需要做一些测试，虽然这些测试可以在 vue-devtools 中调试查看，但是肯定没有在页面上看着更直观，因此，搭建一下简单的 HTML 结构，更好的查看最终的执行效果：

<template>
  <div id="app">
    <h2>常规属性：</h2>
    <div>文本框1号：<input type="text" v-model="inpVal" placeholder="常规属性"></div>
    <p>文本框中输入：{{inpVal}}</p>

    <hr>

    <h2>计算属性：</h2>
    <div>文本框2号：<input type="text" v-model="comInpVal" placeholder="计算属性"></div>
    <p>计算属性的值：{{comInpVal}}</p>
  </div>
</template>

展示的效果如下图：

现在基本结构已经搭建完成了，下面就是写一些 JavaScript 代码来操作这些属性了。

1-3 计算属性的简单使用

为了递进式的了解计算属性，首先我们来看看，计算属性是如何通过常规属性计算得到一个新的属性的。

这里沿用官网给出的例子，将常规属性反转得到计算属性。

<script>
  export default {
    name: 'app',
    data() {
      return {
        inpVal: ''
      }
    },
    computed: {
      comInpVal() {
        return this.inpVal.split('').reverse().join('')
      }
    }
  }

</script>

这个时候，聚焦到的 DOM 元素有 文本框1号 文本框中输入 计算属性的值，会发现计算属性会随着常规属性的输入，输出常规属性的反转形式：

可以发现，上面的计算属性是一个函数，返回值就是计算属性的值，而计算得到的值是依赖 Vue 的实例属性 inpVal

1-4 计算属性的get与set

get说明：

上面的计算属性只是一种简写方式，完整的写法如下：

    computed: {
      comInpVal: {
        get() {
          return this.inpVal.split('').reverse().join('')
        }
      }
    }

其实在写计算属性的时候，默认指定的是计算属性的 get 方法。因此，可以得出两个结论：

1. 在计算属性不需要设置值的时候，可以只写出 get 方法，并使用简写的形式
2. 计算属性的 get 方法必须指定返回值，返回值作为计算属性的最终值

set说明：

既然存在了 get 方法来获取值，是不是就存在 set 方法来设置值呢？答案是肯定的，这也是结构中 文本框2号 存在的意义。

现在我们在 文本框2号 中输入内容，会发现谷歌人员开发工具中会报错。

[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.

从报错信息中，说明了没有指定 setter，因此不能对计算属性进行值的设置。如果我非要设置，并且还不让它报错，怎么办？
这个时候就可以指定 set 方法了。

下面我们指定 set 方法，通过计算属性的设置来得到常规属性的反转值：

    computed: {
      comInpVal: {
        get() { // get方法：获取值
          return this.inpVal.split('').reverse().join('')
        },
        set(val) { // set方法：设置值
          this.inpVal = val.split('').reverse().join('')
        }
      }
    }

这个时候，再次在 文本框2号 中输入内容，不会出现任何错误。至此，获取计算属性的值和设置计算属性的值都已经学习完成了。

2.监听器

监听器的作用就是监视 Vue 实例中的内容变化的。

2-1 搭建简单的HTML结构

这次我们查看效果的时候，主要是在谷歌开发工具中的控制台中，因此，搭建一个简单的结构就好：

<template>
  <div id="app">
    <input type="text" v-model="inpVal" placeholder="输入内容">
  </div>
</template>

2-2 简单使用监听器

下面我们补充一下监听器，用来监听 inpVal 属性：

<script>
  export default {
    name: 'app',
    data() {
      return {
        inpVal: ''
      }
    },
    watch: {
      inpVal() {
        console.log(this.inpVal)
      }
    }
  }

</script>

通过代码会发现，监听器写在 watch 中。需要监听哪个属性，就把属性的名字写在监听器中。

在输入框中不断输入内容，就会看到随着内容的输入，控制台中的内容也是不断变化的。

2-3 监听器的第一个参数

在代码中可以看到，监听器是一个函数，如果是函数，那么应该就可以存在参数，下面指定第一个参数。

    watch: {
      inpVal(newVal) {
        console.log(this.inpVal === newVal)
      }
    }

在文本框中输入内容的时候，会发现，控制台中输入的结果始终是 true，这说明，第一个参数就是监视的属性值。
因此，如果只需要得到最终的结果的情况下，参数可以省略不写。

2-4 监听器的第二个参数

监听器的第一个参数是新输入的值，那第二个参数就是旧值。让我们写出两个参数对比一下：

    watch: {
      inpVal(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }

在输入框中输入内容，会发现控制台中输出的效果如下：

1
12 1
123 12

可以发现，在 123 输入的时候，12 是前一个值。这个时候，就很清楚的知道，123 是新值，前一个值是旧值。

2-5 总结

监听器的一般写法：

    watch: {
      inpVal() {
        // ...
      }
    }

监听器的完整写法，指定两个参数：

    watch: {
      inpVal(newVal, oldVal) {
        // ...
      }
    }

3.参考内容

• 计算属性和观察者