【vue】ref 和 reactive 对比

  • ref:存储单个数据,如数值,字符串
  • reactive:存储复杂数据,如对象,数组
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2><h2>{{number}}</h2><h2>{{arr}}</h2></div><script>const { createApp, reactive, ref } = VuecreateApp({setup() {const number = ref(10)const arr = ref([1,2,3,4])//ref也能存数组number.value=20 //修改number的值const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web,number,arr}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

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

相关文章

创建vue3项目遇到的部分问题及解决方式

export default defineConfig({server: {// https: true,// 启用https协议&#xff0c;默认是HTTP协议host: true, // 监听所有地址port: 1314,// 前端项目启动的端口号open: true,// 开启代理cors: false, // 为开发服务器配置 CORSproxy: {^/api: {target: ,// 服务器地址cha…

(Java)数据结构——图(第七节)Folyd实现多源最短路径

前言 本博客是博主用于复习数据结构以及算法的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 Folyd实现原理 中心点的概念 感觉像是充当一个桥梁的作用 还是这个图 我们常在一些讲解视频中看到&#xff0c;就比如dist&#xff08;-1&#xff09;&#xff0…

WooCommerce的使用方式和特点

WooCommerce是一款基于WordPress的开源电子商务插件&#xff0c;它允许用户在WordPress网站上创建和管理在线商店。以下是WooCommerce的一些使用方式和特点。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.产品管理&#xff1a;Woo…

bugku-web-file_get_contents

<?php extract($_GET); if (!empty($ac)){$f trim(file_get_contents($fn));if ($ac $f){echo "<p>This is flag:" ." $flag</p>";}else{echo "<p>sorry!</p>";} } ?> 这里涉及到几个不常用的函数 这里直接构…

2024年 Mathorcup高校数学建模竞赛(B题)| 甲骨文识别 | 特征提取,图像分割解析,小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;通过神经网络解决甲骨文识别问题。结合特征提取&#xff0c;图像分割等多元算法&…

关于Ansible的模块 ⑦

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 在继《关于Ansible的模块 ①》、《关于Ansible的模块 ②》、《关于Ansible的模块 ③》与《关于Ansible的模块 ④》、《关于ansib…

python基础——python包【创建和导入,下载第三方包】

&#x1f4dd;前言&#xff1a; 在上一篇文章python基础——模块中&#xff0c;我们讲解了有关python模块的相关知识&#xff0c;这篇文章我们进一步讲解用于储存多个模块文件的python包&#xff1a; 1&#xff0c;什么是python包 2&#xff0c;如何创建和导入python包 3&#…

选择排序解读

在计算机科学中&#xff0c;排序算法是一种将数据元素按照某种顺序排列的算法。今天&#xff0c;我们要探讨的是选择排序&#xff08;Selection Sort&#xff09;&#xff0c;这是一种简单直观的排序方法&#xff0c;通过不断选择剩余元素中的最小&#xff08;或最大&#xff0…

SpringBoot + Dobbo + nacos

SpringBoot Dobbo nacos 一、nacos https://nacos.io/zh-cn/docs/quick-start.html 1、下载安装包 https://github.com/alibaba/nacos/releases/下载后在主目录下&#xff0c;创建一个logs的文件夹&#xff1a;用来存日志 2、启动nacos 在bin目录下打开cmd运行启动命令&a…

2024年DeFi的四大主导趋势:Restaking、Layer3、AI和DePin

DeFi&#xff08;去中心化金融&#xff09;行业在2024年将继续呈现快速增长的势头&#xff0c;驱动这一增长的主要因素将是四大主导趋势&#xff1a;Restaking、Layer3、AI和DePin。这些趋势将推动DeFi生态系统的发展&#xff0c;为用户提供更多的机会和创新。 趋势1&#xff…

ERA拓展之旅:2024香港Web3峰会聚焦全球Web3发展

2024年香港Web3大型峰会是一次令人难忘的体验。这次峰会吸引了来自世界各地的Web3爱好者和从业者齐聚一堂&#xff0c;共同探讨着Web3的未来发展方向与机遇。在这个热情洋溢的氛围中&#xff0c;展现了对Web3的热情&#xff0c;分享彼此的见解和理念&#xff0c;探讨了未来的行…

性能优化-01

当看到性能指标时&#xff0c;你会首先想到什么呢&#xff1f;我相信 “高并发” 和 “响应快” 一定是最先出现在你脑海里的两个词&#xff0c;而它们也正对应着性能优化的两个核心指标—— “吞吐” 和 “延时” 。这两个指标是从应用负载的视角来考察性能&#xff0c;直接影…

Chatgpt掘金之旅—有爱AI商业实战篇|SEO 咨询业务|(十七)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术创业在SEO 咨询业务有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随…

springboot+vue高校贫困生资助勤工俭学管理系统python

本次开发一套贫困生资助管理系统有管理员和用户两个角色。管理员功能有个人中心&#xff0c;学生管理&#xff0c;院校管理&#xff0c;贫困申请管理&#xff0c;资助项目管理&#xff0c;资助申请管理&#xff0c;资助发放管理&#xff0c;勤工俭学管理&#xff0c;岗位申请管…

CMake构建OpenCv并导入QT项目过程中出现的问题汇总

前言 再此之前请确保你的环境变量是否配置&#xff0c;这是总共需要配置的环境变量 E:\cmake\bin E:\OpenCv\opencv\build\x64\vc15\bin F:\Qt\Tools\mingw730_64\bin F:\Qt\5.12.4\mingw73_64\bin 问题一&#xff1a; CMake Error: CMake was unable to find a build program…

Linux网络 基础概念

目录 背景知识 互联网的发展 局域网和广域网 网络拓扑 网络协议栈 协议的概念 网络协议的分层 网络与操作系统的联系 网络传输的基本流程 IP地址和MAC地址 以太网通信 数据包的封装和分用 跨网段传输 背景知识 互联网的发展 计算机网络是计算机技术和通信技术相…

【Android Studio报错】:* What went wrong:Out of memory. Java heap space

项目场景&#xff1a; 今天&#xff0c;刚打开自己的安卓项目发现报错&#xff1a; 报错&#xff1a; * What went wrong: Out of memory. Java heap space Possible solution: - Check the JVM memory arguments defined for the gradle process in: gradle.properties in…

路由器端口映射是什么意思?

路由器端口映射是一种网络配置技术&#xff0c;在私有网络中允许外部网络访问特定的服务或应用程序。通过将路由器的端口映射到内部客户端设备&#xff0c;可以实现从公共网络访问内部网络资源的目的。 天联组网介绍 天联是一款异地组网内网穿透产品&#xff0c;由北京金万维科…

网工基础协议——IP地址

IP地址的概念&#xff1a; IP 地址是我们进行TCP/IP通讯的基础&#xff0c;每个连接到网络上的计算机都必须有一个!P地址。我们目前使用的IP地址是32位的&#xff0c;通常以点分十进制表示。例如:192.168.0.181。IP地址的格式为: IP地址 网络地址 主机地址 或者 |P地址主机地…

windows ffmpeg7 通过rtsp拉取h265裸流

点击下边那个链接会转到github 下载完成后&#xff0c;添加include、lib到工程。 添加头文件&#xff1a; extern "C" { #include "libavcodec/avcodec.h" #include "libavformat/avformat.h" #include "libavformat/avio.h" #inclu…