Vue3第三章（watch监听器）

山人不爱喝酒

已于 2022-10-11 18:41:05 修改

阅读量156

点赞数

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

于 2022-10-11 14:51:21 首次发布

本文链接：https://blog.csdn.net/weixin_42185448/article/details/127263318

版权

vue3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

监听ref对象

监听ref包裹的深层次对象，必须加deep才能读取属性

<template>
  <div>
    <input type="text" v-model="message.nav.bar.name">
  </div>
</template>

<script setup lang='ts'>
import {ref,watch,reactive} from 'vue'

const message = ref({
  nav: {
    bar: {
      name: '小满'
    }
  }  
})

watch(message,(oldValue,newValue)=>{
  console.log('旧的',oldValue);
  console.log('新的',newValue);
},{
  deep: true, //监听ref包裹的深层次对象，必须加deep才能读取属性
  immediate: true //页面刷新就调用一次
})
</script>

监听reactive对象

监听reactive包裹的深层次对象，不需要加deep属性

<template>
  <div>
    <input type="text" v-model="message.nav.bar.name">
  </div>
</template>

<script setup lang='ts'>
import {ref,watch,reactive} from 'vue'

const message = reactive({
  nav: {
    bar: {
      name: '小满'
    }
  }  
})

watch(message,(oldValue,newValue)=>{
  console.log('旧的',oldValue);
  console.log('新的',newValue);
})
</script>

只想监听一个对象的某个属性时

watch的第一个参数传入一个函数，return这个对象的属性

<template>
  <div>
    <input type="text" v-model="message.name">
    <input type="text" v-model="message.name2">
  </div>
</template>

<script setup lang='ts'>
import {ref,watch,reactive} from 'vue'

const message = reactive({
  name: '小满',
  name2: '小满的裤子',
})

watch(()=>message.name,(oldValue,newValue)=>{
  console.log('旧的',oldValue);
  console.log('新的',newValue);
})
</script>