vue中watch侦听器的详细讲解

zayyo

已于 2022-07-03 09:06:56 修改

阅读量812

点赞数

分类专栏： vue 前端文章标签： vue.js javascript 前端

于 2021-11-26 10:40:36 首次发布

本文链接：https://blog.csdn.net/weixin_45215308/article/details/121526440

版权

前端同时被 2 个专栏收录

107 篇文章 5 订阅

订阅专栏

vue

41 篇文章 7 订阅

订阅专栏

什么是侦听器呢？

开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
当数据变化时，template会自动进行更新来显示最新的数据；
但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；

侦听器的用法如下：
选项：watch
类型：{ [key: string]: string | Function | Object | Array}

例子

<body>
    <div id="app"></div>
</script>

<script>
 
     Vue.createApp({
        template:`
        <div>{{counter}}</div>
        <button @click='incerment'>+1</button>
        <button @click='decrement'>-1</button>`,
        data:function(){
            return{
                counter:0,
            }
        },
        watch:{
            counter:function(newValue,old){
                console.log(newValue，old)
            }
        },
        methods:{

            incerment(){
                this.counter++;
            },
            decrement(){
                this.counter--;
            }
        }
     }).mount('#app')
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    </div>
    <template id="tem">
    <div>{{counter}}</div>
     <div>{{info.name}}</div>
     <div>{{info.abc.age}}</div>
     <button @click='infoname'>改变info.name</button>
     <button @click='b'>改变info.a.age</button>
     <button @click='incerment'>+1</button>
     <button @click='decrement'>-1</button>
    </template>
</script>
<script>
     Vue.createApp({     
         template:'#tem',
        data:function(){
            return{
                counter:0,
                info:{name:"kabe",abc:{age:"18"}}
            }
        },
        watch:{
               // 普通侦听
           info(newInfo, oldInfo) {
               console.log("newValue:", newInfo, "oldValue:", oldInfo);
            }
           // 为了发现对象内部值的变化，可以在选项参数中指定 deep: true (深度监听)
           //deep: true
            //在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调（一开始就监听）
         //  immediate:true
       },
        methods:{
            incerment(){
                this.counter++;
            },
            decrement(){
                this.counter--;
            },
            infoname(){
                this.info.name="bbbb"
            },
            b(){
                this.info.abc.age="20"
            },
        }
       , 
       created(){
                //使用watch API进行侦听
           // const unwatch =this.$watch("info",(newInfo, oldInfo)=>{
           //     console.log(newInfo, oldInfo);
           // },
           // {
            //    deep:true,
            //   immediate: true
           // })
            //取消侦听unwatch()
            //unwatch()
        },

     }).mount('#app')
</script>
</body>
</html>

this.$watchs

我们可以在created的生命周期（后续会讲到）中，使用 this.$watchs 来侦听；

vm.$watch( expOrFn, callback, [options] )

参数：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch

第一个参数是要侦听的源；
第二个参数是侦听的回调函数callback；
第三个参数是额外的其他选项，比如deep、immediate；

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

选项：deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调

注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

// 这会导致报错
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

zayyo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中watch侦听器的详细讲解

什么是侦听器呢？开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；当数据变化时，template会自动进行更新来显示最新的数据；但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；侦听器的用法如下：选项：watch类型：{ [key: string]: string | Function | Object | Array}例子<body> <div id="app"&g
复制链接

扫一扫