vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 Watch监听事件

详解Vue3中Watch监听事件的使用

作者:山水有轻音

这篇文章主要为大家详细介绍了Vue3中Watch监听事件的使用的相关资料,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,需要的可以参考一下

一、watch的使用

watch(WatcherSource, Callback, [WatchOptions])

type WatcherSource<T> = Ref<T> | (() => T)

interface WatchOptions extends WatchEffectOptions {

--     deep?: boolean  ``// 默认:false`

--     immediate?: boolean  ``// 默认:false`
}

参数说明:

1、引入watch

import { watch } from 'vue'

然后在setup里注入监听事件

setup(props){
         const state = reactive({ 
           count: 0 ,
           message:'Hellow world'
         });
         watch(state,()=>{
            console.log(state.count); --单个监听
         })
         return {
           state,
         }
},

2、多个数据源监听

<template>
 <div>
   age: {{obj1.age}}

   name: {{obj.name}}
   

   list:
   <ul>
     <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li>
   </ul>
   <hr>
   <button @click="changeName">改变name</button>
   <button @click="changeList">改变list</button>
   <button @click="changeAge">改变age</button>
 </div>
</template>
<script lang="ts">
import {defineComponent, reactive, watch} from 'vue';
export default defineComponent({
 setup () {
   let obj = reactive({
     name: '1111',
     list: ['222', '222222', '222222']
   })
   let obj1 = reactive({
     age: 18
   })
   function changeName () {
     obj.name += '+'
   }

   function changeList () {
     obj.list[0] += '+'
   }

   function changeAge () {
     obj1.age++
   }

   watch([obj, obj1], () => {
     console.log(obj.name)
     if(obj.age>28){
         watchFunc()  // 停止监听`
     }
   }, {
     // 页面加载会先执行一次
     immediate: true
   })

   return {
     obj,
     changeName,
     changeList,
     changeAge,
     obj1
   }
 }
})
</script>
<style scoped>
</style>

结果:当改变名字和年龄时,watch都监听到了数据的变化。当age大于28时,我们停止了监听,此时再改变年龄,由于watch的停止,导致watch的回调函数失效。

解决办法:我们可以通过watch侦听多个值的变化,也可以利用给watch函数取名字,然后通过执行名字()函数来停止侦听。

3、监听数组变化

<template>
  <div class="watch-test">
    <div>ref定义数组:{{arrayRef}}</div>
    <div>reactive定义数组:{{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">改变ref定义数组第一项</button>
    <button @click="changeArrayReactive">改变reactive定义数组第一项</button>
  </div>
</template>

<script>
  import {ref, reactive, watch} from 'vue'

  export default {
    name: 'WatchTest',
    setup() {
      const arrayRef = ref([1, 2, 3, 4])
      const arrayReactive = reactive([1, 2, 3, 4])

      //ref not deep
      const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefWatch', newValue, 'oldArrayRefWatch', oldValue)
      })

      //ref deep
      const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefDeepWatch', newValue, 'oldArrayRefDeepWatch', oldValue)
      }, {deep: true})

      //reactive,源不是函数
      const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', newValue, 'oldArrayReactiveWatch', oldValue)
      })

      // 数组监听的最佳实践- reactive且源采用函数式返回,返回拷贝后的数据
      const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('newArrayReactiveFuncWatch', newValue, 'oldArrayReactiveFuncWatch', oldValue)
      })

      const changeArrayRef = () => {
        arrayRef.value[0] = 6
      }
      const changeArrayReactive = () => {
        arrayReactive[0] = 6
      }
      return {
        arrayRef,
        arrayReactive,
        changeArrayRef,
        changeArrayReactive
      }
    }
  }
</script>

结果:当将数组定义为响应式数据ref时,如果不加上deep:true,watch是监听不到值的变化的;而加上deep:true,watch可以检测到数据的变化,但老值和新值一样,即不能获取老值。当数组定义为响应式对象时,不作任何处理,watch可以检测到数据的变化,但老值和新值一样;如果把watch的数据源写成函数的形式并通过扩展运算符克隆一份数组返回,就可以在监听的同时获得新值和老值。

结论:定义数组时,最好把数据定义成响应式对象reactive,这样watch监听时,只需要把数据源写成函数的形式并通过扩展运算符克隆一份数组返回,即可在监听的同时获得新值和老值。

4、侦听对象

<template>
  <div class="watch-test">
    <div>user:{</div>
      <div>name:{{objReactive.user.name}}</div>
      <div>age:{{objReactive.user.age}}</div>
    <div>}</div>
    <div>brand:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">改变年龄</button>
    </div>
  </div>
</template>

<script>
  import {ref, reactive, watch} from 'vue'
  import _ from 'lodash';

  export default {
    name: 'WatchTest',
    setup() {
      const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'})

      //reactive 源是函数
      const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      //reactive,源是函数,deep:true
      const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      }, {deep: true})

      // 对象深度监听的最佳实践- reactive且源采用函数式返回,返回深拷贝后的数据
      const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        console.log('objReactiveCloneDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      const changeAge = () => {
        objReactive.user.age = 26
      }

      return {
        objReactive,
        changeAge
      }
    }
  }
</script>

结果:当把对象定义为响应式对象reactive时,采用函数形式的返回,如果不加上deep:true,watch是监听不到值的变化的;而加上deep:true,watch可以检测到数据的变化,但老值和新值一样,即不能获取老值;若把watch的数据源写成函数的形式并通过深拷贝克隆(这里用了lodash库的深拷贝)一份对象返回,就可以在监听的同时获得新值和老值。

结论:定义对象时,最好把数据定义成响应式对象reactive,这样watch监听时,只需要把数据源写成函数的形式并通过深拷贝克隆一份对象返回,即可在监听的同时获得新值和老值。

5、结论

到此这篇关于详解Vue3中Watch监听事件的使用的文章就介绍到这了,更多相关Vue3 Watch监听事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文