computed:
写法：
import {computed} from 'vue'
setup(){
---
//计算属性—简写
let fullName = computed(()=>{
return person.firstName + '-' + person. lastName})
//计算属性-完整
let fullName = computed({
get(){
return person.firstName + '-' +person. lastName},
set(value){
const nameArr = value.split( '-')person.firstName = nameArr[e]person. lastName = nameArr[1]
})
}
watch,第一个参数是要监听的对象，第二个参数是监听的方法，第三个参数是监听的配置
两个小“坑”:
1.监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。
2.监视reactive定义的响应式数据中某个属性时: deep配置有效。
数据：
情况一:监视ref所定义的一个响应式数据
watch(sum, (newValue,oldvalue)=>{
console.log('sun变了', newValue,oldValue)},{immediate:true})
情况二:监视ref所定义的多个响应式数据
watch([sum,msg], (newValue,oldvalue)=>{
console.log( 'sum或msg变了' ,newValue,oldValue)},{immediate:true})
情况三:监视reactive所定义的一个响应式数据的全部属性
watch(person, (newValue,oldValue)=>{
console.log( 'person变化了',newValue,oldValue)}.{deep:false})
//此处的deep配置无效
情况四:监视reactive所定义的一个响应式数据中的某个属性
watch(()=>person.name ,(newValue,oldValue)=>{
console.log( ' person的name变化了', newValue,oldvalue)})
情况五:监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name,()=>person.age], (newValue,oldvalue)=>{console.log( 'person的name或age变化了' , newValue,oldValue)
})
特殊情况
watch(()=>person.job,(newValue,oldvalue)=>{
console.log( 'person的job变化了' , newValue,oldValue)
}, { deep:true})
//此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
watch和value的问题：
如果我们将上面监视person的reactive改成ref那么如何进行监视？？
这个里面的value才是reactive生成的！！！
写法1：
写法2：
watchEffect函数
不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。文章来源：https://www.toymoban.com/news/detail-424240.html
文章来源地址https://www.toymoban.com/news/detail-424240.html
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
const x1 = sum.valueconst x2 = person. age
c6nsole.log( ' watchEffect配置的回调执行了')
到了这里，关于computed和watch的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
