computed
computed去计算基本数据类型
// computed去计算基本数据类型 const count=ref(1) // computed ()里面是不带任何参数的。写成函数形式要有返回值,不然默认是undefined。箭头函数一行默认就是有返回值 const plusOne=computed(()=>{ return count.value++ }) // computed第二种用法set/set const count1=ref(10) const plusOne1=computed({ get:()=>count1.value++, set:value=>count1.value=value-5 //set去改变get依赖的值 // set:()=>{} get/set成对出现 如果set是在不知道写啥 就这set:()=>{} })
watch:watch(要监听的数据,回调函数,配置项对象【非必须】)
watch监视基本数据类型值
const count2=ref(1) //监听基本类型值 watch(要监听的数据,回调函数,配置项对象) watch(count2, (newVal,oldVal)=>{ console.log(newVal,oldVal); //初始化的时候惰性执行immediate=false默认值(也就是不执行这个回调函数) }, { immediate:true, //是否立即监听 deep:true,//基本数据类型 depp:true/false无所谓了吧 })
watch监视对象数据类型
const state=reactive({count:30,wife:{name:'xiaoling',age:10}}) // 直接去监视整个对象,里面每个属性值发生改变了,函数都会执行 watch(state,(newVal,oldVal)=>{ console.log(newVal,oldVal,0); //居然是同一个对象 },{deep:true,immediate:false}) //deep:true/false影响不大了。默认就是深度监听在深的对象值发生改变也能监听的到 setTimeout(()=>{ state.wife.age=state.wife.age +3 },2000)
const state1=reactive({count1:300,wife:{name:'xiaozhang'}}) // 监听对象的特定属性值,只有当对象的这个特定属性值发生改变,函数才会去执行,这个比较好 watch(()=>state1.wife.name,(newVal,oldVal)=>{ //基本值是两个值。深度对象也能监视的到 console.log(newVal,oldVal); },{}) setTimeout(()=>{ state1.wife.name=state1.wife.name+'~~~~~' },2000)
watchEffect
在响应式地跟踪其依赖项时立即运行一个函数,并在更改依赖项时重新运行它。
const age=ref(10) let state=reactive({name:'zs',age:10}) const changeAge=()=>{ age.value++ } const changeState=()=>{ state.name=Math.random()+'' } // 自动监视ref值 watchEffect(()=>{ console.log('ref-age',age.value); //初始化时候就会自动执行一次。age.value每次发生改变 watchEffect函数都会立即执行。 }) //在响应式地跟踪其依赖项时立即运行一个函数,并在更改依赖项时重新运行它 watchEffect(()=>{ console.log('reactive-state',state); //wo改变state里面属性值如state.name变化 而直接监听state, 只会在初始化时候执行一次。而后不会再执行 }) watchEffect(()=>{ console.log('reactive-state.name',state.name); //初始化时候执行一次 并且当我改变了state.name值(上一次和下一次的值不一样)这个函数就会反复执行 })
停止监听返回stop函数
watchEffect清除副作用
这个有点难