vue3-响应式函数

​🌈个人主页:前端青山
🔥系列专栏:Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-响应式函数

目录

ref 响应式函数

引言:

ref 函数

reactive 函数

Reactive 与 ref 对比

vue3响应式原理

1、vue3响应式原理

ref 响应式函数

引言:

如下代码:当点击执行changeFn函数,修改setup中定义的变量时,发现页面中的name和age的数据并没有修改,说明该数据不是响应式数据

<template><div>111</div><p>{{ name }}--{{ age }}</p><button @click="changeFn">changeFn</button>
</template>
​
<script>
export default {name: "App",setup() {//定义变量let name = "张三";let age = 20;// 定义方法function changeFn() {name = "李四";age = 30;}return {//setup函数返回值为一个对象name,age,changeFn,};},
};
</script>
ref 函数
  • 它是 vue3中的一个函数,一般用于将基本类型数据处理成响应式数据。

  • 作用:定义一个基本类型的响应式的数据,只有数据成为响应式数据,这样当数据变化时,才能被监测到。

  • 使用时需要从vue中引入

  • 语法:const xxx =ref(数据变量);结果 返回一个 RefImpl 的引用对象,获取时为 xxx.value

  • 在页面模板中使用数据直接 使用插值表达式,不需要加value <p>姓名:{{ name }}</p>,因为vue3会自动帮你.value,所以可以拿到值

  • ref 函数实现数据响应式的原理还是利用了vue2的Object.defineProperty() 给数据设置 get set 监听函数,如下图:

    image-20211130230403826

  • 接收的数据类型可以是基本类型(实现响应式原理为Object.defineProperty()),也可以是对象类型(当为对象时,实现响应式的原理就是Proxy不是Object.defineProperty())

点击如下change事件,修改name 和age

<template><div><!--name这个ref 引用对象在使用时不需要加value,vue3会自动帮你加value,所以可以拿到值--><p>{{ name }}--{{ age }}</p><p>{{ job.type }}--{{job.salary}}</p><p @click="change">说话</p></div>
</template>
<script>
import { ref } from "vue"; // 引入响应式函数ref
export default {name: "App",setup() {let name = ref("张三"); //返回一个 ref 引用对象let age = ref(20);console.log(name)// 当ref传的参数为对象时let job = ref({type: "前端工程师",salary: "20k",});function change() {name.value = "李四"; // ref对象.value 修改其值age.value = 30;job.value.type = "后端开发工程师";job.value.salary = "30k";}return {name,age,change,job};},
};
</script>

reactive 函数

1.定义一个对象类型的响应式数据,返回一个Proxy 实例对象,不能用于基本数据类型,否则报错。(基本类型响应式数据使用ref)。

语法:const 代理对象= reactive(源对象) ,接收一个对象或数组,返回一个代理对象(即Proxy源对象

  • 使用时先从vue中引入

<script>
import { reactive } from "vue";
...
</script>
  • 代码如下:

<template><p>{{ job.type }} --{{ job.salary }}--{{ job.like.a.b }}--{{job.content}}</p><p v-for="(item, index) in foodArr" :key="index">{{ item }}</p><button @click="changeFn">changeFn</button>
</template>
​
<script>
import { reactive } from "vue";
export default {name: "App",components: {},setup() {//定义对象let job = reactive({type: "前端工程师",salary: "20k",like:{a:{b:'不告诉你'}}});console.log(job);//定义数组let foodArr = reactive(["刷抖音", "敲代码"]);console.log(foodArr);// 定义方法function changeFn() {job.type = "后端开发工程师";job.salary = "30k";job.content = "写代码"; // 给对象添加属性foodArr[0]='买包包' // 通过下标修改数组}return {//setup函数返回值为一个对象job,changeFn,foodArr};},
};
</script>
  • vue3中使用proxy 实现的数据响应去掉了vue2中不能检测到对象添加属性和通过下标修改数组而无法检测的情况。

Reactive 与 ref 对比

1、数据定义角度对比:

  • ref用来定义:基本数据类型

  • reactive 用来定义: 对象或数组类型数据

    注意:ref也可以定义对象或数组类型数据,它内部还是通过reactive转换成代理对象

2、原理角度对比:

  • ref通过Object.defineProperty() 的get和set 实现数据的响应式 即(数据劫持)

  • reactive 通过Proxy 实现数据响应式的,并通过Reflect 来操作源对象数据的。

3、从使用角度对比:

  • ref 定义的数据操作时需要使用 .value, 而插值表达式中使用时,不需要使用 .value

  • reactive 定义的数据操作都不需要 .value

vue3响应式原理

  • 对象数据新增属性和删除属性,不存在vue2.x 中的问题了。

<template><div><p>{{ person.name }}</p><p>{{ person.age }}</p><p>{{ person.sex }}</p><button @click="addSex">添加属性</button><button @click="deleteSex">删除属性</button></div>
</template>
​
<script>
import { reactive } from "vue";
export default {name: "App",components: {},setup() {let person = reactive({name: "张三",age: 20,});console.log(person);//定义添加属性function addSex() {person.sex = "男";console.log(person);}// 定义删除属性function deleteSex() {delete person.sex;console.log(person);}return {person,addSex,deleteSex,};},
};
</script>
  • 数组数据直接通过修改下标,修改数组,不存在vue2.x 中的问题了。

<template><div><p v-for="(item, index) in person.like" :key="index">{{ item }}</p><button @click="change">修改数组的值</button></div>
</template>
​
<script>
import { reactive } from "vue";
export default {name: "App",components: {},setup() {let person = reactive({  name: "张三",age: 20,like: ["打球", "敲代码"],});console.log(person); // proxy 实例对象function change() {person.like[0] = "打台球";}return {person,change,};},
};
</script>

1、vue3响应式原理

首先说一下Reflect的作用。

// Reflect是window下的一个内置对象
// 1. 使用reflect 访问数据let obj = {name: '张三',age: 20}console.log(Reflect.get(obj, 'name')); // 张三
// 2.使用Reflect 修改数据Reflect.set(obj, 'age', 50)console.log(obj);
​
//3.使用Reflect删除数据Reflect.deleteProperty(obj, 'name') console.log(obj);

vue3响应原理代码

通过Proxy代理,拦截对象中任意属性的变化,包括属性的读取,修改、设置、删除。

通过Reflect 反射对被代理对象的属性进行操作。

    let data = {name: "张三",age: 30}console.log(Proxy);// 使用p 对象代理data, Proxy为window 下的内置代理函数let p = new Proxy(data, {// 读取属性get(target, propName) {// target 就是 dataconsole.log(`读取p上个${propName}属性`);return Reflect.get(target, propName)},// 修改和设置属性set(target, propName, value) {// value 为赋的值console.log(`修改p的${propName}属性`);// target[propName] = valueReflect.set(target, propName, value)
​},//删除属性deleteProperty(target, propName) {console.log(`删除p上的${propName}属性`);// return delete target[propName]return Reflect.deleteProperty(target, propName)}})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GNSS技术在交通运输领域的创新应用

全球导航卫星系统&#xff08;GNSS&#xff09;技术在交通运输领域发挥着越来越重要的作用&#xff0c;为汽车导航、航空、海运等交通模式提供了精准的定位和导航服务。本文将深入探讨GNSS技术在交通运输领域的应用&#xff0c;以及它对交通管理、安全性和效率的积极影响。 一、…

这些仪表板常用的数据分析模型,你都见过吗?

本文由葡萄城技术团队发布。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 ##前言 在数字化时代&#xff0c;数据已经成为了企业决策和管理的重要依据。而仪表板作为一种数据可视化工具&#x…

Linux inotify 文件监控

Linux 内核 2.6.13 以后&#xff0c;引入了 inotify 文件系统监控功能&#xff0c;通过 inotify 可以对敏感目录设置事件监听。这样的功能被也被包装成了一个文件监控神器 inotify-tools。 使用 inotify 进行文件监控的过程&#xff1a; 创建 inotify 实例&#xff0c;获取 i…

Java中实体与Map的相互转换

一、在Java中&#xff0c;可以通过以下方法将实体类转换为Map&#xff1a; 利用Java反射机制&#xff1a; public static Map<String, Object> objectToMap(Object obj) throws IllegalAccessException {Map<String, Object> map new HashMap<>();Class&l…

【代码随想录】算法训练计划28

回溯 1、491. 递增子序列 题目&#xff1a; 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以…

@RequestBody详解:用于获取请求体中的Json格式参数

获取请求体中的Json格式参数 &#xff08;RequestBody&#xff09; 当前端将一些比较复杂的参数转换成Json字符串通过请求体传递过来给后端&#xff0c;这种时候就可以使用RequestBody注解获取请求体中的数据。 而json字符串是包含在请求体中的&#xff0c;使用请求体传参通常…

【Azure 架构师学习笔记】-Azure Storage Account(7)- 权限控制

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account&#xff08;6&#xff09;- File Layer 前言 存储帐户作为其中一个数据终端存储&#xff0c;对安全性的要求非常高&#xff0c;不管…

40、Flink 的Apache Kafka connector(kafka source的介绍及使用示例)-1

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

Linux常用命令——bmodinfo命令

在线Linux命令查询工具 bmodinfo 显示给定模块的详细信息 补充说明 bmodinfo命令用于显示给定模块的详细信息。 语法 bmodinfo(选项)(参数)选项 -a&#xff1a;显示模块作者&#xff1b; -d&#xff1a;显示模块的描述信息&#xff1b; -l&#xff1a;显示模块的许可信息…

Linux环境下安装部署单机RabbitMQ(离线)

摘要 本文档适用于在Linux系统下部署单体RabbitMQ&#xff0c;是在无网的情况下部署的。涉及的任何操作都是通过手动下载安装包然后上传到服务器上进行安装&#xff0c;因此也遇到一些问题&#xff0c;并在此文档中记录。 实际操作环境&#xff1a;Kylin V10&#xff0c;实际…

C#中反射的使用总结

反射是.NET中的重要机制&#xff0c;通过反射&#xff0c;可以在运行时获得程序或程序集中每一个类型&#xff08;包括类、结构、委托、接口和枚举等&#xff09;的成员和成员的信息。可以直接通过反射方式创建对象&#xff0c;即使这个对象的类型在编译时没有加载。本文主要介…

基于哈夫曼树的数据压缩算法

基于哈夫曼树的数据压缩算法是一种有效的编码方法&#xff0c;可以对待压缩文件进行压缩&#xff08;即编码&#xff09;&#xff0c;同时可以对压缩后的二进制编码文件进行解压&#xff08;即译码&#xff09;。以下是其工作原理&#xff1a; 输入一串字符串&#xff0c;根据…

MyBatis整合多数据源

基础环境 SpringBoot : 3.0.0 Java: jdk-17.0.5 Maven: 3.6.1引入相关jar <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&…

局域网协议:VLAN技术介绍

文章目录 VLAN概述VLAN的优点VLAN的原理VLAN的配置推荐阅读 VLAN概述 VLAN&#xff08;Virtual Local Area Network虚拟局域网&#xff09;是一种在物理网络基础上划分逻辑上独立的局域网的技术。它允许将网络设备按照逻辑上的需求而非物理位置进行分组&#xff0c;提供更好的…

Python除法

1.整数除以整数 练习下面的运算&#xff1a; >>> 2/5 0 >>> 2.0/5 0.4 0.4 >>> 2/5.0 0.4 >>> 2.0/5.0 0.4 看到没有&#xff1f;麻烦出来了&#xff08;这是在python2.x中&#xff09;&#x…

硬技能之上的软技巧(一)

在硬技能的基础上&#xff0c;如何运用软技巧来提升个人能力和职业发展。 硬技能通常指的是专业技能和知识&#xff0c;这些技能是我们在职场中安身立命的基础&#xff0c;也是我们能够胜任工作的关键。 常见的硬技能包括编程、设计、市场营销等。 然而&#xff0c;仅有硬技…

西门子S7-200SMART常见通讯问题解答

1台200SMART 如何控制2台步进电机&#xff1f; S7-200SMART CPU最多可输出3路高速脉冲&#xff08;除ST20外&#xff09;&#xff0c;这意味着可同时控制最多3个步进电机&#xff0c;通过运动向导可配置相应的运动控制子程序&#xff0c;然后通过调用子程序编程可实现对步进电…

读书笔记:彼得·德鲁克《认识管理》第29章 有效决策

一、章节内容概述 决策不是一项机械性工作&#xff0c;而是一种冒险&#xff0c;也是对判断力的考验。“正确答案”不是决策的核心&#xff0c;通常情况下无论如何都无法找到正确答案。决策的核心是对问题的认可。决策也不是一项智力活动&#xff0c;而是调 动组织的想象力、精…

矩阵相乘

描述 输入N和M建立矩阵A[N][M]&#xff0c; B[M][N] 矩阵C A * B 输出矩阵C 例如: 输入&#xff1a; 2 3 1 2 3 4 5 6 100 10 100 1 1000 -1 -1 输出: 123 3210 456 6540 输入 输入N和M&#xff0c;建立矩阵A[N][M]&#xff0c; B[M][N]&#xff0c;以-1&#xff0c;-1结尾 输入…

【算法-字符串1】反转字符串 + 反转字符串2

今天&#xff0c;带来字符串相关算法的讲解。文中不足错漏之处望请斧正&#xff01; 理论基础点这里 1. 反转字符串 题意简化 题意已经很简洁。 题意转化 将字符串的顺序倒转。 解决思路(抽象) 这道题的反转可以直接调用一个库函数&#xff0c;但是这样做意义不大。 能…