vue ref和reactive的区别

ref 函数传入一个值作为参数,返回基于该参数的响应式ref对象

ref 接受参数,并将其包裹在一个带有 value property 的对象中返回,然后可以使用该 property 访问或更改响应式变量的值

将值封装在一个对象中,看似没有必要,但为了保持 JavaScript 中不同数据类型的行为统一,这是必须的。这是因为在 JavaScript 中,Number或 String等基本类型是通过值传递的,而不是通过引用传递的,在任何值周围都有一个封装对象,这样我们就可以在整个应用中安全地传递它,而不必担心在某个地方失去它的响应性。

let { createApp, ref } = Vue;createApp({setup() {const count = ref(0); //声明const event = () => { //修改事件count.value++;};return { count, event };}}).mount('#app')

reactive

let { createApp, reactive } = Vue;createApp({setup() {const count = reactive({a: 0}); //声明const event = () => { //修改事件count.a++;};return { count, event };}}).mount('#app')

ref主要用于基本类型的响应,比如String Number boolean,想要修改需要使用.value先获取value值进行修改reactive主要用于声明引用类型,修改时对应修改即可但是,在模板区域中使用的时候,ref因为Componsition API的封装,直接使用就行,不用加.value,但在setup函数中使用的时候必须加

注意!使用这两个的时候一定要先引入,再return出去

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

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

相关文章

解决idea修改html、js、css后,浏览器不能同步加载

重装了IDEA后,忽略了一些设置,导致在开发springboot项目时,启动了项目,修改了前端文件,但是浏览器中并不能实时加载修改的内容。 主要是IDEA的2个地方需要设置: 一、修改file-settings 二、在IDEA中&…

安全多方计算新突破!阿里首次实现“公开可验证” 的安全方案

阿里妹导读:近日,阿里安全双子座实验室与马里兰大学等高校合作的论文《Covert Security with Public Verifiability: Faster, Leaner, and Simpler 》【1】被欧洲密码年会(Eurocrypt)2019接收。这是国内公司在安全多方计算领域的第一篇顶会论文&#xff…

996!007!同是敲了2万行代码,为什么他却晋升了?

正在敲代码的你 ,春节假期即将来临,复盘这1年,你印象最深刻的一件事是什么?有人在群里回答了一条扎心的答案:忙碌1年,每天996,回首2019除了加班再无成长可说。你以为只要把事情搞定了&#xff0…

iqooneo系统要不要更新_IQOOZ1即将发布,和IQOOneo3、OPPORenoACE对比,谁更值得入手?...

高刷屏和手机使用时长本质上并没有什么关系,但是购买高刷屏的手机却可以让你得到更好的体验,而且高刷屏绝对是未来手机行业发展的一个主流方向,所以说目前如果有新机购买的计划的话,配备高刷屏的手机是一个很好的选择。不过数码君…

分布式系统:一致性模型

分布式系统中一个重要的问题就是数据复制,数据复制一般是为了增强系统的可用性或提高性能。而实现数据复制的一个主要难题就是保持各个副本的一致性。本文首先讨论数据复制的场景中一致性模型如此重要的原因,然后讨论一致性模型的含义,最后分…

消息称苹果斥资2亿美元收购Xnor.ai;华为2000万英镑投资,加速发展HMS手机生态系统;国产SSD将迎来爆发……...

戳蓝字“CSDN云计算”关注我们哦! 嗨,大家好,重磅君带来的【云重磅】特别栏目,如期而至,每周五第一时间为大家带来重磅新闻。把握技术风向标,了解行业应用与实践,就交给我重磅君吧!重…

Serverless 风暴来袭,前端工程师如何应对?

阿里妹导读:尽管大部分前端的工作并不涉及server,但最近半年serverless这个词汇以及其引发的热烈的讨论,深深触动了阿里巴巴高级前端技术专家伐薪。作为接触前端十余载的老开发,伐薪认为serverless可能会是接下来引起前端领域革命…

python实现冒泡排序算法的非递归版本_冒泡排序以及python代码实现(递归+非递归)...

一、冒泡排序比较简单的排序算法,适合小规模数据集,效率较低。依次比较相邻的两个数,将比较小的数放在前面,比较大的数放在后面。每进行一趟排序,就会少比较一个数python代码(非递归):from typing import L…

Git免密登陆远程

文章目录1. 生成公钥和私钥2. 拷贝公钥的内容,并设置到github中3.在git本地中配置ssh地址4. 以后使用5. 其他第三方代码托管仓库1. 生成公钥和私钥 执行以下命令: ssh-keygen注: windows (默认放在C:\Users\当前登录用户名.ssh目录下面) 例…

【机器学习PAI实战】—— 玩转人工智能之美食推荐

前言 在生活中,我们经常给朋友推荐一些自己喜欢的东西,也时常接受别人的推荐。怎么能保证推荐的电影或者美食就是朋友喜欢的呢?一般来说,你们两个人经常对同一个电影或者美食感兴趣,那么你喜欢的东西就很大程度上朋友…

小网站的容器化(上)

戳蓝字“CSDN云计算”关注我们哦!作者 | 王洪鹏出品 | CSDN云计算(ID:CSDNcloud)作为一枚程序员,大家几乎基本都有自己的个人网站,这些网站有的可能是自己开发的有的可能是用一些工具自动生成的&#xff0c…

Java 8中处理集合的优雅姿势——Stream

在Java中,集合和数组是我们经常会用到的数据结构,需要经常对他们做增、删、改、查、聚合、统计、过滤等操作。相比之下,关系型数据库中也同样有这些操作,但是在Java 8之前,集合和数组的处理并不是很便捷。 不过&#…

vue怎么获取用户的位置经纬度_vue 实现Web端的定位功能 获取经纬度

首先我这里的需求呢, 是获取当前用户的经纬度经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi废话不多说, 直接上代码。首先在 index.html 里面 引入然后 去你需要获取的页面 开始写, 我这里拿来测试用,所以只有一个App.vue 文件。貌似已经…

Git gitignore文件讲解

文章目录1. 忽略某个文件2. 忽略某种类型文件3. 取反不忽略指定文件4. 忽略某个文件夹5. 忽略文件配置gitignore文件放置到项目的根目录中,为了让git管理文件中忽略指定的文件、指定的文件列表、指定的文件类型等等,提交的时候git忽略配置的这些文件。 …

用Python扒出B站那些“惊为天人”的阿婆主!

戳蓝字“CSDN云计算”关注我们哦!作者 | 徐麟责编 | 阿秃前言近期B站的跨年晚会因其独特的创意席卷各大视频网站,给公司带来了极大的正面影响,股价也同时大涨,想必大家都在后悔没有早点买B站的股票:然而今天我们要讨论…

我们总结了每个技术团队都会遇到的 4 个难题

阿里巴巴 2019 年实习生校园招聘已经启动,为此,我们整理了一篇《每个技术团队都会遇到的4个难题》,帮助即将从校园进入公司实习的后端程序员,以实践的视角,看看一个后端技术团队会遇到的一些难题。虽然,技术…

怎么查看指定app日志_Linux系统查看系统信息和日志有哪些常用的命令

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言本文主要讲解Linux系统有哪些日志文件以及如果查看和分析这些日志文件。查看linux日志的方法2. Linux日志文件有哪些我们来看看L…

Git 切换提交历史节点

文章目录1. 命令版本2. idea图形化版本(推荐使用)1. 命令版本 git checkout 版本号注:适用于之前和之后 2. idea图形化版本(推荐使用) 未操作截图: 切换到第3次提交 切换到第2次提交 切换到第5次提交

阿里云RPA(机器人流程自动化)干货系列之三:阿里云RPA介绍

本文是阿里云RPA(机器人流程自动化)干货系列之三,详细介绍了阿里云RPA的产生背景、技术特点、功能特性、非功能指标以及发展现状等。 一、产生背景 在2011年,随着阿里巴巴集团的各项业务突飞猛进,集团内的各个部门都遇…