hi，我是温新，一名PHPer

在setup中，使用监听器需要对其进行导入。watch监听器函数接收3个参数：

• 1、一个想要侦听的响应式或getter函数；
• 2、一个回调；
• 3、可选的配置项

最基础的监听器的使用

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webName"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 255)">ref</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">watch</span>} <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webName</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">ref</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 监听器监听webName的变化</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">watch</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">webName</span>, (<span style="box-sizing: border-box;color: rgb(0, 0, 255)">newValue</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">oldValue</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span>{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">newValue</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'--'</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">oldValue</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   })</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vm</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

当webName被改动时，监听器将触发并执行第二个参数（回调函数），它接收两个参数，分别是 newValue(新值)和oldValue(旧值)。

监听对象数据

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webName"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 255)">reactive</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">watch</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">toRefs</span>} <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">objData</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">reactive</span>({<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>:<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>});</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 监听对象数据时，第一个参数需要是函数</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">watch</span>( () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>, (<span style="box-sizing: border-box;color: rgb(0, 0, 255)">newValue</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">oldValue</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span>{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">newValue</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'--'</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">oldValue</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   })</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 数据解构</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webName</span> } <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">toRefs</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vm</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

监听多个数据

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webName"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webUrl"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webUrl }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 255)">reactive</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">watch</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">toRefs</span>} <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">objData</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">reactive</span>({<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>:<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>:<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'https://www.ziruchu.com'</span>});</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 监听多个数据时，参数为数组</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">watch</span>( [()<span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>,()<span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>], ([<span style="box-sizing: border-box;color: rgb(0, 0, 255)">newValue</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">oldValue</span>],[<span style="box-sizing: border-box;color: rgb(0, 0, 255)">preNewVal</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">preOldVal</span>])<span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span>{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">newValue</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'--'</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">oldValue</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">preNewVal</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'--'</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">preOldVal</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   })</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 数据解构</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webName</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webUrl</span> } <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">toRefs</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vm</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

watchEffect的使用

1、watchEffect会立即执行；

2、不需要手动传入所需要监听的数据；

3、接收的参数为一个回调函数；

4、只能获取新值，无法获取修改之前的值

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webName"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webName }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">input</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">type</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"text"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">v-model</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"webUrl"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span>{{ webUrl }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 255)">reactive</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">watch</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">watchEffect</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">toRefs</span>} <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">objData</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">reactive</span>({<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>:<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>:<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'https://www.ziruchu.com'</span>});</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 监听数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">watchEffect</span>(() <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'--'</span>,<span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 数据解构</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">let</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webName</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">webUrl</span> } <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">toRefs</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">objData</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webUrl</span>}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vm</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

停止监听

<span style="box-sizing: border-box;padding-right: 0.1px">// 监听数据</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">let stop = watchEffect(() => {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> console.log(objData.webName,'--',objData.webUrl)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> setTimeout(()=>{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  stop();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },3000);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">});</span>

我是温新

每天进步一点，就一点点