IT评测·应用市场-qidao123.com技术社区

标题: 学习vue3的条记 [打印本页]

作者: 农民 时间: 2024-12-31 18:05
标题: 学习vue3的条记
一、vue和react的对比

1、基础介绍

vue：https://cn.vuejs.org/
vue3是2020年创建的
react：https://react.dev/
react是一个2013年开源的JavaScript库，严格意义上来说不是一个框架
2、diff算法

两个框架采用的都是同级对比策略

两节点对比时

对比时的不同策略

vue3策略：找出最长递增子序列，首尾对比直到不同停止

好比下图时cd不变把b放到cd后面

react：节点的索引对比，从左往右移动

二、搭建VUE3的开发环境+初始vue3

1、node环境安装：https://nodejs.org/en/down (选择18以上的版本)
2、开发编辑工具Vscode(Visual Studio Code)：https://code.visualstudio.com/Download
3、安装谷歌浏览器
三、创建Vue3项目（cmd运行）

1、切换镜像源

npm config set registry https://registry.npmmirror.com/

复制代码

2、安装pnpm

npm install -g pnpm

复制代码

如果淘宝镜像在下载过程中不可就切换返来官方的镜像，然后再切换返来淘宝（淘宝的 npm 镜像源可能存在证书过期的题目。您可以尝试将 npm 源切换回官方的 npm 源，然后重新安装依赖。）

npm config set registry https://registry.npmjs.org

复制代码

3、实际上利用npm没有下载成功pnpm，是下载了cnpm之后，再利用cnpm下载的pnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install -g pnpm

复制代码

4、利用pnpm创建vue3文件

pnpm create vite

复制代码

5、利用pnpm安装文件的包

pnpm i

复制代码

6、启动文件

pnpm run dev

复制代码

四、文件运行中学习代码新的知识

1、<script setup>实现模块化

vue2是选项式，vue3是模块化
选项式必要暴露许多，好比data{return }之类的，setup不必要
之后的代码都是在setup的情况下写的:https://cn.vuejs.org/api/sfc-script-setup.html#script-setup
2、ref,响应式数据

vue2的数据是放在data，vue3用ref https://cn.vuejs.org/api/reactivity-core.html#ref
3、v-cloak

如果不是通过官方语句脚手架创建的vue文件，只是普通的html文件然后引入就会造成的征象，正常通过官方语句创建的vue文件不会

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

复制代码

会造成数据还没初始化就已经渲染了，造成页面数据闪烁，加入v-cloak就不会：https://cn.vuejs.org/api/built-in-directives.html#v-cloak

4、nextTick

5、ref和reative的区别

https://cn.vuejs.org/api/reactivity-core.html#reactive

6、计算属性computed

https://cn.vuejs.org/api/reactivity-core.html#computed 和vue2的写法不一样
利用缓存，淘汰性能消耗

<script setup>
import { ref,computed } from 'vue';
const list=ref({
book:["语文","数学","英文"]
})
const f=ref(0)
const l=ref(2)
const listC=computed({
get(){
return f.value
},
set(newValue){
[f.value,l.value]=newValue.split(" ")
}
})
listC.value='78'
</script>
<template>
<div>是否也有书：</div>
<span>{{ listC }}</span>
</template>

复制代码

利用computed是因为，如果模板更新，数据没有厘革，可以直接拿computed的缓存数据不必要二次计算，如果直接写在模板会每一次革新都会重新计算一次

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)