山东省建设局网站首页网站整合营销等服务

一、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.comcnpm 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的缓存数据不需要二次计算，如果直接写在模板会每一次刷新都会重新计算一次