Vue侦听器

Vue侦听器

xiaoxiao

2022 年 03 月 01 日

879 次浏览

暂无评论

349字数

Vue JavaScript 前端

<h2 id="什么是侦听器">什么是侦听器？</h2>

<p>  watch侦听器允许开发者监视数据的变化，从而针对数据的变化进行特定的操作</p>

<h2 id="侦听器语法格式">侦听器语法格式</h2>

<ul><li>方法侦听器<ul><li>缺点1：无法在进入页面的时候，自动触发</li><li>缺点2：如果侦听的是一个对象，对象属性中的数据发生了变化，不会触发侦听器</li></ul></li><li>对象侦听器<ul><li>优点1：可以使用immediate选项，让侦听器自动触发</li><li>优点2：可以使用deep属性，让侦听器深度监听对象中每个属性的变化</li></ul></li></ul>

<p>方法格式简单的侦听器</p>

<figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-1-1024x528.png" alt="" class="wp-image-552"style=""></figure>

<p>侦听器本质是一个函数，要监视哪一个数据的变化，就把数据名作为方法名即可</p>

<p></p>

<p>对象格式的侦听器</p>

<figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-2-1024x533.png" alt="" class="wp-image-553"style=""></figure>

<p>在对象格式内设置immediate:true即可进入页面立即执行一次</p>

<figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-3.png" alt="" class="wp-image-554"style=""></figure>

<p>在对象格式内设置deep:true侦听器会深度监听对象中每个属性的变化</p>

<figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-4.png" alt="" class="wp-image-555"style=""></figure>