一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

vue第四弹的一个兄弟指令

watch

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

特点:

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

如何使用 watch

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

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 提供了一个便捷的方式。

实战演练

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

<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 更加灵活,适用于需要更多控制的场景。

原文链接:https://juejin.cn/post/7312413730932604937 作者:挖稀泥的工人

(0)
上一篇 2023年12月15日 下午4:21
下一篇 2023年12月15日 下午4:31

相关推荐

发表评论

登录后才能评论