Vue3新特性Computed、Watch、WatchEffect将是

www.ydisp.cn/oss/202207/14/1762a5a62f6f5120e017479cfbbcec925cb219.png"style="visibility:visible;宽度：517px；height:328px;"data-type="inline">1.watchEffectwatchEffect监听器是一个副作用函数，它不需要指定监听某个属性，监听回调中使用哪个属性就会监听哪个属性。一旦运行，就会立即执行watchEffect和computed类似，computed关注的是计算结果，所以一定要有返回值，而它关注的是过程，所以不需要写返回值，使用语法：watchEffect(()=>{//需要监控的属性},WatchEffectOptions)//WatchEffectOptions更多配置项watchEffectExample:刷新页面，第一次进入时会自动执行watchEffect回调函数。为什么watchEffect是一个副作用函数？副作用函数是指会产生副作用的函数，也就是说当该函数执行时，会直接或间接影响其他函数的执行。watchEffect副作用在DOM挂载或更新之前触发。运行以下示例以查找：第一次获取到的元素为null，只有在第二次监听的时候才会获取到该元素。如何清除watchEffect的副作用？上述问题可以通过在DOM更新后使用flush:post运行副作用来避免，确保模板引用与DOM保持同步，并引入正确的元素。WatchEffectOptions的主要作用是指定调度器何时运行副作用函数。它是一个可选参数，它的具体属性值是：flushonTrackonTriggerflush定义了组件刷新的时机。它有三个值，它们的含义如下：presyncpostupdate定时在组件更新前执行强制效果，总是触发组件更新并执行onTrack和onTrigger用于调试一个监听器的行为。清除副作用函数（onInvalidate）。watchEffect的第一个参数回调函数也有自己的参数——onInvalidate。它也是一个用于清理effect产生的副作用的函数。watchEffect((oninvalidate)=>{console.log('monitorparameters',)oninvalidate(()=>{console.log('before')})})oninvalidate仅适用于异步函数，只有两种情况都会被调用：watchEffect第一个参数effect回调函数，当effect再次被调用时。当侦听器未注册时。如何停止聆听？组件加载会产生副作用，这些副作用需要在组件卸载时清理掉。watchEffect的返回值仍然是一个函数，调用它的返回函数时会清空监听，经常在组件卸载时调用。setup(){conststop=watchEffect(()=>{/*...*/});//调用后清除监听stop();}2.watch监听一个特定的属性，可以返回变化前后的值。使用语法：watch(name,//需要监听的source(newVal,oldVal)=>{},//返回改变options前后的值//可选配置项)当页面出现时不会立即执行刚进入，只有当监控的源数据发生变化时才会执行。可以监控的源数据可以是一个，也可以是多个。示例如下：如果watch监听一个ref来定义深度数据，当值被修改时，会是Didyouhearit?让nav:any=ref({bar:{name:'menu',},})watch(nav,(newV,oldV)=>{console.log('newV',newV)})当我们修改nav时。查看bar.name的属性值时，发现listener中的回调函数还没有执行。这个时候怎么解决这个问题呢？watch函数还有一个可选的options参数，它的配置项是：deep表示是否深度监控，是一个boolean值，默认为false。immediate是否立即执行。解决watch无法深度监控ref方法一：添加deep配置项letnav:any=ref({bar:{name:'menu',},})watch(nav,(newV,oldV)=>{console.log('newV',newV)},{deep:true})解决watch无法深度监控ref的问题方法二：将ref替换为reactiveletnav:any=reactive({bar:{name:'11',},menu:{name:'22',},})watch(nav,(newV,oldV)=>{console.log('newV',newV.bar.name)console.log('newV',newV.menu.name)})使用reactive监控deep对象的效果和开启deep和不开启deep是一样的。当nav.bar.name或nav.menu.name被修改时，该函数将被触发。如果我们只想监控其中一个属性怎么办？观察反应单值letnav:any=reactive({bar:{name:'1',},menu:{name:'2',},})watch(()=>nav.bar.name,(newV,oldV)=>{console.log('newV',newV)},)3.当依赖属性的值发生变化时触发计算属性。如果依赖值没有改变，则使用缓存中的值。函数形式使用的语法：import{computed,ref}from"vue"letnum:number=ref(0)constres:number=computed(():number=>{returnnum.value*10})对象形式:import{computed,ref}from"vue"letnum:number=ref(0)constres:number=computed({get:():number=>{returnnum.value*10},set:(val:number):number=>{num.value=val/10},})使用computed实现购物车价格计算功能，代码：