watch

在 Vue.js 中，watch 是一个用于监听 Vue 实例数据变化的选项，它允许你在数据变化时执行自定义的回调函数。

特点：

监听数据的变化： watch 允许你监视特定数据的变化，当数据发生变化时，可以执行相应的操作。
更灵活的监听方式： 与 computed 不同，watch 提供了更灵活的监听方式，你可以对数据的变化进行更细粒度的控制。

如何使用 `watch`：

在 Vue 实例中的 watch 对象中，你可以为特定的数据属性设置监听器。示例代码如下：

javascriptCopy 复制代码

new Vue({
  data: {
    aValue: 1,
    bValue: 2
  },
  watch: {
    // 监听 aValue 变化
    aValue: function (newValue, oldValue) {
      // 做一些操作，比如调用函数或者触发其他的数据改变
      console.log('aValue 变化了：', newValue, oldValue);
    },
    // 监听 bValue 变化
    bValue: function (newValue, oldValue) {
      // 做一些操作
      console.log('bValue 变化了：', newValue, oldValue);
    }
  }
});

示例说明：

在上述示例中，watch 对象中定义了对 aValue 和 bValue 数据的监听器。每当这些数据发生变化时，相应的函数会被调用，并且会传入新值 newValue 和旧值 oldValue。

应用场景：

watch 在处理需要对数据变化做特殊处理或者进行异步操作时非常有用。例如，当需要监听某个数据变化后发送网络请求、执行复杂计算或者触发其他的数据变更时，watch 提供了一个便捷的方式。

实战演练

和第四关的代码使用有一点点区别

js 复制代码

<body>
    <div id="app"></div>
    <template id="my-app">
       <h2>当前温度：{{temp}}</h2>
        <h3>建议穿：{{cloth}}</h3>
        <button @click="minus">-5</button>
        <button @click="add">+5</button>
    </template>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template:'#my-app',
            data(){
                return{
                    temp:20,
                     cloth:'夹克'
                    }
                },
            watch:{  //监视temp，能用computed实现的他也能使用，但是computed有缓存
                // temp(newVal,oldVal){  //新的值和旧的值
                //     // console.log(newVal,oldVal);
                    
                // }
                temp:{
                    handler:function(newVal,oldVal){
                        if (newVal <= 10) {
                            this.cloth = '棉袄'
                        } else if (newVal <= 20) {
                            this.cloth = '夹克'
                        } else {
                            this.cloth = '短袖'
                        }
                    },
                    immediate:true  //立即执行
                }
            },
            methods:{
                minus(){
                    this.temp-=5
                },
                add(){
                    this.temp+=5
                }
            }
            
           
        }).mount('#app')
        
    </script>
</body>

computed和watch的区别

区别总结：

computed 是计算属性，用于派生出新的属性值，基于依赖的响应式数据进行计算，具有缓存机制。
watch 是监听器，用于监听特定数据的变化，并在数据变化时执行自定义的操作，更加灵活，可以执行异步操作和更细致的控制。

选择使用时的考量：

如果需要根据其他属性计算出新值，并且希望在模板中使用，可以使用 computed。
如果需要在特定数据变化时执行异步操作、触发其他操作或者需要更精细的控制，可以使用 watch。

总结：

watch 是 Vue.js 中用于监听数据变化的功能，它提供了一种便捷的方式来监视特定数据的变化，并在数据变化时执行自定义的操作。与 computed 相比，watch 更加灵活，适用于需要更多控制的场景。

vue第四弹的一个兄弟指令