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.参考内容

• 计算属性和观察者