vue3的创建使用

一、vue3

用vite创建vue3项目

  • 注意node.js版本

  • 创建一个文件夹

image-20240411161813028

image-20240411161949433

  • 首先要 安装npm : npm i

  • 运行 npm run dev

  • 新建了testView alt+ shift + enter

    image-20240411165222074 image-20240411165240020
  • image-20240411165901371

  • 运行js文件

    • cd .\ project\
    • node .\index.js\

二、vue3的特性(vue2和vue3的区别)

  • 使用Proxy代替defineProperty实现数据响应式
  • 重写DOM的实现和Tree-Shaking
  • Composition API:组合式api
  • 编译器的优化
  • 打包大小减少41%
  • 初次渲染快55%,更新渲染快133%
  • 内存减少54%

三、setup

  • 是一个专门用于组合式API的特殊钩子函数
  • 所有的组合API函数都在此使用,只在初始化时执行一次
  • 函数如果返回对象,对象中的属性或方法,模板中可以直接使用
  • 在beforeCreate之前执行(一次),此时组件对象还没有创建

四、将非响应式数据转换为响应式数据

1、reactive

  • 用于定义引用类型数据(数组或对象)的响应式。
  • 将对象内部所有嵌套属性都转换为响应式的数据
  • 基于 ES6 的Proxy 的基础上实现的
    特点:
  • 响应式转换式“深层的”
var obj = reactive({age: '18',object: {age1: 20}
})
function add() {obj.age++obj.object.age1++console.log(obj)
}
<div> {{ obj }} </div>

image-20240411181832416

image-20240411181913185
  • console.log(obj1 == obj) //true
    

2、ref

  • 用于将数据转换为可响应式的引用对象
  • js中操作数据: xxx.value
import { reactive, ref } from 'vue'
let age = ref(18)
function getAge() {age.value++ //注意.valueconsole.log(age)
}

3、响应式 vs 非响应式

  • **响应式对象:**逻辑层数据发生改变会影响视图层的变化
  • **非响应式对象:**逻辑层数据发生变化不会影响视图层的变化

五、forceUpdate()、nextTick()

  • this.$forceUpdate():强制页面刷新
  • nextTick():在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
nextTick( () =>{ }) //元素发生改变时候重新执行一遍

六、计算属性和监听属性

1、计算属性 computed

  • computed( () => {} ) 直接使用get
  • computed( { get(){}, set ( ){ } } )

2、监听属性 watch

  • 监听属性
watch(监听的属性,回调函数(newVal,oldVal),{deep:true,immediate:true})
  • 监听多个
//监听属性 watch (监听的属性,回调函数(newVal,oldVal) )
watch([firstName, lastName], (newVal, oldVal) => {console.log(newVal, oldVal)
}, { deep: true, immediate: true })
  • watchEffect监听
    • 立即执行监听
    • 并且监听所有的响应式数据
watchEffect(()=>{console.log(11111)console.log(firstName.value)
})

3、watch和watchEffect的区别?

watch函数

  • 与watch配置功能一致
  • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  • 通过配置deep为true, 来指定深度监视

watchEffect函数

  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  • 默认初始时就会执行第一次, 从而可以收集需要监视的数据
  • 监视数据发生变化时回调

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

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

相关文章

solidworks electrical 2D和3D有什么区别

SolidWorks Electrical 是一款专为电气设计开发的软件工具&#xff0c;它提供了两种主要的工作环境&#xff1a;2D电气设计和3D电气集成设计。两者在功能和应用场景上存在显著的区别&#xff1a; SolidWorks Electrical 2D 设计 特点与用途&#xff1a; SolidWorks Electrica…

水泵轴承的寿命计算

水泵轴承的寿命计算 按平均值法计算滑动轴承的寿命&#xff0c;对参加试验的多个相同滑动轴承&#xff0c;按试验前、后对运动副零件尺寸的精密测量结果&#xff0c;算出平均的磨损量&#xff0c;与滑动运动幅允许的最大配合间隙进行比较&#xff0c;得出运动副的使用寿命或更…

专科学习嵌入式合适吗?

专科学习嵌入式是完全合适的&#xff0c;但确实需要注意一些因素以确保你的学习之路更加顺利。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信2…

Redis的管道技术

Redis的管道技术允许客户端发送多个命令到服务器而无需等待响应&#xff0c;并在完成后一次性获取所有命令的响应。这种批量执行命令的方式可以显著提高客户端与服务器之间的通信效率&#xff0c;特别是在需要发送大量命令的情况下。 原理&#xff1a; 当客户端开启管道模式后&…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之九 简单视频卡通画效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之九 简单视频卡通画效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之九 简单视频卡通画效果 一、简单介绍 二、简单视频卡通画效果实现原理 三、简单视频卡通画效果…

Mac M2安装 Windows

由于需要在 Windows 上使用一些软件&#xff0c;今天在 Mac M2 上安装了 Windows 11。以前在 X86 Mac 上安装很容易&#xff0c;都是 X86 架构随便找个镜像安装上就可以用了。到了 M1/M2 Arm 架构就会麻烦一些&#xff0c;先在网上找到 Windows 10 Arm 架构的安装镜像&#xff…

Kubernetes (K8s) 部署前后端分离项目

要使用Kubernetes (K8s) 部署一个涵盖Django后端、Vue前端、Redis、Nginx、RabbitMQ和MySQL的前后端分离项目,需要遵循以下步骤。这个过程涉及创建和配置多个资源,包括部署(Deployments)、服务(Services)、配置映射(ConfigMaps)、密钥(Secrets)和Ingress规则。 大纲…

(五)PostgreSQL的管理工具pgAdmin

PostgreSQL的管理工具pgAdmin pgAdmin 是一款流行的开源图形界面管理工具&#xff0c;用于 PostgreSQL 数据库的管理和开发。它提供了一个易于使用的界面&#xff0c;允许用户执行各种数据库任务&#xff0c;如创建和修改数据库对象&#xff08;表、视图、索引等&#xff09;、…

【简单讲解下Symfony框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

test4122

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版

IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版 文章目录 IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版前言 第一步&#xff1a; IntelliJ IDEA 2024.1安装教程第 0 步&…

ffmpeg编解码opus注意事项

opus采样率可以是&#xff1a;8000、12000、16000、24000、或48000 opus支持单双通道&#xff0c;但如果使用webrtc则必须双通道 采样格式可以是&#xff1a;AV_SAMPLE_FMT_S16&#xff0c;AV_SAMPLE_FMT_FLT 获取输入音频编码的数据大小&#xff0c;假如输入是实时流&#…

中国网站数量竟然比2022年多了10000个

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 CNNIC发布了最新中国互联网报告&#xff0c;报告显示&#xff1a; 2018年中国有523万个网站&#xff0c;2023年13月下降到388万个&#xff0c;5年时间网站数量下降30%&#xff0c;但相比于2022年12月&#xff0c;竟…

ssm042在线云音乐系统的设计与实现+jsp

在线云音乐系统的设计与实现 摘 要 随着移动互联网时代的发展&#xff0c;网络的使用越来越普及&#xff0c;用户在获取和存储信息方面也会有激动人心的时刻。音乐也将慢慢融入人们的生活中。影响和改变我们的生活。随着当今各种流行音乐的流行&#xff0c;人们在日常生活中经…

《哈迪斯》自带的Lua解释器是哪个版本?

玩过《哈迪斯》&#xff08;英文名&#xff1a;Hades&#xff09;吗&#xff1f;最近在研究怎么给这款游戏做MOD&#xff0c;想把它的振动体验升级到更高品质的RichTap。N站下载了一些别人做的MOD&#xff0c;发现很多都基于相同的格式&#xff0c;均是对游戏.sjon文件或.lua文…

学习Rust的第二天:Cargo

We dive into Cargo, the powerful and convenient build system and package manager for Rust. 基于Steve Klabnik的《The Rust Programming Language》一书&#xff0c;我们深入了解Cargo&#xff0c;这是Rust强大而方便的构建系统和包管理器。 Cargo is a robust and effic…

oracle 数据库错误信息

7 ASMCMD-08001 至 ASMCMD-09604 ASMCMD-08001&#xff1a;“磁盘组”string不存在或未安装 原因&#xff1a;操作失败&#xff0c;因为指定的磁盘组不存在或未被当前Oracle自动存储管理&#xff08;Oracle ASM&#xff09;实例挂载。 操作&#xff1a;验证指定的磁盘组名称是否…

5G-A有何能耐?5G-A三载波聚合技术介绍

2024年被称作5G-A元年。5G-A作为5G下一阶段的演进技术&#xff0c;到底有何能耐呢&#xff1f; 三载波聚合&#xff08;3CC&#xff09;被认为是首个大规模商用的5G-A技术&#xff0c;将带来手机网速的大幅提升。 █ 什么是3CC 3CC&#xff0c;全称叫3 Component Carriers…

纯小白蓝桥杯备赛笔记--DAY14(计算几何)

文章目录 计算几何基础平面几何距离圆的周长和面积圆与圆之间的关系&#xff1a;海伦公式计算三角形面积点到直线的距离 点积和叉积例题&#xff1a; 点和线的关系点的表示形式和代码判断点在直线的那边点到线的垂足点到线的距离例题-1242例题-1240升级--点到线段的距离--1285 …

突破编程_C++_网络编程(Windows 套接字(处理 TCP 粘包问题))

1 TCP 协议与粘包问题概述 1.1 TCP 粘包的产生原因 TCP粘包问题的产生原因涉及多个方面&#xff0c;主要的原因如下&#xff1a; 首先&#xff0c;发送方在发送数据时&#xff0c;由于TCP协议为提高传输效率而采用的Nagle算法&#xff0c;可能会将多个小数据包合并成一个大数…