前言

这是我在掘金坚持日更的第 35 天

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

本系列相关文章如下：

基础类

手写实现类

本文是第6篇，关于Vue中的配置选项：计算属性和监听器

看文本篇，你将会对这两个选项有个清晰的认识

本文目录结构如下：

计算属性

此处分3小点来讲：

1. 什么是计算属性

计算属性是组件的配置选项之一：computed

{
  //...
  computed:{}
}
复制代码

本质是一个对象，里面包含一系列的属性，一系列的属性对应的值可能是方法也可能是对象

  computed: {
    //方法
    sum(){
      //...
    },
    //对象
    average: {
        // getter
        get() {
          //...
        },
        // setter
        set(newValue) {
            //...
        }
    }    
  }
复制代码

2. 它有什么作用

在模板中，我们往往希望表达式简短、易读，但是有的时候表达式可能变得复杂，复杂的表达式会让模板变得复杂和难以维护，如下展示学生的总分和平均分：

<template>
  <table border="1">
      <thead>
          <th>学科</th>
          <th>分数</th>
      </thead>
      <tbody>
          <tr>
              <td>语文</td>
              <td><input type="text" v-model="Chinese"></td>
          </tr>
          <tr>
              <td>数学</td>
              <td><input type="text" v-model="math"></td>
          </tr>
          <tr>
              <td>英语</td>
              <td><input type="text" v-model="English"></td>
          </tr>           
          <tr>
              <td>总分</td>
              <td>{{math + English + Chinese}}</td>
          </tr>
          <tr>
              <td>平均分</td>
              <td>{{(math + English + Chinese)/3}}</td>
          </tr>
      </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      math: 88,
      English: 77,
      Chinese: 99,
    }
  }
}
</script>
复制代码

上述代码中，虽然能展示最后的结果，但是{{}}里面变得特别不清晰，特别是当运算更复杂时，这种代码简直头大，那怎么办？

你可能能会想到methods

没错，确实methods也可以！但是如果使用计算属性会更好，原因是：计算属性不但能解决上述问题，而且还具有缓存效果，当依赖数据未发生变化，调用的是之前缓存的数据，从而提升了性能

所以我可以修改上例，添加计算属性

computed: {
    sum() {
        console.log('调用了计算属性：sum');
        return this.math + this.English + this.Chinese;
    },
    average() {
        console.log('调用了计算属性：average');
        return Math.round(this.sum / 3);
    }
}
复制代码

于是模板变得一目了然

<tr>
  <td>总分</td>
  <td>{{sum}}</td>
</tr>
<tr>
  <td>平均分</td>
  <td>{{average}}</td>
</tr>
复制代码

并且当多次调用时，只要依赖没有发生变化，就不会重复计算，即调缓存数据

<tr>
  <td>总分</td>
  <td>{{sum}}</td>
</tr>
<tr>
  <td>总分</td>
  <td>{{sum}}</td>
</tr>
复制代码

结果如下

可以看到确实只调用了一次sum

3. 建议

对于任何包含响应式数据的复杂逻辑的表达式，都建议使用计算属性

监听器

此处分3小点来讲：

1. 什么是监听器

监听器watch，跟computed一样，也组件配置选项之一

{
    data() {
        return {
          count:1
        }
    },
    watch: {
        //...
    }
}
复制代码

本质是一个对象，里面包含一系列的方法，这些方法的方法名与要监听的属性名一致

watch: {
    count(){...},
    //...
}
复制代码

2. 它有什么作用

可以利用它来自定义监听器，用于监听想监听的响应式数据。

<template>
  <h1>{{ count }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0
    }
  },
  watch:{
    count(val){
      console.log('执行了监听器count');
    }
  },
  mounted(){
    this.count ++
  }
}
</script>
复制代码

特别是当需要在数据变化时执行异步或开销较大的操作时，这个方法很有效

比如官网提供的这个例子：

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>
复制代码

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      // whenever question changes, this function will run
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }
  }).mount('#watch-example')
</script>
复制代码