当前位置:首页 > javascript > vue > 正文内容

Vue3 Computed 和 Watch 的区别

hxing6413个月前 (01-10)vue4895

Vue是一款流行的JavaScript框架,它以其简洁易用和高效的双向数据绑定而闻名。在Vue3中,Computed和Watch是两个重要的特性,它们在处理响应式数据时起到了关键作用。本文将深入探讨Vue3中Computed和Watch的区别,并通过演示代码来加深理解。


1. Computed 的特点和用法

Computed是Vue3提供的一个计算属性,它可以根据依赖的数据动态计算得出一个新的结果,并将其缓存起来,只有当依赖发生改变时才重新计算。下面是Computed的一些特点和用法:


1)缓存

Computed 会根据依赖的数据进行缓存,只有在依赖发生变化时才会重新计算,这样可以大大提高性能。


2)响应性

当依赖的数据发生变化时,Computed会自动更新并重新计算相关的值,从而保持响应性。


3)自动收集依赖

Computed 会自动追踪依赖的数据,并建立依赖关系,当依赖发生变化时,它会自动调用计算函数进行计算。


下面是一个使用 Computed 的示例代码:

<template>
  <div>
    <p>原始数值: {{ num }}</p>
    <p>平方数值: {{ square }}</p>
  </div>
</template>
<script>
import { computed, reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      num: 2,
    });
    const square = computed(() => state.num * state.num);
    return {
      num: state.num,
      square,
    };
  },
};
</script>


在上面的代码中,我们定义了一个响应式数据num,然后使用computed函数创建了一个计算属性square,它根据num的值动态计算出平方数值。在模板中,我们分别展示了原始数值和平方数值。


2. Watch 的特点和用法

Watch是Vue3提供的一个监听器,它可以监听指定的数据变化,并在数据发生变化时执行相应的回调函数。下面是Watch的一些特点和用法:


1)监听

Watch可以监听指定的数据,并在数据发生变化时执行回调函数。


2)灵活性

Watch可以监听多个数据,并在每个数据发生变化时执行不同的操作。


3)深度监听

Watch可以对对象或数组进行深度监听,即使对象内部的属性发生改变,也能触发回调函数。


下面是一个使用Watch的示例代码:

<template>
  <div>
    <p>原始数值: {{ num }}</p>
    <p>平方数值: {{ square }}</p>
  </div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
  setup() {
    const state = reactive({
      num: 2,
      square: 4,
    });
    watch(
      () => state.num,
      (newVal, oldVal) => {
        state.square = newVal * newVal;
      }
    );
    return {
      num: state.num,
      square: state.square,
    };
  },
};
</script>


在上面的代码中,我们定义了一个响应式数据num和square,然后使用watch函数监听num的变化,并在每次变化时更新square的值。在回调函数中,我们执行了平方运算并将结果赋给square。


3. Computed 和 Watch 的区别

现在我们来总结一下Computed和Watch的区别:

1)缓存机制不同

Computed会根据依赖的数据进行缓存,只有在依赖发生变化时才会重新计算,而Watch每次都会执行回调函数,没有缓存机制。

2)使用场景不同

Computed适合用于计算结果依赖于其他响应式数据的情况,比如根据输入的数值计算平方数值;而Watch适合用于监听数据的变化并执行相应的操作,比如监听表单输入的变化并发送请求。

3)自动收集依赖

Computed会自动收集依赖的数据,而Watch需要手动指定要监听的数据。


结论:

在Vue3中,Computed和Watch是处理响应式数据的重要特性。Computed适合用于计算结果依赖其他响应式数据的场景,并具备缓存和自动收集依赖的特点;而Watch适合用于监听数据变化并执行相应操作的场景,具备灵活性和深度监听的特点。根据具体的需求,在使用Computed和Watch时选择合适的方式来处理响应式数据。


总结:

本文深入探讨了Vue3中Computed和Watch的区别,并通过演示代码加深了对它们的理解。希望读者能够通过本文更好地理解和运用Vue3中的计算属性和监听器,提升开发效率和代码质量。


参考资料:


Vue官方文档:https://v3.vuejs.org/

Vue Mastery: https://www.vuemastery.com/


扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:https://www.xingxinghan.cn/?id=508

分享给朋友:
返回列表

上一篇:axios性能优化:防止重复请求

没有最新的文章了...

“Vue3 Computed 和 Watch 的区别” 的相关文章

解决uniapp全局引用组件真机不生效

当在组件中通过js install方法全局注册组件时,h5,微信端都没问题,APP端却渲染不出来。原因:uniapp提供了全局注册组件方式,遵循easyCom规范的文件会被自动注册,参考uni easycom规范...

uniapp 对接极光推送

uniapp 对接极光推送

1,进入后台登录    https://www.jiguang.cn/accounts/login/form    设置好应用包名,拿到APPKEY2,安装好极光插件    1),...

Vue3源码之createApp

Vue.js 3中的createApp是用于创建一个Vue应用的函数。它的原理可以简单地解析为以下几个步骤:1. 创建一个应用实例:createApp函数会返回一个应用实例,该实例代表整个Vue应用的根实例。2. 组件注册:通过app.component方法,可以注册全局组件或局部组件。全局组件可以...

UniApp H5项目指南:处理二维码生成和扫描操作

UniApp H5项目指南:处理二维码生成和扫描操作

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理,而二维码扫码则是基于一个第三方组件的方式进行支持的,最后通过统一入...

Vue中的父子组件通讯及使用sync同步父子组件数据

在Vue.js中,组件通讯是一个非常重要的主题。特别是在处理父子组件之间的通讯时,我们需要了解不同的方式来传递数据和响应事件。本文将介绍Vue中父子组件通讯的几种方式,并重点讨论使用sync属性来实现父子组件数据的双向绑定。父子组件通讯 在Vue中,父组件可以通过prop向子组件传递数据,而子组件则...

Vue中的防抖节流技术,提升用户交互体验

在Vue开发中,我们经常会遇到需要处理用户频繁操作的场景,例如搜索框输入联想、窗口大小改变等。这时,使用防抖节流技术能够有效地控制事件触发频率,提升用户体验和页面性能。 1. 防抖技术 防抖(Debounce)是指在事件被触发后,等...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。