学习vue3的条记
一、vue和react的对比1、基础介绍
vue：https://cn.vuejs.org/
vue3是2020年创建的
react：https://react.dev/
react是一个2013年开源的JavaScript库，严格意义上来说不是一个框架
2、diff算法
两个框架采用的都是同级对比策略
https://i-blog.csdnimg.cn/direct/879e3b75372c4b4eb284ae51d38ec2af.png
两节点对比时
https://i-blog.csdnimg.cn/direct/62de7efc6f4240cabc1870d7f0ca71d2.png
对比时的不同策略
vue3策略：找出最长递增子序列，首尾对比直到不同停止
好比下图时cd不变把b放到cd后面
https://i-blog.csdnimg.cn/direct/d97a492ec48f49998970dbb05f489a39.png
https://i-blog.csdnimg.cn/direct/6d1ad9c5cc2b4622ae34e4acb89377f6.png
https://i-blog.csdnimg.cn/direct/978de588756a4603a061638bb6cf7dce.png
react：节点的索引对比，从左往右移动
https://i-blog.csdnimg.cn/direct/f7f57a98f79a453f95112e89359be47b.png
二、搭建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 https://i-blog.csdnimg.cn/direct/ea1fe1f68328453785a274e1b83e546d.png
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> https://i-blog.csdnimg.cn/direct/88683973e1a248e080d0b19279d06b40.png
会造成数据还没初始化就已经渲染了，造成页面数据闪烁，加入v-cloak就不会：https://cn.vuejs.org/api/built-in-directives.html#v-cloak
https://i-blog.csdnimg.cn/direct/28d1535b1e6f490695d59b674d924cf1.png
4、nextTick
https://i-blog.csdnimg.cn/direct/d32c24d804284af181ceed3a57b37375.png
5、ref和reative的区别
https://cn.vuejs.org/api/reactivity-core.html#reactive
https://i-blog.csdnimg.cn/direct/c6f43e939b7147aa92d65317e96e3ef0.png
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){
=newValue.split(" ")
}
})
listC.value='78'
</script>
<template>
<div>是否也有书：</div>
<span>{{ listC }}</span>
</template> https://i-blog.csdnimg.cn/direct/5ee2788b4e254923b894257d24028e5e.png
https://i-blog.csdnimg.cn/direct/69235470c70440f695f87eacfae5a3a7.png
利用computed是因为，如果模板更新，数据没有厘革，可以直接拿computed的缓存数据不必要二次计算，如果直接写在模板会每一次革新都会重新计算一次
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]