listenerwatch在每次响应式状态改变时触发回调函数执行一些“副作用”：比如改变DOM，或者根据异步操作的结果修改别处的状态。写法：watch（监听源、回调函数、配置项）。共有三个参数。监听源：源有四种形式，1.单一响应变量，2.单一响应对象，3.单一getter函数，4.多态混合数组。如下：让我改1.单个响应变量必须是响应变量，如果是普通的非响应变量会报错。它可以是一个可以直接定义响应变量（ref、reactive）的API，也可以是一个可以间接定义响应变量（computed、effect）的API。它没有直接的值（只有属性值），如果没有值可以改变，就不能被监听。使用watch来监听对象。当对象的属性值改变时，监听器是没有响应的。但是可以在watch的第三个参数配置项中配置deep:true来深度监听对象属性的变化，达到监听对象的目的。当属性值改变时，watchlistener会响应。需要注意的是：1.容器中的所有属性在改变时都会被触发；2、watch第二个参数的回调函数的形参newValue和oldValue相等，都是新值，value是更新后的对象。对象值可以以newValue.property名称的形式在代码中使用。3、单个getter函数不能直接监听响应式对象的单个属性，比如watch(y.value.ww,(ne,ol)=>{console.log(ne,ol)})会报错。这时候伟大的getter函数出现了，通过它可以监听对象的单个属性，写成watch(()=>y.value.ww,(ne,ol)=>{console.log(ne,ol)})4.多态混合数组不仅可以监听单个监听器，还可以监听多个监听器。也可以是单一响应变量、对象、getter函数的多种形式混合，但参数（监听源）必须是数组形式。回调函数：(newvalue,originalvalue)=>{executesideeffectcommand}1.当监听源为对象时，两个形参相等，均为新值，为更新对象。可以在副作用指令中以“参数.属性名”的形式使用。2、当监听源为混合数组时，形参可以采用数组名的形式。在副作用指令中，可以以“参数[索引值]”的形式与监听源数组一一对应使用；形参也可以是数组实体的形式（与监听源数组一一对应），已经一一对应的形参可以直接用在side-效果说明。如下：watch([x,y,()=>y.value.ww],(ne,ol)=>{console.log(ne[0],ol[1])})//的形状数组名见watch([x,y,()=>y.value.ww],([new1,new2,new3],[old1,old2,old3])=>{console.log([new1,new2,new3],[old1,old2,old3])})//数组实体的形参3.回调函数也可以写在body外，如：functionpp(a,b){console.log(a,b)}watch(url,pp,{immediate:true})配置项：{immediate:true（是否立即调用一次），deep:true（是否启用深度监控）}1、配置项必须是以对象的形式写在{}2.deep:true控制深度监听对象类型的监听源。3.immediate:true控制监听在网页初始化时执行一次，而不是默认监听源改变。4.flush:'post'默认在Vue组件内存渲染阶段或更新前执行副作用指令，所以无法访问网页变化后的内容。可以使用flush:'post'配置项监听更改后的网页Content.watch和computedwatch和computed都依赖于监听源，触发方式相同，功能相似。1、watch实现computed函数computed：{{mabi}}
Listentosource1Listensource2<脚本设置>import{reactive,computed}from'vue'constwocao=reactive({name:0,na:2})constmabi=computed(()=>{if(wocao.na>0){returnwocao.name++}})//注意下面watch写法中mabi的赋值方式和mabi赋值的歌曲constpp=function(){wocao.na++}constdd=function(){wocao.name=8}观看：{{mabi}}
收听源一听源二虽然可以实现相同的功能，但是两者的特点不同，而且写法也不一样：computed可以给一个函数返回一个值，这个computed函数可以给一个变量赋值。赋值的变量不需要通过ref或者reactive来定义响应式，而watch不能使用return返回值给函数，不能使用watch函数给变量赋值，但是可以赋值通过副作用指令在内部变量，但是这个变量需要先使用ref和reactive来定义变量的响应性。2.watch和computed的收听计时。Computed在第一次加载时默认开始监听；watch第一次加载时默认不监听。如果第一次需要监听，需要添加immediate:true3、watch和computed来缓存computed，支持缓存，只有依赖数据发生变化时才重新计算；watch不支持缓存，只要监听到的数据发生变化，就会触发相应的操作Datachanges；watch支持异步操作5、watch和computed的最佳使用场景Computed适用于一个数据受多个数据影响的情况，watch适用于一个数据影响多个数据的情况。这是因为computed监听了多个依赖，可以很方便的通过return返回一个值，而watch有sideeffect指令集，里面可以放多条指令，通过指令改变多个值非常方便。注意：computed除了返回一个值外，还可以通过指令改变多个值，但由于return的“立即结束”特性，改变指令必须放在return语句之前才能生效。例如：constmabi=computed(()=>{if(wocao.na>0){wocao.ww++;returnwocao.name++}})listenerwatchEffect写法：watch(回调函数，配置项)。1.watchEffect只有两个参数，比watch源参数少。watchEffect的监听源直接写在回调函数中。2.watchEffect不需要在配置项中使用immediate:true，默认初始化时执行一次，不需要等到监听源发生变化。3.watchEffect不能像watch一样返回新旧值的形参，监听源的值为新值。watchEffect的必要性如果watch在监听方面比watchEffect更有用和强大，watchEffect的存在是因为**callback函数可以接收一个onInvalidate函数作为形参。当出现以下几种情况时，会使用这个形参回调Trigger：当副作用即将重新执行时（即依赖的值发生变化），停止监听（通过显示返回值停止监听的调用，或者在组件卸载时隐式调用停止监听）写：watchEffect((ww)=>{普通副作用指令；ww(()=>{清除副作用指令})})当sideeffect即将重新执行，如果有reset的选项，可以在onInvalidate中重新初始化，防止他即将执行的sideeffects污染。或者监听器停止的时候，如果有销毁的选项，可以在onInvalidate中销毁，防止污染其他组件。配置项：{flush:}1,pre'在组件内存渲染阶段之前或更新之前执行，默认为'pre'。'post'在组件更新后运行，您可以使用watchPostEffect代替watchEffect+{flush:post}。'sync'强制效果始终同步触发，可以用watchSyncEffect代替。然而，这是低效的，应该很少需要。stoplistener同步语句创建的监听器会自动绑定到宿主组件实例，当宿主组件卸载时会自动停止。因此，在大多数情况下，您不需要关心如何停止侦听器。一个关键点是必须使用同步语句创建侦听器：如果您使用异步回调创建侦听器，那么它不会绑定到当前组件，您必须手动停止它以防止内存泄漏。就像下面这个例子：vue要手动停止侦听器，请调用watch或watchEffect返回的函数：
