vue3中的computed和watch

news2024/12/28 5:55:19

一、computed

1. vue2和vue3中计算属性用法对比

Vue2中的计算属性
Vue2中的计算属性是通过在Vue实例的computed选项中定义函数来创建的。计算属性会根据依赖的响应式属性进行缓存，只有当依赖的属性发生变化时，计算属性才会重新求值。

举个例子，假设有一个Vue实例：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在这个例子中，fullName就是一个计算属性，它依赖于firstName和lastName两个响应式属性。当firstName或者lastName的值发生变化时，fullName会重新计算。

Vue3中的计算属性
而在Vue3中，计算属性被重命名为"由计算值推导而来的属性"或者简称"计算值"。Vue3提供了一个新的API，使用computed函数创建计算值。

举个例子，假设有一个Vue3的Composition API实例：

import { reactive, computed } from 'vue';

const state = reactive({
  firstName: 'John',
  lastName: 'Doe'
});

const fullName = computed(() => {
  return state.firstName + ' ' + state.lastName;
});

在这个例子中，fullName就是一个计算值，它依赖于state对象中的firstName和lastName两个属性。当firstName或者lastName的值发生变化时，fullName会重新计算。

在用法上，Vue3中的计算值需要使用computed函数创建，而Vue2中的计算属性直接在computed选项中定义函数即可。

另外，Vue3中的计算值可以在组合式API中使用，这给开发者提供了更大的灵活性和便利性，可以更好地组织和复用代码。而Vue2中的计算属性只能在Vue实例中直接使用。

总结起来，Vue2中的计算属性和Vue3中的计算值在使用方式上有一些区别，Vue3中的计算值具有更大的灵活性，可以在组合式API中使用，而Vue2中的计算属性只能在Vue实例中使用。

2. vue3中的computed完整用法

在上面的例子中只是简单使用了computed，它是只读的，我们并不能修改。
computed的完整用法如下：

  1. 定义computed属性：可以使用computed函数定义计算属性。在函数中，可以通过get和set来分别定义计算属性的取值和赋值函数。
import { computed } from 'vue';

const myData = computed({
  get() {
    // 计算并返回计算属性的值
  },
  set(value) {
    // 处理计算属性的赋值操作
  }
});
  1. 使用计算属性：计算属性的值可以像普通的数据属性一样在模板中使用。
<template>
  <div>
    <p>{{ myData }}</p>
  </div>
</template>

举个例子：

<template>
	姓：<input type="text" v-model="firstName">
	<br>
	名：<input type="text" v-model="lastName">
	<br>
	<span>全名：{{fullName}}</span>
	<br>
	全名：<input type="text" v-model="fullName">
</template>

<script>
	import {reactive,computed, toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写（没有考虑计算属性被修改的情况）
			/* person.fullName = computed(()=>{
				return person.firstName + '-' + person.lastName
			}) */

			//计算属性——完整写法（考虑读和写）
			person.fullName = computed({
				get(){
					return person.firstName + '-' + person.lastName
				},
				set(value){
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})

			//返回一个对象（常用）
			return {
				...toRefs(person)
			}
		}
	}
</script>

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

二、watch

1. vue2中watch的使用

在Vue2中，watch是一个用于侦听数据变化并执行相应逻辑的侦听器。它可以监听一个特定的数据源，并在该数据源发生变化时执行回调函数。

下面是多个角度的例子来说明watch的使用：

  1. 监听简单变量的变化：
data() {
  return {
    count: 0
  }
},
watch: {
  count(newVal, oldVal) {
    console.log(`count的值从${oldVal}变为${newVal}`);
  }
}

在这个例子中，我们监听了count变量的变化，并在变化时打印出旧值和新值。

  1. 监听对象属性的变化：
data() {
  return {
    user: {
      name: 'John',
      age: 25
    }
  }
},
watch: {
  'user.name'(newVal, oldVal) {
    console.log(`user.name的值从${oldVal}变为${newVal}`);
  }
}

在这个例子中，我们监听了user对象中的name属性的变化，并在变化时打印出旧值和新值。

  1. 监听数组的变化：
data() {
  return {
    todos: ['a', 'b', 'c']
  }
},
watch: {
  todos: {
    handler(newVal, oldVal) {
      console.log(`todos数组发生变化`);
    },
    deep: true
  }
}

在这个例子中，我们监听了todos数组的变化，并在变化时打印出提示信息。通过设置deep: true，也可以监听数组中元素的变化。

  1. 使用immediate属性：
data() {
  return {
    value: 0
  }
},
watch: {
  value: {
    handler(newVal, oldVal) {
      console.log(`value的值从${oldVal}变为${newVal}`);
    },
    immediate: true
  }
}

在这个例子中，我们设置了immediate属性为true，这将使得watch立即执行一次回调函数。

watch是Vue2中用于侦听数据变化的重要工具，可以在数据发生变化时执行相应的操作。无论是简单变量、对象属性还是数组，都可以使用watch来监听变化，从而实现一些复杂的逻辑。

2. vue3中watch的使用

在Vue 3中，watch侦听器函数用于监视响应式数据的变化。它可以用来执行一些逻辑或触发其他更新。
使用方法如下：

watch(要观察的数据, 回调函数, 配置选项)
  1. 监视ref所定义的一个响应式数据：
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count的值从${oldValue}变为${newValue}`);
});
  1. 监视ref所定义的多个响应式数据：
import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);

watch([count1, count2], (newVal, oldVal) => {
	// 这里的newVal和oldVal是一个数组[count1, count2]
  console.log(`count的值从${oldVal}变为${newVal}`);
});
  1. 监视reactive所定义的一个响应式数据的全部属性：
import { reactive, watch } from 'vue';

const person = reactive({
  name: '张三',
  age: 20,
});

watch(person, (newValue, oldValue) => {
  console.log(`person的值从${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`);
});
  1. 监视reactive所定义的一个响应式数据中的某个属性：
import { reactive, watch } from 'vue';

const person = reactive({
  name: '张三',
  age: 20,
});

watch(() => person.name, (newValue, oldValue) => {
  console.log(`person.name的值从${oldValue}变为${newValue}`);
});
  1. 监视reactive所定义的一个响应式数据中的某些属性：
import { reactive, watch } from 'vue';

const person = reactive({
  name: '张三',
  age: 20,
  gender: '男',
});

watch([() => person.age, () => person.gender], (newValue, oldValue) => {
	// 这里的newValue和oldValue是一个数组[person.age, person.gender]
 console.log('person中的age或者gender发生了变化', newValue, oldValue)
});

这里需要注意的是watch在监听reactive报装的对象时有三个坑

  • 无法正确的获取oldValue

就拿上面的第三个情况来说，

import { reactive, watch } from 'vue';

const person = reactive({
  name: '张三',
  age: 20,
});

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

在这里插入图片描述
从打印可以看出，每次打印的newValue和oldValue是一样的。无法正确获取上次的oldValue

  • 强制开启了深度监视（deep配置无效）
            let person = reactive({
				name:'张三',
				age:18,
				job:{
					chengxuyuan:{
						salary:20
					}
				}
			})
			watch(person, (newValue, oldValue) => {
  				console.log('person变化了',newValue,oldValue)
			});

当我们修改person中的job对象下的salary时，此处我们不用配置deep，它默认就可以深度监听，并且配置{deep: false}也无法关闭它的监听。

  • 监视的是reactive定义的对象中的某个属性依然是个对象时，又需要配置deep,并且这时的oldValue依然无法正确获取

接着上面的第二个坑讲，此时如果我们这样监听job

            watch(()=>person.job,(newValue,oldValue)=>{
				console.log('person的job变化了',newValue,oldValue)
			},{deep:true})

这个时候又需要{deep: true}配置了，如果不配置deep，它又监听不到，并且此时的oldValue值依然是无法正确获取的，和newValue一样。

3. watchEffect

watchEffect函数是Vue 3中的一个新增特性，用于在组件渲染过程中执行副作用代码。它接收一个无参数回调函数作为参数，并自动追踪回调中所使用的响应式数据。

使用watchEffect函数，可以实现类似于Vue 2中的watch函数的效果，但比watch函数更灵活和强大。下面我们从多个角度举例分析说明watchEffect函数的用法。

watchEffect()会在组件渲染之前执行一次，返回值是一个用来停止该副作用的函数。

  1. 基本用法：
import { watchEffect, reactive, ref } from 'vue'

const data = reactive({ count: 0 })
watchEffect(() => {
  console.log(data.count)
})

在上面的例子中，我们使用watchEffect函数来监视响应式数据data中的count属性，当count发生变化时，副作用代码即回调函数中的console.log语句会被执行。

  1. 处理副作用：
import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect(() => {
  document.title = `Count: ${count.value}`
})

在上面的例子中，我们使用watchEffect函数来改变页面的标题，当count的值发生改变时，页面的标题会动态更新。

  1. 控制副作用：
import { watchEffect, ref } from 'vue'

const sum= ref(0)

const stop = watchEffect(() => {
  	 console.log('sum变了', sum.value)

 	 // 当不再需要此侦听器时:
 	if (sum.value > 10) {
   	 stop()
   	}
})

在这里插入图片描述

在上面的例子中，我们使用watchEffect函数来执行一个具有控制能力的副作用代码。当sum的值大于10之后我们就可以定制watchEffect监听

  1. 异步处理：
import { watchEffect, ref, nextTick } from 'vue'

const count = ref(0)
watchEffect(async () => {
  await nextTick()
  console.log('异步副作用被执行')
})

在上面的例子中，我们使用watchEffect函数来处理异步的副作用代码。在回调函数中使用async/await语法，通过nextTick函数来等待组件更新完成后执行副作用代码。

总结：
watchEffect函数是Vue 3中用于执行副作用代码的强大工具，它可以自动追踪响应式数据的变化，并在数据发生改变时执行回调函数。通过它，我们可以非常灵活地处理副作用逻辑，包括修改页面元素、清除副作用、处理异步等。在日常开发中，合理利用watchEffect函数可以让我们更加高效地编写响应式代码。

4.watchEffect和computed的区别

watchEffect函数computed函数
基本作用监听函数内部的响应式数据变化，执行相应的副作用操作根据响应式数据的变化自动计算得到新的结果，并缓存起来供后续使用
使用方式watchEffect(() => {const double = computed(() => value.value * 2);
// 监听响应式数据的变化// 响应式数据变化，自动计算新结果并缓存
侦听的数据响应式数据响应式数据
依赖追踪自动追踪响应式数据的变化手动指定所依赖的响应式数据
执行时机在组件渲染期间立即执行仅在所依赖的响应式数据发生变化时执行
使用场景需要在响应式数据发生变化时执行副作用操作需要根据响应式数据的变化自动计算得到新的结果，并缓存起来供后续使用
需要使用已计算得到的结果进行其他操作，而不是每次都重新计算

在上述表格中，我们可以看到watchEffect函数和computed函数的不同之处。

watchEffect函数用于监听响应式数据的变化，在数据发生变化时执行副作用操作。它可以自动追踪响应式数据的变化，并在组件渲染期间立即执行副作用操作。watchEffect函数不需要手动指定依赖的响应式数据，它会自动追踪响应式数据的变化并执行副作用操作。适合于需要在响应式数据发生变化时执行副作用操作的场景。

computed函数用于根据响应式数据的变化自动计算得到新的结果，并缓存起来供后续使用。它需要手动指定所依赖的响应式数据，只有所依赖的响应式数据发生变化时，computed函数才会执行并返回新的结果。computed函数适合于需要使用已计算得到的结果进行其他操作，而不是每次都重新计算的场景。

举例来说明
假设有一个计数器和一个值，需要在计数器发生变化时输出计数器的值，而在值发生变化时输出值的两倍。则可以使用watchEffect函数监听计数器的变化，并输出计数器的值；同时使用computed函数监听值的变化，并计算得到值的两倍。当计数器发生变化时，watchEffect会立即执行输出计数器的值；当值发生变化时，computed函数会自动计算得到新的两倍值，并缓存起来供后续使用。

import { reactive, watchEffect, computed } from 'vue';

const state = reactive({
  counter: 0,
  value: 5,
});

watchEffect(() => {
  console.log('Counter:', state.counter);
});

const doubleValue = computed(() => {
  return state.value * 2;
});

watchEffect(() => {
  console.log('Double Value:', doubleValue.value);
});

state.counter++; // Output: Counter: 1
state.value = 10; // Output: Double Value: 20

当计数器发生变化时，watchEffect会立即执行，并输出计数器的值。当值发生变化时，computed函数会自动计算得到新的两倍值（20），并输出结果。

需要注意的是，watchEffect函数不会缓存计算结果，每次发生变化都会重新执行回调函数。而computed函数会自动缓存计算结果，只有当依赖的响应式数据发生变化时才会重新计算值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/727114.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【环境配置】Conda报错 requests.exceptions.HTTPError

【环境配置】Conda报错 requests.exceptions.HTTPError

问题&#xff1a; conda 创建新的虚拟环境时报错 Collecting package metadata (current_repodata.json): done Solving environment: done# >>>>>>>>>>>>>>>>>>>>>> ERROR REPORT <<<<<<…
阅读更多...
OpenCVForUnity（二）基本图像容器Mat

OpenCVForUnity（二）基本图像容器Mat

这里写目录标题 前言Mat指针引用说明存储的方式如何创建一个Mat对像 前言 今天继续学习OpenCV的基本单位Mat. 学计算机的同学都知道在计算机中,你所看到的一切其都是数据的呈现.期最底层的本质皆是0和1的构成的.当然图片,视频等等也不例外.我们用相机,扫描仪核磁共振成像等方式…
阅读更多...
OpenAI深夜放大招，GPT4 API全面开放并弃用一系列旧模型

OpenAI深夜放大招，GPT4 API全面开放并弃用一系列旧模型

GPT-4 API 现已向所有付费 OpenAI API 客户开放。GPT-3.5 Turbo、DALLE 和 Whisper API 现已普遍可用&#xff0c;我们宣布了一些旧型号的弃用计划&#xff0c;这些型号将于 2024 年初退役。 ✅ GPT4 API面向付费用户开放&#xff0c;不需要再额外申请,并且具有8K上下文&#…
阅读更多...
bash文件输入到txt文件中

bash文件输入到txt文件中

bash test_bct.sh >> test.txt结果如下
阅读更多...
WeeChat 4.0.0 正式发布

WeeChat 4.0.0 正式发布

导读WeeChat (Wee Enhanced Environment for Chat) 是一款自由开源的轻量级 IRC 客户端&#xff0c;具有高度的可定制特性&#xff0c;并且可以通过脚本进行扩展。 WeeChat 支持大多数的平台和操作系统&#xff0c;例如 Linux、BSD、macOS、Debian GNU/Hurd、HP-UX、Solaris、…
阅读更多...
全国产化适配低代码平台，政企数字化的不二选择

全国产化适配低代码平台，政企数字化的不二选择

编者按&#xff1a;在国家政策及战略方向的指导下&#xff0c;信创产业已成为奠定中国未来发展的重要数字基础&#xff0c;而国产化则可以解决核心技术关键被“卡脖子”的问题。另一方面&#xff0c;低代码平台能够为企业加速交付业务应用&#xff0c;降低运营成本&#xff0c;…
阅读更多...
插入排序（思路+代码）

插入排序（思路+代码）

变量&#xff1a; index &#xff1a;代表待插入数的前一个数的下标&#xff0c;依次往回找&#xff0c;找到找到结果。 indexvalue&#xff1a;代表待插入元素的值&#xff0c;找到位置之后往index1的位置插入元素 代码&#xff1a; import java.util.Arrays;public class …
阅读更多...
【库表操作】

【库表操作】

一、数据库Market中创建表customers 1、创建数据库 #创建数据库 mysql> create database Market; mysql> use Market;2、创建数据表 #创建数据表 mysql> create table customers(-> c_num int(11) primary key auto_increment,-> c_name varchar(50),-> c_…
阅读更多...
iOS-配置Universal Links通用链接

iOS-配置Universal Links通用链接

1、开启Associated Domains服务 登录苹果开发者网站&#xff0c;在Certificates, Identifiers & Profiles页面左侧选择Identifiers&#xff0c;右侧选择对应的App ID&#xff0c;点击进入配置详情页&#xff0c;开启Associated Domains服务&#xff1b; 2、更新Profile文件…
阅读更多...
【动手学习深度学习--逐行代码解析合集】09权重衰减

【动手学习深度学习--逐行代码解析合集】09权重衰减

【动手学习深度学习】逐行代码解析合集 09权重衰减 视频链接&#xff1a;动手学习深度学习–权重衰减 课程主页&#xff1a;https://courses.d2l.ai/zh-v2/ 教材&#xff1a;https://zh-v2.d2l.ai/ 0、准备工作 import matplotlib # 注意这个也要import一次 import matplotli…
阅读更多...
Wordpress的mysql迁库遇到问题

Wordpress的mysql迁库遇到问题

在我们迁移库的时候经常会出现如下问题&#xff1a; 5.7日期默认0000-00-00 00:00:00 设置错误。 MySQL默认设置中不支持日期datetime格式下的0000-00-00 00:00:00。 解决方法如下&#xff1a; select sql_mode 来查看对应内容 ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO…
阅读更多...
vue打包后，生成的dist文件出现浏览器缓存问题——技能提升

vue打包后，生成的dist文件出现浏览器缓存问题——技能提升

最近同事问我&#xff0c;打包后的项目放在服务器上后&#xff0c;在终端打开时&#xff0c;必须清除浏览器缓存也就是ctrlF5才可以。 我打包后查看dist/index.html文件 发现没有css和js文件都有不同版本号的标识&#xff0c;按道理来说&#xff0c;是不会出现这个缓存的问题…
阅读更多...
在Chrome谷歌浏览器中执行JavaScript的方法

在Chrome谷歌浏览器中执行JavaScript的方法

在Chrome谷歌浏览器中如何执行JavaScript&#xff1f;在Chrome 浏览器中可以通过按下 F12 按钮或者右击页面&#xff0c;选择"检查"来开启开发者工具。 也可以在右上角菜单栏选择 "更多工具"》"开发者工具" 来开启&#xff1a; 1、Console 窗口调…
阅读更多...
基于机器学习的情感分析

基于机器学习的情感分析

1基于机器学习 是指选取情感词作为特征词&#xff0c;将文本矩阵化&#xff0c;利用logistic Regression, 朴素贝叶斯(Naive Bayes)&#xff0c;支持向量机&#xff08;SVM&#xff09;等方法进行分类。最终分类效果取决于训练文本的选择以及正确的情感标注。 在训练过程&#…
阅读更多...
骨传导耳机音质怎么样，盘点在音质方面表现不错的五款骨传导耳机

骨传导耳机音质怎么样，盘点在音质方面表现不错的五款骨传导耳机

骨传导耳机凭借不入耳就能轻松听音乐的特点&#xff0c;被越来越多人所认识&#xff0c;相比传统的入耳式耳机&#xff0c;骨传导耳机拥有更多的可玩性&#xff0c;比如说跑步、游泳、健身都可以佩戴骨传导耳机&#xff0c;即使长时间佩戴也不会出现不适感&#xff0c;也不会出…
阅读更多...
LinearAlgebraMIT_3_InverseMatrix

LinearAlgebraMIT_3_InverseMatrix

x.1 矩阵乘法 矩阵乘法的常用运算规则有五种&#xff0c;如下是一种&#xff0c;是最简单的矩阵乘法&#xff0c;用一行乘以一列&#xff0c;假设A是mxn的矩阵&#xff0c;B是nxp的矩阵&#xff0c;则最终得到mxp的矩阵。 在矩阵A和向量a乘法中&#xff0c;我们已经习惯性地将…
阅读更多...
Sumifs函数（excel）

Sumifs函数（excel）

SUMIFS 函数是一个数学与三角函数&#xff0c;用于计算其满足多个条件的全部参数的总量。excel如何使用Sumifs函数&#xff1f; 工具/原料 联想ThinkPad X1 windows7 WPS office2021 方法/步骤 首先运行office软件&#xff0c;打开一份表格&#xff0c;今天我们要计算以“…
阅读更多...
SDN-OpenDaylight与Mininet的原理、安装、使用

SDN-OpenDaylight与Mininet的原理、安装、使用

一、前言 本文将介绍OpenDaylight与Mininet的原理并介绍他们的安装及简单的使用&#xff0c;本实验的环境为Liunx Ubuntu 16.04&#xff0c;已成功安装OVS&#xff0c;但没有安装Mininet。 二、原理 &#xff08;一&#xff09;OpenDaylight OpenDaylight是一个软件定义网络&…
阅读更多...
【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】

【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】

前言 【抖音小游戏】 Unity制作抖音小游戏方案 最新完整详细教程来袭【持续更新】一、相关准备工作1.1 用到的相关网址1.2 注册字节开发者后台账号 二、相关集成工作2.1 下载需要的集成资源2.2 安装StarkSDK和starksdk-unity-tools工具包2.3 搭建测试场景 三、构建发布3.1 发布…
阅读更多...
2.5 DNS 应用 -- 1. DNS 概述

2.5 DNS 应用 -- 1. DNS 概述

2.5 DNS 应用 -- 1. DNS 概述 DNS&#xff1a;Domain Name SystemDNS分布式层次式数据库DNS根域名服务器TLD和权威域名解析服务器本地域名解析服务器 DNS 查询迭代查询递归查询 DNS记录缓存和更新 DNS&#xff1a;Domain Name System Internet上主机/路由器的识别问题 IP地址域…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023