vue第四弹的一个兄弟指令

watch

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

特点:

  1. 监听数据的变化: watch 允许你监视特定数据的变化,当数据发生变化时,可以执行相应的操作。
  2. 更灵活的监听方式: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 对象中定义了对 aValuebValue 数据的监听器。每当这些数据发生变化时,相应的函数会被调用,并且会传入新值 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 更加灵活,适用于需要更多控制的场景。

相关推荐
漂流瓶jz14 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou030 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干41 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu1 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846951 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
coding随想2 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao2 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫2 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor