【Vue3】035-Composition API：watch和watchEffect的使用和差异性

已于 2023-04-15 00:05:57 修改
阅读量350 收藏
点赞数
分类专栏： Vue.js 文章标签： vue js
于 2021-07-01 20:27:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118371261
版权

文章目录

6、watch和watchEffect的使用和差异性

写法预览

// 监听一个对象
watch(name, (currentValue, prevValue) => {
  console.log(currentValue, prevValue);
})
// 监听一个对象
watch(() => name.value, (currentValue, prevValue) => {
  console.log(currentValue, prevValue);
})
// 监听多个对象
watch([() => obj.name, () => obj.age], ([curName, prevName], [curAge, prevAge]) => {
  console.log(curName, prevName, " === ", curAge, prevAge);
})
// watch 立即执行与深度监听
watch(() => props.student, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, {
  // 立即执行
  immediate: true,
  // 深度监听
  deep: true,
})
// 立即执行、只能拿到当前值、不需要特别指定监控谁，当内部使用到的数据发生改变是就会执行
watchEffect(() => {
  console.log(name.value);
});

watch基本使用

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, watch } = Vue;
      const name = ref("zibo");
      // 监听的值，值发生改变的时候的回调函数
      // 特点：
      // 1、具备一定的惰性 lazy
      // 2、参数可以拿到当前值和原始值
      watch(name, (currentValue, prevValue) => {
        console.log(currentValue, prevValue);
      })
      return { name }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="name" />
      </div>
      <div>
        Name：is {{name}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616195947558

监听对象

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { reactive, watch } = Vue;
      const obj = reactive({name: '大哥刘备'});
      // 监听的值，值发生改变的时候的回调函数
      // 特点：
      // 1、具备一定的惰性 lazy
      // 2、参数可以拿到当前值和原始值
      // 监听对象的变化
      // 可以监听的目标： watch source can only be a getter/effect function, 
      // a ref, a reactive object, or an array of these types. 
      // 直接监听 obj.name 会报错！
      // 可以这么写
      watch(() => obj.name, (currentValue, prevValue) => {
        console.log(currentValue, prevValue);
      })
      return { obj }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="obj.name" />
      </div>
      <div>
        Name：is {{obj.name}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616201220061

同时监听多个目标

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { reactive, watch } = Vue;
      const obj = reactive({
        name: '大哥刘备',
        age: 62
      });
      // 监听多个属性，需要写成数组
      watch([() => obj.name, () => obj.age], ([curName, prevName], [curAge, prevAge]) => {
        console.log(curName, prevName, " === ", curAge, prevAge);
      })
      return { obj }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="obj.name" />
      </div>
      <div>
        Name：is {{obj.name}}
      </div>
      <div>
        Age<input v-model="obj.age" />
      </div>
      <div>
        Name：is {{obj.age}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616202411117

watchEffect基本使用

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, watchEffect } = Vue;
      const name = ref("訾博ZiBo");
      // 特点：
      // 1、立即执行，非惰性，immediate；
      // 2、只能拿到当前值；
      // 不需要特别指定监控谁，当内部使用到的数据发生改变是就会执行
      watchEffect(() => {
        console.log(name.value);
      });
      return { name }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="name" />
      </div>
      <div>
        Name：is {{name}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616203353226

停止监听

watch 和 watchEffect 都可以用！

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, watchEffect } = Vue;
      const name = ref("訾博ZiBo");
      const stop = watchEffect(() => {
        console.log(name.value);
        setTimeout(() => {
          stop();
        }, 3000);
      });
      return { name }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="name" />
      </div>
      <div>
        Name：is {{name}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616203554755

使watch也立即执行

<!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>hello</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, watch } = Vue;
      const name = ref("zibo");
      watch(name, (currentValue, prevValue) => {
        console.log(currentValue, prevValue);
      },{
        // 这里还可以有更多高级配置
        immediate: true
      })
      return { name }
    },
    template: `
    <div>
      <div>
        Name：<input v-model="name" />
      </div>
      <div>
        Name：is {{name}}
      </div>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210616204019715

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2 + Composition API 实践
liuniansilence的博客
01-25 1627
响应式API ref unref toRef toRefs isRef customRef shallowRef triggerRef computed watch watchEffect 1、解构带来的响应式陷阱 我们习惯了ES6的对象解构风格，但这在composition- api里可能会有陷阱。因为结构可能会让你的响应式对象失去预期中的响应特性。 <template> <div id="app"> {{count}} <button @click=
Vue Composition API之侦听器watch/watchEffect
知识应该共享，创造才应收费
05-27 1621
在日常的开发中，很多时候我们需要去对一些状态进行监听，比如当显示学生的成绩列表时，我们使用一个学生的学号student_num作为请求成绩的参数，如果没有监听机制，当学号student_num改变时，我们需要依赖用户的操作去刷新成绩。但是有了侦听器，我们可以通过侦听器去监听student_num，当其发生改变时，自动去执行成绩刷新的操作。省去了很多冗余的逻辑。在Vue中，侦听器主要有两个，watch和watchEffect。下文将主要介绍他们的用法和区别。
Vue3的watch如何监听多个值
热门推荐
qq_50950033的博客
07-06 1万+
vue3的watch如何监听多个值。
vue3中watch 与 watchEffect 的用法
m0_55969466的博客
06-30 2125
watch- 默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调； watch- 更明确哪些状态的改变会触发侦听器重新运行副作用； watch- 获取到侦听状态变化前后的值。watchEffect 不需要手动传入依赖， watchEffect 会先执行一次用来自动收集依赖，watchEffect 无法获取到变化前的值；只能获取变化后的值。参数说明：source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量；callback: 执行的回调函数...
（四）vue/composition-api 之 computed/watch
Luckyzhoufangbing的博客
09-18 352
vue/composition-api 之 computed/watch。
todomvc-vue-composition-api:使用Vue 3 Composition Api和Vuex构建的TodoMVC
05-09
使用Vue 3 Composition Api和Vuex构建的TodoMVC 以结构化和可测试的方式使用Vue 3 Composition Api和Vuex构建的著名TodoMVC。 涵盖的概念和工具 用法 安装依赖项后，以下NPM脚本将变为可用： start ：以开发模式...
todomvc-vue-composition-api：使用Vue 3 Composition Api和Vuex构建的TodoMVC
02-06
使用Vue 3 Composition Api和Vuex构建的TodoMVC 以结构化和可测试的方式使用Vue 3 Composition Api和Vuex构建的著名TodoMVC。涵盖的概念和工具用法安装依赖项后，以下NPM脚本可用： start ：以开发模式在上启动应用...
vue-composition-test-utils:适用于Vue 2和3的简单vue合成api单元测试实用程序
04-27
vue-composition-test-utils 简单的Vue Composition API测试实用程序 安装 // use yarn yarn add vue-composition-test-utils -D // use npm npm install vue-composition-test-utils -D 演示版 代码 import { ref ...
awesome-vue-composition-api：:rocket:与vue composition api相关的令人敬畏的事物的精选列表
01-30
awesome-vue-composition-api：:rocket:与vue composition api相关的令人敬畏的事物的精选列表
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js...
vue3的Composition API之watch和watchEffect
qq_43862878的博客
11-27 132
2. watchEffect：watchEffect函数接收一个函数作为参数。（所有在其函数内部访问的响应式数据都会成为watchEffect的依赖项）1. watch：watch函数接收两个参数：要观察的源和一个回调函数。总的来说，watch提供了更多的灵活性（例如，可以选择什么时候运行回调、访问旧值等），watchEffect更适用于当依赖项改变时总是需要运行的副作用。在Vue3中，watch和watchEffect都是用来监听响应式数据变化的函数，但它们的工作方式有所不同。
Vue 3.0 新特性全面解析（走在技术前沿）
05-31
走在技术前沿之 Vue3.0 新特性全面解析。 全网抢先看，做首批 Vue 3.0 开发者！！！ 课程内容包含： 1.Vue 3.0之版本大更新 2.新特性重点关注 3.composition-api（组合式API） 4.初始化Vue 3.0项目 5.setup函数 6.响应式系统API（reactive、ref、computed、watch等） 7.响应式系统工具集（unref、toRef、toRefs、isRef、isProxy等） 8.生命周期钩子函数的变化 9.依赖注入 10.模板refs 教学全程采用笔记+代码案例的形式讲解，通俗易懂！！！ 补充：想学习 Vue 2.x 的同学请移步以下地址 https://edu.csdn.net/course/detail/7906 （Vue.js 2.0之全家桶系列视频课程）   讲师介绍
Vue3 composition API: watch
学习笔记
01-02 908
首先，import watch，例如： import { ref, computed, watch } from 'vue'; 然后在 setup() 函数中调用 watch 函数： export default { setup() { const firstName = ref(''); const lastName = ref(''); const uAge = ref(31); watch(uAge, function (newValue, oldValue)
vue3之Composition API详解
上下求索
10-17 7143
Composition API也叫组合式API，是Vue3.x的新特性。 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要 通俗的讲： 没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，
16.Composition API(二) （watchEffect和watch的使用）
phoebemeng的博客
09-18 322
学习笔记：toRef的使用；watchEffect和watch的使用
第六章、CompositionAPI中的watch与watchEffect
weixin_42321326的博客
02-05 144
第六章、Composition中的watch与watchEffect
vue3的composition api中watch和watchEffect的使用差异
前端攻城狮
10-09 521
watch和watchEffect的使用差异
Vue3 的新特性(二) —— Composition-Api
qq_42941302的博客
08-05 1万+
本篇文章将介绍Vue3中的新增杀器 —— Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。 Composition API 的灵感来自于 React Hooks ，是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时函数式的编程使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。 如上图，在较大组件的编写中， Composition-A
Composition API -- 侦听器 watch & watchEffect
Sun_blog
07-12 401
watch惰性执行，首次不执行 可以那到原始值和当前值 ref const app = Vue.createApp({ setup(){ const { ref, watch} = Vue; let name = ref("张三"); // watch惰性执行，首次不执行 // 可以那到原始值和当前值 watch(name,
vue3watch和watcheffect使用 举例
最新发布
01-19
在Vue 3中，我们可以使用watch()函数和watchEffect()函数来进行数据监听。 1. 使用watch()函数： ```javascript import { watch } from 'vue' watch( // 监听的数据 () => state.value, // 数据变化时的回调...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值