开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言

前面几章需要了解的也了解了，开发环境也搭建好了，工程也有了，下面需要学习计算属性与监视了，让我们一起学习吧

1、computed函数

举例：我们要通过计算属性计算一个人的全名，我们可以简写，返回一个拼接字符串，但是这种呢，没办法修改计算属性，所以就要利用get，set实现修改计算属性的功能，完整代码如下所示：

<template>
    <h1>姓：<input type="text" v-model="person.firstName"></h1>
    <h1>名：<input type="text" v-model="person.lastName"></h1>
    <h1>全名：<input type="text" v-model="person.fullName"></h1>
  </template>
  <script>
import { reactive, computed } from 'vue'
  export default {
    name: 'DemoTest',
    setup() {
      // 数据
      let person = reactive({
        firstName: '张',
        lastName: '三'
      })
      // 计算属性-简写(没有考虑计算属性被修改的情况)
      /* person.fullName = computed(() => {
        return person.firstName+person.lastName
      }) */
      // 完整写法(考虑读和写)
      person.fullName = computed({
         get() {
          return person.firstName + '-' + person.lastName
         },
         set(value) {
          const nameArr = value.split('-')
          person.firstName = nameArr[0]
          person.lastName = nameArr[1]
         }
      })
      return {
        person
      }
    }
  }
  </script>

2、watch函数

vue3中的watch是一个组合式的API,需要引入watch,写一个watch函数，为什么是函数呢？因为这个组合API就是一堆内置的函数。监视有以下几种情况，

监视ref所定义的一个响应式数据
监视ref所定义的多个响应式数据
监视reactive所定义的一个响应式数据,但是有两个问题
- 无法正确获取oldValue，暂时无法解决，如果不需要oldValue可以使用。
- 强制开启了深度监视，deep配置无效
监视reactive所定义的一个响应式数据中的某个属性
情况五：监视reactive所定义的一个响应式数据中的某些属性
另外还有一种特殊情况，监视的是job，改的是salary的值，需要加{deep:true}才能监视到

上面这几种是需要我们点击按钮调用了方法才执行的，如果我们想一进页面就执行一遍方法，要怎么做呢？watch前两个参数有了，第一个告诉我们监视谁，第二个是监视的回调，我们要加上第三个参数，即监视的配置{immediate: true}。具体实现代码如下：

<template>
    <h1>当前求和为：{{sum}}</h1>
    <button @click="sum++">点击+1</button>
    <hr>
    <h1>当前的信息为：{{msg}}</h1>
    <button @click="msg+='!'">修改信息</button>
    <hr>
    <h1>姓名：{{person.name}}</h1>
    <h1>年龄：{{person.age}}</h1>
    <h1>薪资：{{person.job.j1.salary}}K</h1>
    <button @click="person.name+='~'">修改信息</button>
    <button @click="person.age++">修改信息</button>
    <button @click="person.job.j1.salary++">涨薪</button>
  </template>
  <script>
  import { reactive, ref, watch } from 'vue';
  export default {
    name: 'DemoTest',
    setup() {
      // 数据
      let sum = ref(0)
      let msg = ref('你好啊')
      let person = reactive({
        name: '张三',
        age: 18,
        job: {
          j1: {
            salary: 20
          }
        }
      })
      // 情况一：监视ref所定义的响应式数据
     /*  watch(sum,(newValue,oldValue)=> {
        console.log('sum变了', newValue, oldValue)
      },{immediate: true}) */

      // 情况二：监视ref所定义的多个响应式数据
     /*  watch([sum,msg], (newValue,oldValue) => {
        console.log('sum或msg变了', newValue, oldValue)
      },{immediate: true}) */

      // 情况三：监视reactive所定义的一个响应式数据,注意：问题1，就是无法正确获取oldValue；问题2，强制开启了深度监视（deep配置无效）
     /*  watch(person,(newValue,oldValue)=> {
        console.log('person变了', newValue, oldValue)
      }) */

      // 情况四：监视reactive所定义的一个响应式数据中的某个属性
     /*  watch(()=>person.age,(newValue,oldValue)=> {
        console.log('person的age变了', newValue, oldValue)
      }) */

      // 情况五：监视reactive所定义的一个响应式数据中的某些属性
      /* watch([()=>person.age,()=>person.name],(newValue,oldValue)=> {
        console.log('person的age或name变了', newValue, oldValue)
      }) */

      // 特殊情况:监视的是job，改的是salary的值，需要加{deep:true}才能监视到
      watch(()=>person.job,(newValue,oldValue)=> {
        console.log('person的job变了', newValue, oldValue)
      },{deep: true})

      // 返回一个对象(常用)
      return {
         sum,
         msg,
         person
      }
    }
  }
  </script>

如果上述代码中的person是用ref定义的，我们要对它进行监视，直接写person监视不起作用，我们实现监视一种方法是监视person.value，另一种方法是加{deep:true}。

3、watchEffect函数

跟watch一样是做监视的，但是watchEffect不告诉我们它监视谁，第一个参数就是回调，回调里面还没有参数，一进入页面就监视一次。
watchEffect比较智能，我们在调用里面用到了哪个属性，watchEffect就监视谁。
watchEffect有点像computed,不过computed注重技术出来的值，必须有返回值，而watchEffect注重过程，不用写返回值。

watchEffect(()=> {
   const x1 = sum.value
   console.log('watchEffect所指定的回调执行了',x1)
})

结束语

本来打算下一章学一下生命周期，但是发现生命周期变化不大，使用的时候按照官网直接使用就好，这样Vue3的学习就先写到这里，其他的会在项目中学习了解记录，自主学习的就先记录到这一章吧。

Vue3开发（六）之计算属性与监视

前言

1、computed函数

2、watch函数

3、watchEffect函数

结束语