Vue计算属性、侦听器
1.计算属性 （computed） (监听数据的变化，返回计算的结果)
作用：根据已有数据计算出新数据
| <script setup> import { computed, ref } from 'vue'; let num1=ref(0) let num2=ref(0) //定义计算属性，通过计算获取到求和的结果 let addResult=computed(()=>{ //一个计算属性仅会在其响应式依赖更新时才重新计算 console.log(num1.value,num2.value); return parseFloat(num1.value)+parseFloat(num2.value) }) </script> <template> <h1>计算属性</h1> <input v-model="num1"/> + <input v-model="num2"/> = <input v-model="addResult"/> </template> |
计算属性缓存 vs 方法
计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算。
这意味着只要 num1或num2不改变，无论多少次访问 addResult 都会立即返回先前的计算结果，而不用重复执行 getter 函数。一旦其响应式依赖更新时，会重新通过计算属性进行计算。
方法调用总是会在重渲染发生时再次执行函数。
可写计算属性
计算属性默认是只读的，只提供getter函数。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：
| <script setup> import { computed, ref } from 'vue'; let firstName=ref('') let lastName=ref('') //计算属性默认是只读的，不可以修改出现警告 /*let fullName=computed(()=>{ return firstName.value+'-'+lastName.value })*/ //可读写的计算属性 let fullName=computed({ get(){ //获取计算属性值 return firstName.value+'-'+lastName.value }, set(newValue){ //返回新数组值 //修改计算属性的值 newValue：存储修改后的值 firstName.value=newValue.split('-')[0]; lastName.value=newValue.split('-')[1]; } })
</script> <template> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> 全名：<input v-model="fullName"/> </template> 应用：购物车结算、小计、修改数量 |
现在当你再运行 fullName.value 发送改变时，setter会被调用而 firstName 和 lastName 会随之更新。
2.监听器（watch） (监听数据的变化，进行额外的操作)
作用：监视数据的变化
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。
在组合式 API 中，我们可以使用 watch函数在每次响应式状态发生变化时触发回调函数。
Vue3中的watch只能监视以下四种数据：
1. ref定义的数据。
2. reactive定义的数据。
3. 函数返回一个值（getter函数）。
4. 一个包含上述内容的数组。
小结：响应式基础、数组
基本语法：
watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。
| watch(监听数据源,(newValue,oldValue)=>{
}) |
我们在Vue3中使用watch的时候，通常会遇到以下几种情况：
情况一
监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
| <script setup> import { ref, watch } from 'vue'; //数量 let num=ref(1) //+数量 function addNum(){ num.value++; |