vue3 学习笔记08 -- computed 和 watch

vue3 学习笔记08 -- computed 和 watch

computed

computed 是 Vue 3 中用于创建计算属性的重要 API,它能够根据其它响应式数据动态计算出一个新的值,并确保在依赖数据变化时自动更新。

  1. 基本用法 squaredCount 是一个计算属性,它依赖于 count 的值,并且会在 count 变化时自动更新

    js 复制代码
    import { ref, computed } from 'vue';
     // 定义一个响应式数据
     const count = ref(1);
    
     // 定义一个计算属性
     const squaredCount = computed(() => count.value * count.value);
    
     console.log(squaredCount.value); // 输出:1
    
     // 修改 count,触发计算属性更新
     count.value = 2;
     console.log(squaredCount.value); // 输出:4
  2. 缓存和计算属性的惰性求值 computed 默认会缓存计算结果,只有在它的依赖项变化时才会重新计算。这样可以确保在性能上的优化,避免不必要的计算

    js 复制代码
         import { ref, computed } from 'vue';
    
         const count = ref(1);
    
         // 定义一个计算属性,使用 getter 函数
         const squaredCount = computed(() => {
         console.log('computed squaredCount'); // 仅在首次获取或依赖变化时输出
         return count.value * count.value;
         });
    
         console.log(squaredCount.value); // 输出:1
         count.value = 2;
         console.log(squaredCount.value); // 输出:4
  3. 计算属性的 setter 在某些情况下,可能需要通过计算属性设置值。Vue 3 允许定义计算属性的 get 和 set 方法,使其可以作为双向绑定的源。

    js 复制代码
     import { ref, computed } from 'vue';
    
     const firstName = ref('John');
     const lastName = ref('Doe');
    
     const fullName = computed({
     get: () => `${firstName.value} ${lastName.value}`,
     set: (value: string) => {
         const names = value.split(' ');
         firstName.value = names[0];
         lastName.value = names[names.length - 1];
     }
     });
    
     console.log(fullName.value); // 输出:John Doe
    
     fullName.value = 'Jane Smith';
     console.log(firstName.value); // 输出:Jane
     console.log(lastName.value); // 输出:Smith
  4. 在 Vue 组件中使用 在 Vue 组件中,可以将计算属性直接用于模板中,而不需要额外的 .value 访问方式。

    vue 复制代码
    <template>
     <div>
         <p>Count: {{ count }}</p>
         <p>Squared Count: {{ squaredCount }}</p>
     </div>
     </template>
    
     <script setup>
     import { ref, computed } from 'vue';
    
     const count = ref(1);
     const squaredCount = computed(() => count.value * count.value);
     </script>
watch

watch 函数用于监听一个响应式数据的变化,它可以用来执行一些副作用操作,比如异步请求、处理复杂逻辑或者更新状态

  1. 监听响应式数据的变化
js 复制代码
  import { ref, watch } from 'vue';

  const count = ref(0);
  // 通过 watch 函数监听 count 的变化。每当 count 发生变化时,回调函数会被调用,同时传入新值 newValue 和旧值 oldValue。
  watch(count, (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  });
  1. 监听多个数据的变化

    js 复制代码
      import { ref, watch } from 'vue';
    
     const firstName = ref('John');
     const lastName = ref('Doe');
    
     watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
        console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`);
     });
  2. 异步处理和立即执行

js 复制代码
  import { ref, watch } from 'vue';

  const count = ref(0);

  watch(count, async (newValue, oldValue) => {
     console.log(`count changed from ${oldValue} to ${newValue}`);
      // 异步操作示例
      try {
          await someAsyncOperation(newValue);
      } catch (error) {
          console.error('Async operation failed:', error);
      }
  }, { immediate: true }); // 立即执行回调函数
  1. 停止监听 watch终止监听,只需要将watch赋值给一个变量,当达到条件调用watch赋值的那个变量就可以终止监听了

    js 复制代码
      import { ref, watch } from 'vue';
    
     const count = ref(0);
    
     const stopWatching = watch(count, (newValue, oldValue) => {
       console.log(`count changed from ${oldValue} to ${newValue}`);
     });
    
     // 停止监听
     stopWatching();
相关推荐
云上艺旅20 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
ElasticPDF-新国产PDF编辑器20 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
你觉得20520 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西21 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ21 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007521 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
Billy Qin21 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌1 天前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
吴梓穆1 天前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
头顶秃成一缕光1 天前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc