Vue3的监听函数

已于 2022-03-18 16:09:58 修改
阅读量3.5k 收藏
点赞数
分类专栏： Vue3 文章标签： watch ref reactive 响应式数据
于 2022-03-18 12:04:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/123561191
版权

文章目录

Vue3监听ref定义的响应式数据

监听一个ref定义的响应式数据，ref(基本类型)

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>
  • Demo.vue
<template>
  <h2>当前求和值为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    watch(sum,(newValue,oldValue) => {
      console.log("sum变了",newValue,oldValue);
    })

    return {
      sum
    }
  }
}
</script>

在这里插入图片描述

  • 启动应用，测试效果
    在这里插入图片描述

监听多个ref定义的的响应式数据，ref(基本类型)

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>
  • Demo.vue
<template>
  <h2>当前求和值为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);
    let msg = ref("你好");

    watch(sum,(newValue,oldValue) => {
      console.log("sum变了",newValue,oldValue);
    })
    watch(msg,(newValue,oldValue) => {
      console.log("msg变了",newValue,oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

在这里插入图片描述
Vue3监听多个ref定义的响应式数据时，也可以这么写。

<template>
  <h2>当前求和值为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);
    let msg = ref("你好");

    watch([sum,msg],(newValue,oldValue) => {
      if(newValue[0] !== oldValue[0]){
        console.log("sum变了",newValue[0],oldValue[0]);
      }
      if(newValue[1] != oldValue[1]){
        console.log("msg变了",newValue[1],oldValue[1]);
      }
    });
    
    return {
      sum,
      msg
    }
  }
}
</script>

在这里插入图片描述

  • 启动应用，测试效果
    在这里插入图片描述

监听一个ref定义的响应式数据，ref(对象类型)

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>
  • Demo.vue
<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪酬：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>&nbsp;
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = ref({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    watch(person.value,(newValue,oldValue) => {
      console.log("person变了",newValue,oldValue);
    })

    return {
      person
    }
  }
}
</script>

在这里插入图片描述
在这里插入图片描述
person由ref定义以实现响应式，所以watch时，应写成person.value。
person由ref定义以实现响应式，watch时，其实写成person也行，但与此同时，需要开启深度监视，{deep:true}，完整的Demo.vue如下所示。

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪酬：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>&nbsp;
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {ref,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = ref({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    watch(person,(newValue,oldValue) => {
      console.log("person变了",newValue,oldValue);
    },{deep:true})

    return {
      person
    }
  }
}
</script>

在这里插入图片描述

Vue3监听reactive定义的响应式数据

先上例子吧。

监听reactive定义的响应式数据的全部属性

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>
  • Demo.vue
<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:"张三",
      age:18
    })

    watch(person,(newValue,oldValue) => {
      console.log("person变了",newValue,oldValue);
    })
    
    return {
      person
    }
  }
}
</script>

在这里插入图片描述
在这里插入图片描述

监听reactive定义的响应式数据的某个或多个属性

可以看到，Vue3监听reactive定义的响应数据person时，无法获取到正确的oldValue。

如果非得到oldValue不可，可以采用如下方式实现监听：

 watch(() => person.name,(newValue,oldValue) => {
   console.log("person的name变了",newValue,oldValue);
 })
 watch(() => person.age,(newValue,oldValue) => {
   console.log("person的age变了",newValue,oldValue);
 })
  • 修改后的Demo.vue
<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:"张三",
      age:18
    })

    watch(() => person.name,(newValue,oldValue) => {
      console.log("person的name变了",newValue,oldValue);
    })
    watch(() => person.age,(newValue,oldValue) => {
      console.log("person的age变了",newValue,oldValue);
    })
    
    return {
      person
    }
  }
}
</script>

在这里插入图片描述

在这里插入图片描述
监听reactive定义的响应式数据的多个属性时，也可以这样写，如下，

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:"张三",
      age:18
    })

    watch([() => person.name,() => person.age],(newValue,oldValue) => {
      console.log("person的name或age变了",newValue,oldValue);
    })
    
    return {
      person
    }
  }
}
</script>

在这里插入图片描述

监听reactive定义的响应式数据的一个属性，且该属性值也是一个对象

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>
  • Demo.vue
<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪酬：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>&nbsp;
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    watch(() => person.name,(newValue,oldValue) => {
      console.log("person的name变了",newValue,oldValue);
    })
    watch(() => person.age,(newValue,oldValue) => {
      console.log("person的age变了",newValue,oldValue);
    })
    watch(() => person.job,(newValue,oldValue) => {
      console.log("person的job变了",newValue,oldValue);
    })

    return {
      person
    }
  }
}
</script>

在这里插入图片描述

瞧，监听不到reactive定义的响应式数据person的属性job的变化，解决办法是，开启深度监听{deep:true}。

修改后的Demo.vue如下。

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪酬：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>&nbsp;
  <button @click="person.age++">增长年龄</button>&nbsp;
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        salary:30
      }
    })

    watch(() => person.name,(newValue,oldValue) => {
      console.log("person的name变了",newValue,oldValue);
    })
    watch(() => person.age,(newValue,oldValue) => {
      console.log("person的age变了",newValue,oldValue);
    })
    watch(() => person.job,(newValue,oldValue) => {
      console.log("person的job变了",newValue,oldValue);
    },{deep:true})

    return {
      person
    }
  }
}
</script>

在这里插入图片描述
在这里插入图片描述

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解Vue 如何监听Array的变化
12-11
3. **数据描述符的利用**：由于不能直接为数组元素设置getter和setter，Vue利用了`Object.defineProperty`的数据描述符，将数组的变异方法的引用（`value`属性）替换为一个新的函数，这个函数在执行原方法之前和之后...
vue 监听屏幕高度的实例
12-12
下面我们将详细讲解如何在Vue中监听屏幕高度。 首先，在Vue组件的数据属性`data`中定义一个变量来存储页面的初始高度。在这个例子中，我们使用`document.documentElement.clientHeight`获取整个HTML文档的可视区域...
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
网络技术联盟站
07-18 7172
setup() {})})return {
VUE3的watch监听使用
moxunjinmu的博客
03-02 4万+
VUE3的watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据，副作用函数，配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
Vue3-watch监听ref和reactive数据的五种情况及watchEffect
最新发布
IIIIIAN
06-02 1842
用于声明在数据更改时调用的侦听回调。watch选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过data或computed声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的$watch()API。值也可以是一个方法名称的字符串 (通过methods声明)，或包含额外选项的对象。
Vue3中的watch监听
10-01 2万+
当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 user.name），还是孙属性变更（如 user.more.iPhone）...，都是会触发 watch 方法的。监听 user.more.iPhone 属性，那么只有当iPhone属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。方式二：用箭头函数时，则必须加上{deep:true}才能触发监听。方式1：不用箭头函数，则可以不用deep:true。
VUE3 数据的侦听
m0_49515138的博客
12-09 1万+
所以要想定义的 watch 能够做出预期的行为，数据源必须具备响应性或者是一个 getter ，如果只是通过 let 定义一个普通变量，然后去改变这个变量的值，这样是无法侦听的。什么情况下可能会用到批量侦听呢？这个 API 的类型如下，使用的时候需要传入一个副作用函数（相当于 watch 的 侦听后的回调函数 ），也可以根据的实际情况传入一些可选的 侦听选项。来到这里，对 2 个必传的参数都有一定的了解了，先看看基础的用法，也就是日常最常编写的方案，只需要先关注前 2 个必传的参数。这句话是什么意思呢？
Vue3的watch监听的多种情况
m0_57482322的博客
02-26 6008
1.vue3中的watch为函数形式，直接在setup里面使用，有三个参数： 第一个是监听的对象 第二个是监听的回调，由于setup不需要考虑this的指向问题，所以可以直接在watch中写箭头 函数 第三个是监听的配置项；如果有两个数据需要监听可以直接写成两个watch函数 2.使用： 1.先引入watch import { watch} from 'vue' 2.在setup()里面引用 watch(props,(newProps,oldProps) => {
vue中监听路由参数的变化及方法
12-13
getDetail()方法中会用到this.id这个参数，在同一页面切换id的值，并不会触发vue的声明周期函数。 可以添加路由监听： watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //...
vue监听dom大小改变案例
11-19
在Vue中，通常我们通过`v-bind`或`:`来实现数据与DOM元素的双向绑定，但有时我们需要监听DOM元素本身的尺寸变化，例如在布局调整时更新组件的状态。在给定的案例中，开发者遇到了一个问题：当Vue应用中的右侧`swiper...
vue3中watch监听reactive数据和ref
G_ruirui的博客
09-08 3739
vue3中watch监听reactive和ref
vue3中watch监听reactive数据的6种场景
Heartnottowake的博客
04-01 5120
直接上干货 <template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我加</button> <hr> <h2>{{msg}}</h2> <hr> <h2>{{person.name}}</h2> <h2>{{person.age}}</h2> <h2>
vue3监听
weixin_43390711的博客
04-13 505
watchEffect(onInvalidate => {用户自定义副作用}, {flush: 'post',onTrack(e){},onTrigger(e){}})1、把组件看成一个纯净的渲染函数，把一个状态渲染成UI UI = fn(state)1、非惰性，副作用函数会默认调用一次，就跟设置了immediate：true一样。2、除了渲染UI之外所有的事都是副作用，eg：异步请求、定时器、操作dom...2、'清除副作用'做什么，及其触发时机。1、'副作用'做什么，及其触发时机。
Vue3学习：监视（watch）ref定义的数据
weixin_47295886的博客
03-19 1645
监视ref所定义的一个响应式数据。基本数据类型使用ref。
Vue - 监听数据的三种方法
热门推荐
Welkin_qing的博客
08-11 13万+
举一个案例，我们要拼接一个fullname，因此要监听到文本框数据的改变，这样才能知道什么时候去拼接 出一个 fullname 案例结构如下： &amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;app&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;
Vue3 监听属性
大河之犬的博客
12-05 1138
Vue3 监听属性 `watch`，我们可以通过 `watch` 来响应数据的变化。
VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架
春风若有怜花意，可否许我再少年
12-24 1633
VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架
vue3.0组件监听异步数据，watch与reactive 的应用, watch与computed, 还有ref的使用
versionli的博客
01-07 5109
vue3.0子组件监听父组件传过来的异步数据，watch与reactive 的应用, watch与computed, 还有ref与wactch的使用
【vue3练习 -07.5】vue3 watchEffect函数监视
weixin_52941842的博客
08-30 55
vue3 watchEffect函数监视
vue watch监听函数
09-26
vue中的watch监听函数用于观察和监听页面上的vue实例中的数据变化。当需要在数据变化时执行异步操作或高性能消耗的操作时，watch是最佳选择。在使用watch监听函数时，可以监听字符串、监听对象和监听路由。 监听字符串的代码示例： ```javascript watch: { dataPropertyName: function(newValue, oldValue) { // 在数据变化时执行的操作 } } ``` 监听对象时，需要添加`deep: true`，才能深入底层实时监听对象的变化。如果没有添加，对象是无法被监听到变化的。 ```javascript watch: { dataPropertyName: { handler: function(newValue, oldValue) { // 在数据变化时执行的操作 }, deep: true } } ``` 监听路由时，可以使用`$route`来监听当前路由的变化。 ```javascript watch: { '$route': { handler: function(newValue, oldValue) { // 在路由变化时执行的操作 }, deep: true, immediate: true } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值