Vue3进阶<4>计算属性（computed）/watch/综合案例

computed

先看一个案例

我们有两个变量：firstName和lastName，希望它们拼接之后在界面上显示；

html 复制代码

<template>
<div class="demo">
  fullName的值：{{fullName}}
</div>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
const firstName = ref("张")
const lastName = ref("三")
const fullName = computed(()=>{
  return firstName.value + lastName.value;
})
</script>

此时页面显示

fullName的值：张三

一个简单的Vue3 使用computed 的案例就完成了，但是我们发现这样的一个fullName拼接我们用方法methods也可以实现 为什么要用computed呢？

带着这个疑问我们看下面这个例子

html 复制代码

<div class="demo">
  computed获取fullName的值1：{{fullName}}<br>
  computed获取fullName的值1：{{fullName}}<br>
  computed获取fullName的值3：{{fullName}}<br>
  方法getFullName获取fullName的值1：{{getFullName()}}<br>
  方法getFullName获取fullName的值2：{{getFullName()}}<br>
  方法getFullName获取fullName的值3：{{getFullName()}}<br>
</div>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
const firstName = ref("张")
const lastName = ref("三")
const fullName = computed(()=>{
  console.log("调用了计算属性computed");
  return firstName.value + lastName.value;
})
const getFullName = () =>{
  console.log("调用了方法getFullName");
  return firstName.value + lastName.value;
}
</script>

上面的例子我们我们分别使用三次计算属性和getFullName方法获取fullName的值，打印结果如下

页面显示

由打印结果可以看出 computed调用了一次 getFullName调用了三次

上面的例子我们可以看出

computed计算属性缓存在数据不发生变化时，计算属性是不需要重新计算的，只有依赖的值发生变化才重新进行计算

计算属性的setter和getter

例子：

html 复制代码

<template>
<div class="demo">
  computed获取fullName的值：{{fullName}}<br>
  <button @click="setNewName">设置新名字</button>
</div>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
const firstName = ref("张")
const lastName = ref("三")
const fullName = computed({
  get: () => firstName.value + lastName.value,
  set: (val) => {
    console.log(val);
    firstName.value="王"
    lastName.value="小二"
  }
})
// const getFullName = () =>{
//   console.log("调用了方法getFullName");
//   return firstName.value + lastName.value;
// }
const setNewName = () =>{
  fullName.value = "王"
}

此时页面显示的是fullName为王小二只有给计算属性fullName设置值才会触发set方法

1.get()和set() 计算属性默认有自己的get()和set().

get()属性有以下特点:

(1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。

set()属性的特点:

(1)当给计算属性设置值的时候会触发set()

(2)如果计算属性要被修改，那必须写set函数去响应修改,set函数可以接收用户修改计算属性的值

watch

在Vue3中，watch特性进行了一些改变和优化。与computed不同，watch通常用于监听数据的变化，并执行一些回调，例如发送网络请求、更新DOM等

先看一个案例：

一个输入框输入年份然后计算出年龄

html 复制代码

<template>
<div class="demo">
  <input type="text" v-model="value" placeHolder="请输入出生年月"  >
  <p>当前的周岁年龄为:{{age}}</p>
</div>
</template>
<script setup lang="ts">
import {ref,watch} from "vue";

const value = ref("")
const age = ref(0)
//监听value
watch(value,(newValue,oldValue)=>{
  console.log("监听到了value的变化")
  console.log(newValue,oldValue);
  age.value=new Date().getFullYear()-new Date(value.value).getFullYear();
})

页面：

监听reactive定义的响应式数据

html 复制代码

<template>
<div class="demo">
  <input type="text" v-model="people.value" placeHolder="请输入出生年月"  >
  <p>当前的周岁年龄为:{{people.age}}</p>
</div>
</template>
<script setup lang="ts">
import {ref,watch,reactive} from "vue";

const people=reactive({
  age:0,
  value:"",
})
//people
watch(people,(newValue,oldValue)=>{
  console.log("监听到了value的变化")
  console.log(newValue.value,oldValue.value);
  people.age=new Date().getFullYear()-new Date(people.value).getFullYear();
})
</script>

若watch监视的是reactive定义的响应式数据，则无法正确获得 oldValue！！
若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
若watch监视的是用ref实现深层次对象的响应式，侦听的时候需要开启深度侦听

immediate

immediate（inmi饿车）选项可以用于指定watch在组件创建时立即执行一次回调函数，而不必等待数据的变化

deep

deep选项可以用于深度监听一个对象或数组的变化。当我们监听一个对象或数组时，默认情况下只会监听对象或数组的引用变化，而不会监听其内部数据的变化。如果我们需要深度监听对象或数组内部数据的变化，可以使用deep选项

watchEffect函数

js 复制代码

let obj = reactive({
  name:'zs'
});
watchEffect(() => {
  console.log('name:',obj.name)
})

watch的套路是：既要指明监视的属性，也要指明监视的回调。watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调

watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。