Vue3核心语法进阶（computed与监听）

前言：上一篇computed没讲但是用到了，所以这篇仔细讲解一些computed和监听，监听分为：手动监听和自动监听，手动监听又分为...往下看

Vue3进阶指南：从零到精通

Vue3作为前端开发的热门框架，其强大的功能和灵活的API让无数开发者为之着迷。今天，我们就来深入探讨Vue3的核心语法进阶知识，帮助大家从零开始，逐步掌握Vue3的精髓。

一、计算属性：computed

1.1 计算属性的基本概念

计算属性（computed）是Vue3中一个非常强大的功能，它可以根据已有的数据计算出新的数据。计算属性的作用和Vue2中的computed一致，但它在Vue3中有了更灵活的使用方式。

1.2 只读计算属性

只读计算属性是指只能读取，不能修改的属性。例如，我们有一个firstName和lastName，我们可以通过计算属性生成一个fullName：

<template>
  <div>
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => `${firstName.value}-${lastName.value}`)
</script>

在这个例子中，fullName是一个只读计算属性，它会根据firstName和lastName的变化自动更新。

1.3 可读写计算属性

除了只读计算属性，我们还可以定义可读写的计算属性。这意味着我们不仅可以读取它的值，还可以修改它的值。例如：

<template>
  <div>
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span>
    <button @click="changeFullName">全名改为：李四</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
  get() {
    return `${firstName.value}-${lastName.value}`
  },
  set(val) {
    const [newFirstName, newLastName] = val.split('-')
    firstName.value = newFirstName
    lastName.value = newLastName
  }
})

function changeFullName() {
  fullName.value = '李-四'
}
</script>

在这个例子中，我们可以通过点击按钮修改fullName的值，同时firstName和lastName也会相应地更新。

二、监听器：watch

2.1 监听器的基本概念

watch是Vue3中用来监视数据变化的工具。它可以监视ref、reactive定义的数据，以及函数返回的值。当监视的数据发生变化时，watch会触发一个回调函数。

2.2 监听ref定义的数据

2.2.1 监听基本类型数据

我们可以直接监视ref定义的基本类型数据。例如：

<template>
  <div>
    当前求和为：{{ sum }}
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const sum = ref(0)

function changeSum() {
  sum.value += 1
}

watch(sum, (newValue, oldValue) => {
  console.log(`sum从${oldValue}变为了${newValue}`)
})
</script>

在这个例子中，当sum的值发生变化时，watch会触发回调函数，并打印出新旧值。

2.2.2 监听对象类型数据

如果ref定义的是一个对象类型数据，我们需要注意监视的是对象的地址值。如果需要监视对象内部的数据，需要手动开启深度监视。例如：

<template>
  <div>
    姓名：{{ person.name }}<br>
    年龄：{{ person.age }}<br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const person = ref({ name: '张三', age: 18 })

function changeName() {
  person.value.name += '~'
}

function changeAge() {
  person.value.age += 1
}

function changePerson() {
  person.value = { name: '李四', age: 90 }
}

watch(person, (newValue, oldValue) => {
  console.log(`person从${oldValue}变为了${newValue}`)
}, { deep: true }) // 开启深度监视
</script>

在这个例子中，我们开启了深度监视，因此当person对象内部的属性发生变化时，watch也会触发回调函数。

2.3 监听reactive定义的数据

reactive定义的对象类型数据默认开启了深度监视。例如：

<template>
  <div>
    姓名：{{ person.name }}<br>
    年龄：{{ person.age }}<br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
const person = reactive({ name: '张三', age: 18 })

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changePerson() {
  person = { name: '李四', age: 90 }
}

watch(person, (newValue, oldValue) => {
  console.log(`person从${oldValue}变为了${newValue}`)
})
</script>

在这个例子中，reactive定义的person对象默认开启了深度监视，因此当person对象内部的属性发生变化时，watch会触发回调函数。

2.4 监听对象中的某个属性

我们可以监视ref或reactive定义的对象类型数据中的某个属性。如果该属性是基本类型，需要写成函数形式；如果该属性是对象类型，可以直接写，也可以写成函数形式，但更推荐写成函数形式。例如：

<template>
  <div>
    姓名：{{ person.name }}<br>
    年龄：{{ person.age }}<br>
    汽车：{{ person.car.c1 }}、{{ person.car.c2 }}<br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
const person = reactive({
  name: '张三',
  age: 18,
  car: { c1: '奔驰', c2: '宝马' }
})

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changeC1() {
  person.car.c1 = '奥迪'
}

function changeC2() {
  person.car.c2 = '大众'
}

function changeCar() {
  person.car = { c1: '雅迪', c2: '爱玛' }
}

watch(() => person.name, (newValue, oldValue) => {
  console.log(`person.name从${oldValue}变为了${newValue}`)
})

watch(() => person.car, (newValue, oldValue) => {
  console.log(`person.car从${oldValue}变为了${newValue}`)
}, { deep: true })
</script>

在这个例子中，我们通过函数形式监视了person.name和person.car的变化。

2.5 监听多个数据

我们还可以同时监视多个数据。例如：

<template>
  <div>
    姓名：{{ person.name }}<br>
    年龄：{{ person.age }}<br>
    汽车：{{ person.car.c1 }}、{{ person.car.c2 }}<br>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
const person = reactive({
  name: '张三',
  age: 18,
  car: { c1: '奔驰', c2: '宝马' }
})

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changeC1() {
  person.car.c1 = '奥迪'
}

function changeC2() {
  person.car.c2 = '大众'
}

function changeCar() {
  person.car = { c1: '雅迪', c2: '爱玛' }
}

watch([() => person.name, person.car], (newValue, oldValue) => {
  console.log(`person.name从${oldValue[0]}变为了${newValue[0]}`)
  console.log(`person.car从${oldValue[1]}变为了${newValue[1]}`)
}, { deep: true })
</script>

在这个例子中，我们同时监视了person.name和person.car的变化。

三、自动监听：watchEffect

watchEffect是Vue3中一个非常强大的功能，它可以让一个函数自动响应式地追踪其依赖，并在依赖更改时重新执行该函数。

3.1 watch vs watchEffect

• watch需要明确指出监视的数据。

• watchEffect不需要明确指出监视的数据，它会自动追踪函数中用到的响应式数据。

3.2 使用示例

例如，我们有一个需求：当水温达到50℃或水位达到20cm时，联系服务器。我们可以使用watch或watchEffect来实现：

<template>
  <div>
    水温：{{ temp }}<br>
    水位：{{ height }}<br>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+1</button>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
const temp = ref(0)
const height = ref(0)

function changeTemp() {
  temp.value += 10
}

function changeHeight() {
  height.value += 1
}

// 使用watch实现
watch([temp, height], (value) => {
  const [newTemp, newHeight] = value
  if (newTemp >= 50 || newHeight >= 20) {
    console.log('联系服务器')
  }
})

// 使用watchEffect实现
const stopWatch = watchEffect(() => {
  if (temp.value >= 50 || height.value >= 20) {
    console.log('联系服务器')
  }
  if (temp.value === 100 || height.value === 50) {
    console.log('清理了')
    stopWatch()
  }
})
</script>

在这个例子中，watchEffect会自动追踪temp和height的变化，并在满足条件时执行回调函数。

好啦computed和监听就到这里拉，接下来是生命周期的讲解拉