Vue3-ref函数、reactive函数的响应式

Vue3-ref函数、reactive函数的响应式

在这之前,先讲Vue2的响应式处理

  • Vue2原本使用的是Object.defineProperty的响应式处理方式
    • methods方法中的this.name指的是vm.name
    • return的name属性在通过this.name的间接调用时,通过了Object.defineProperty响应式处理
// App.vue
<template>
    <h2>姓名:{{name}}</h2>
    <button @click="modifyName">修改姓名</button>
</template>

<script>
    export default {
        name : 'App',
        data(){
            return {
                name : '张三'
            }
        },
        // 在methods的this.name 调用到 data的name的过程中,使用了Object.defineProperty
        // 从而将 张三 改成 李四
        methods:{
            modifyName(){
                this.name = '李四'
            }
        }
    }
</script>

ref函数的响应式(适用于基本数据类型)

  • 原理:
    • ref函数通过对数据进行一个包装,然后返回一个全新的对象,叫做引用对象RefImpl
    • 在这个RefImpl对象中有一个value属性,而value属性底层调用了Object.defineProperty响应式
    • 而value属性有set和get:
      • 读取RefImpl对象的value属性时:get
      • 修改RefImpl对象的value属性时:set
  • 使用前导入:import {ref} from 'vue'

基本数据类型的响应式处理 ref(基本数据类型)

在这里插入图片描述

// App.vue
<template>
    <h2>姓名:{{nameRefImpl}}</h2>
    <button @click="modifyInfo">修改用户的信息</button>
</template>

<script>
    // 要先导入
    import {ref} from 'vue'
    export default {
        name : 'App',
        setup(){
            // 这里是Object.defineProperty响应式处理
            let nameRefImpl = ref('张三')
            // 这里调用的是value属性的get方法
            console.log(nameRefImpl.value);
            
            function modifyInfo(){
                // 这里调用的是value属性的set方法
                nameRefImpl.value = '李四'
            }
            
            return{nameRefImpl, modifyInfo}
        }
    }
</script>

对象形式的响应式处理 ref({})(不用)

  • 用ref函数包装对象形式,底层也就是reactive函数的调用

在这里插入图片描述

// App.vue
<template>
    <h2>姓名:{{nameRefImpl.name}}</h2>
    <button @click="modifyInfo">修改用户的信息</button>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name : 'App',
        setup(){
            let nameRefImpl = ref({
                name : 'zhangsan'
            })
            
            function modifyInfo(){
                nameRefImpl.value.name = 'lisi'
            }
            
            return{nameRefImpl, modifyInfo}
        }
    }
</script>

reactive函数的响应式(适用于对象形式)

  • 原理:将一个对象直接包裹,实现响应式,底层生成一个Proxy对象
  • 使用前导入:import { reactive } from 'vue'

在这里插入图片描述

<template>
    <h2>选课列表</h2>
    <ul>
        <li v-for="(course, index) in courseProxy.courses" :key="index">
            {{index}}, {{course}}
        </li>
    </ul>
    <button @click="modifyCourse">修改课程信息</button>
</template>

<script>
    // 导入
    import { reactive } from 'vue'
    export default {
        name : 'App',
        setup() {
            // data
            let courseProxy = reactive({
                courses : ['语文', '数学', '英语', '科学']
            })

            // methods
            function modifyCourse(){
                userProxy.courses[2] = '地理'
            }
            // 返回对象
            return{courseProxy, modifyCourse}
        }
    }
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

火山引擎公共云·城市分享会:共享云经验,一起向未来

数智化时代的来临&#xff0c;不仅激发了行业对云计算的资源需求&#xff0c;也重构了云计算的技术架构及产品布局&#xff0c;给业务场景带来更多可能性&#xff0c;让云计算成为企业走向高效治理的一剂“良方”。随着业务的多样化、复杂化&#xff0c;企业应该如何借助云计算…

极兔面试:微服务爆炸,如何解决?Uber 是怎么解决2200个微服务爆炸的?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&#x…

【ubuntu 快速熟悉】

ubuntu 快速熟悉 2.ubuntu桌面管理器3.ubuntu常见文件夹说明4.ubuntu任务管理器4.1 gnome桌面的任务管理器4.2 实时监控GPU4.3 top 命令 5.ubuntu必备命令5.1 .deb文件5.2 查找命令5.2.1 find文件搜索5.2.2 which查找可执行文件的路径5.2.3 which的进阶&#xff0c;whereis5.2.…

Linux学习教程(第一章 简介)2

第一章 Linux简介 四、类UNIX系统是什么鬼? 《三、UNIX和Linux的区别》中讲到了 UNIX 系统的历史,UNIX 是操作系统的开山鼻祖,是操作系统的发源地,后来的 Windows 和 Linux 都参考了 UNIX。 有人说,这个世界上只有两种操作系统: UNIX 和类 UNIX 操作系统;其它操作系统…

解决:Git报错same change IDs

当使用git review的时候&#xff0c;review失败&#xff0c;报错multi commit …same change ids。。 错误&#xff1a; same Change-Id in multiple changes 意思是说&#xff0c;有多个commit记录的change ids是相同的&#xff0c;这change id概念出现在gerrit&#xff0…

数电发票接口服务商怎么选择?

自2023年11月1日起&#xff0c;除了港澳台、西藏外&#xff0c;全国范围内都开展了数电票开票试点&#xff0c;对于那些已经习惯使用传统税控开票接口的企业&#xff0c;如今在数电发票的试点下&#xff0c;原本的税控开票接口如同老去的侠客&#xff0c;曾经的荣光已经不再。在…

Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

1、背景介绍 采用复旦微的ZYNQ&#xff0c;跑linux操作系统&#xff0c;在应用程序中使用usleep进行延时时&#xff0c;发现存在10ms以下采用usleep试验都为10ms的情况 2、解决办法 使能设备树中的PS TTC设备&#xff0c;默认不是打开的 timere0024000 {compatible "s…

Android—幸运抽奖火箭发射倒计时(第六次作业)

Android—幸运抽奖&&点火发射&#xff08;第六次作业&#xff09; 创建项目 准备工作 修改按钮的颜色&#xff0c;如果不修改这行代码&#xff0c;那么后期给按钮添加background属性的时候&#xff0c;按钮并不会发生变化。 设置按钮的样式文件btn_press_blue.xml&am…

【原创分享】Mentor PADS将PCB封装直接添加到PCB的教程

一般&#xff0c;批量添加封装到PCB板上有以下方法&#xff1a; 第一步&#xff1a;点击菜单栏“ECO模式--添加元器件”如图&#xff0c;点击以后弹出如图界面。 1&#xff09;元件类型 PCB封装必须得添加完元件类型&#xff0c;才能通过ECO模式添加到PCB界面里面&#xff0c…

北斗卫星为油气行业发展注入新动力

北斗卫星为油气行业发展注入新动力 北斗卫星是中国自主研发的卫星导航系统&#xff0c;在全球范围内具有广泛应用。随着科技的进步和社会的发展&#xff0c;北斗卫星的智慧应用也逐渐在各行各业中崭露头角。特别是在油气行业&#xff0c;北斗卫星的智慧应用发挥了非常重要的作用…

elemetui 解决同个页面,同时使用多个el-table表格组件导致的数据错乱

1、背景 在一个页面中&#xff0c;使用了饿了么框架的3个el-table表格&#xff0c;3个表格平级&#xff0c;只不过是根据条件判断渲染哪个表格。本来以为使用v-if就可以隔离&#xff0c;没想到还是出现了问题&#xff0c;因为3个表格中有几列绑定的字段一模一样&#xff0c;导…

Python编程必备:itertools库功能全解析!

大家好&#xff0c;我是涛哥&#xff0c;今天为大家分享itertools库常用功能&#xff0c;并且为大家提供示例&#xff0c;全文5000字&#xff0c;大约阅读15分钟。 什么是 itertools&#xff1f; itertools是Python的一个内置模块&#xff0c;它提供了一系列用于迭代的函数&…

动态规划:918. 环形子数组的最大和

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《算法》 文章目录 前言一、题目解析二、解题思路解题思路状态表示状态转移方程初始化填表顺序返回值 三、代码实现总结 前言 本篇文章仅是作为小白的我的一些理解&#xff0c;&#xff0c;…

PyGWalker :数据分析中最优秀工具库!

假设你在 Jupyter Notebook 中有一堆数据需要分析和可视化。PyGWalker 就像一个神奇的工具&#xff0c;使这一切变得非常容易。它接受你的数据并将其转换成一种特殊的表格&#xff0c;你可以像使用 Tableau 一样与之交互。 你可以通过视觉方式探索数据&#xff0c;进行互动&am…

字符串的模式匹配(朴素模式匹配算法,KMP算法)

目录 1.朴素模式匹配算法1.定义2.算法实现3.代码实现 2.KMP算法1.优化思路2.next数组3.代码实现 3.求next数组4.KMP算法优化1.next数组的优化2.求nextval数组 1.朴素模式匹配算法 子串&#xff1a;主串的一部分&#xff0c;一定存在。 模式串&#xff1a;不一定能在主串中找到。…

基于超宽带技术的人员定位系统源码,spring boot+ vue+ mysql定位系统源码

​UWB定位技术源码 超宽带技术的人员定位系统源码 UWB人员定位系统是一种基于超宽带技术的人员定位系统&#xff0c;它通过发送和接收超短脉冲信号&#xff0c;在测距方面可以达到微米级精度。这种系统通常需要具备高精度的定位能力&#xff0c;通常需要达到微米级别&#xff0…

11个最受欢迎的3D打印AI软件【2023】

如今&#xff0c;人工智能&#xff08;AI&#xff09;似乎已经成为每个人都在谈论的话题。 尽管围绕该技术的伦理问题存在着重要的讨论&#xff0c;但不可否认的是&#xff0c;人工智能可能成为包括 3D 打印在内的许多不同行业的重要工具。 事实上&#xff0c;人工智能在 3D 打…

C 语言 switch 语句

C 语言 switch 语句 在本教程中&#xff0c;您将通过一个示例学习在C语言编程中创建switch语句。 switch语句使我们可以执行许多代替方案中的一个代码块。 虽然您可以使用if…else…if阶梯执行相同的操作。但是&#xff0c;switch语句的语法更容易读写。 switch … case的语…

2014年计网408

第一题 在 OSI 参考模型中, 直接为会话层提供服务的是()A. 应用层B. 表示层C. 传输层D. 网络层 运输层是会话层的相邻下层&#xff0c;它为会话层直接提供服务。运输层也称为传输层。 第二题 某以太网拓扑及交换机当前转发表如下图所示, 主机 00-e1-d5-00-23-a1 向主机 00−…

【MATLAB源码-第76期】基于模拟退火算法(SA)的无人机三维地图路径规划,输出最短路径和适应度曲线

操作环境&#xff1a; MATLAB 2022a 1、算法描述 模拟退火算法是一种启发式优化算法&#xff0c;通常用于解决组合优化问题&#xff0c;例如旅行商问题和图着色问题。它模拟了固体材料在退火过程中逐渐冷却达到稳定状态的行为&#xff0c;以寻找问题的全局最优解。 以下是模…