一、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的緩存數據不需要二次計算，如果直接寫在模板會每一次刷新都會重新計算一次