vue中watch侦听器的详细讲解

什么是侦听器呢?

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

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

例子

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

<script>
 
     Vue.createApp({
        template:`
        
{{counter}}
`
, 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>Documenttitle>
    <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.namebutton>
     <button @click='b'>改变info.a.agebutton>
     <button @click='incerment'>+1button>
     <button @click='decrement'>-1button>
    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 }
)

你可能感兴趣的:(vue,前端,vue.js,javascript,前端)