Vue3+Vite 06：计算属性 computed 与侦听器 watch

一、计算属性 computed1. 作用基于已有的响应式数据派生出新的计算结果核心特性是依赖不变则结果缓存重复使用不会重复计算性能优于普通方法。适合场景需要对数据做转换、拼接、筛选且结果会被多次使用的场景。2. 基础用法计算属性默认是只读的通过return返回计算结果。最典型的场景是拼接全名template div p姓{{ firstName }}/p p名{{ lastName }}/p p全名{{ fullName }}/p button clickchangeName修改姓氏/button /div /template script setup import { ref, computed } from vue const firstName ref(张) const lastName ref(三) // 计算属性依赖两个变量自动派生全名 const fullName computed(() { return firstName.value lastName.value }) const changeName () { firstName.value 李 } /script点击按钮修改firstName后fullName会自动重新计算并更新页面。3. 核心特性计算属性和普通方法最大的区别就是缓存计算属性只要依赖的响应式数据没有变化多次访问只会计算一次后续直接返回缓存结果普通方法每调用一次就执行一次没有缓存template div h3计算属性调用3次仅计算1次/h3 p{{ fullName }}/p p{{ fullName }}/p p{{ fullName }}/p h3普通方法调用3次执行3次/h3 p{{ getFullName() }}/p p{{ getFullName() }}/p p{{ getFullName() }}/p /div /template script setup import { ref, computed } from vue const firstName ref(张) const lastName ref(三) // 计算属性 const fullName computed(() { console.log(计算属性执行了) return firstName.value lastName.value }) // 普通方法 const getFullName () { console.log(普通方法执行了) return firstName.value lastName.value } /script打开控制台可以看到计算属性只打印 1 次普通方法打印 3 次。4. 完整写法计算属性默认只读特殊场景下可以配置get和set实现可写一般用于反向修改依赖数据template div p全名{{ fullName }}/p button clicksetFullName设置全名/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(newVal) { const arr newVal.split() firstName.value arr[0] lastName.value arr.slice(1).join() } }) const setFullName () { fullName.value 李四 } /script二、侦听器 watch1. 作用监听指定的响应式数据当数据发生变化时执行对应的回调函数。适合处理数据变化后的副作用比如发送请求、操作 DOM、执行异步逻辑等。2. 基础用法监听一个ref数据变化时触发回调回调函数接收新值和旧值两个参数。template div p计数{{ count }}/p button clickcount1/button /div /template script setup import { ref, watch } from vue const count ref(0) // 监听count变化 watch(count, (newVal, oldVal) { console.log(新值, newVal) console.log(旧值, oldVal) console.log(数据变化了执行对应操作) }) /script3. 监听多个数据源可以传入数组同时监听多个数据任意一个变化都会触发回调const count ref(0) const name ref(张三) watch([count, name], ([newCount, newName], [oldCount, oldName]) { console.log(count或name变化了) })4. 深度监听 deep当监听的是对象 / 数组时默认只能监听到整个对象的替换监听不到内部属性的变化需要开启deep: true开启深度监听。注意监听reactive定义的对象默认自动开启深度监听无需手动加deep监听ref定义的对象默认浅监听必须手动加deep: true才能监听内部属性template div p姓名{{ user.name }}/p button clickchangeName修改姓名/button /div /template script setup import { ref, watch } from vue const user ref({ name: 张三, age: 20 }) // ref对象必须加deep才能监听内部属性变化 watch(user, (newVal) { console.log(用户信息变化了, newVal) }, { deep: true }) const changeName () { user.value.name 李四 } /script5. 立即执行 immediate默认watch只有数据变化时才触发加上immediate: true后页面初始化时就会立即执行一次回调。watch(count, (newVal) { console.log(执行了, newVal) }, { immediate: true // 初始化立即执行一次 })6. 监听对象的单个属性如果只需要监听对象的某一个属性不用监听整个对象用函数返回指定属性即可性能更好const user reactive({ name: 张三, age: 20 }) // 只监听name属性 watch(() user.name, (newVal) { console.log(name变化了, newVal) })三、computed 与 watch 对比特性computed 计算属性watch 侦听器核心作用派生新数据有返回值监听数据变化执行副作用无返回值要求缓存特性支持缓存依赖不变不重新计算无缓存数据变化就执行异步操作不支持必须同步返回结果支持发送请求、定时器等使用场景数据转换、拼接、筛选数据变化后发请求、操作 DOM、执行复杂逻辑四、总结computed用于派生新数据自带缓存性能优优先用于数据转换场景watch用于监听数据变化执行副作用支持深度监听、立即执行适合异步、复杂逻辑