當(dāng)前位置：首頁(yè) > news >正文

資訊類網(wǎng)站建設(shè)網(wǎng)站生成器

news 2025/7/5 3:54:55

資訊類網(wǎng)站建設(shè),網(wǎng)站生成器,website是什么意思,校園門戶網(wǎng)站系統(tǒng)建設(shè)方案Vue3 創(chuàng)建Vue3項(xiàng)目 vue-cli //查看vue/cli版本，確保在4.5.0以上 vue --version //安裝或升級(jí)vue/cli npm install -g vue/cli //創(chuàng)建項(xiàng)目 vue create new_project //啟動(dòng) cd new_project npm run serve 也可以通過(guò)vue ui進(jìn)入圖形化界面進(jìn)行創(chuàng)建 vite 新一代前端…

Vue3

創(chuàng)建Vue3項(xiàng)目

vue-cli

//查看@vue/cli版本，確保在4.5.0以上
vue --version
//安裝或升級(jí)@vue/cli
npm install -g @vue/cli
//創(chuàng)建項(xiàng)目
vue create new_project
//啟動(dòng)
cd new_project
npm run serve

也可以通過(guò)vue ui進(jìn)入圖形化界面進(jìn)行創(chuàng)建

vite

新一代前端構(gòu)建工具

//創(chuàng)建工程
npm init vite-app <project-name>
//進(jìn)入工程目錄
cd <project-name>
//安裝依賴
npm install
//運(yùn)行
npm run dev

項(xiàng)目結(jié)構(gòu)

main.js

vue3開發(fā)工具插件與vue2不共用需重新下載

常用 Composition API

setup

理解：Vue3.0中一個(gè)新的配置項(xiàng)，值為一個(gè)函數(shù)

setup是所有 Compositon API(組合API) 表演的舞臺(tái)

組件中所用到的：數(shù)據(jù)，方法等，均要配置在setup中

setup函數(shù)的兩種返回值：

? ? ? ? 若返回一個(gè)對(duì)象，則對(duì)象的屬性，方法在模板中均可直接使用

????????

? ? ? ? 若返回一個(gè)渲染函數(shù)，則可以自定義渲染內(nèi)容(了解)

????????

注意：

? ? ? ? 1、不要與Vue2配置混用，(data,method等)可以訪問(wèn)setup，反之不行，重名setup優(yōu)先

????????2、setup不能是一個(gè)async函數(shù)，因?yàn)閍sync函數(shù)返回值不再是return對(duì)象，而是promise

ref函數(shù)

想要setup中數(shù)據(jù)是響應(yīng)式的就需要，在定義是使用ref函數(shù)，并在使用時(shí)xxx.value來(lái)使用或修改

處理對(duì)象類型

總結(jié)

作用：定義一個(gè)響應(yīng)式的數(shù)據(jù)

語(yǔ)法：const xxx=ref(initValue)? 創(chuàng)建一個(gè)包含響應(yīng)式數(shù)據(jù)的引用對(duì)象

用法：js操作數(shù)據(jù)xxx.value，模板讀取數(shù)據(jù){{xxx}}

備注：接收的數(shù)據(jù)可以是基本類型，也可以是對(duì)象類型

reactive函數(shù)

reactive與ref的區(qū)別

ref用來(lái)定義基本數(shù)據(jù)類型，ref定義對(duì)象或數(shù)組底層借助reactive

reactive用來(lái)定義對(duì)象或數(shù)組類型

ref定義的數(shù)據(jù)使用時(shí)需要xxx.value，ref定義的數(shù)據(jù)不用

Vue3.0響應(yīng)式原理

通過(guò)Proxy(代理)：攔截對(duì)象中任意屬性的變化，包括：屬性值的讀寫，屬性的添加，刪除

通過(guò)Reflect(反射)：對(duì)被代理對(duì)象的屬性進(jìn)行操作

setup的兩個(gè)注意點(diǎn)

父組件傳值，綁定事件

子組件接收使用數(shù)據(jù)，觸發(fā)事件傳參

props：值為對(duì)象，接收組件外傳遞過(guò)來(lái)并且組件內(nèi)部聲明接收了的屬性，供setup使用

context：上下文對(duì)象

? ? ? ? attrs：值為對(duì)象，組件外部傳遞過(guò)來(lái)，但并沒(méi)有在props中聲明的屬性

????????(如果沒(méi)有props:["msg"])，那么就可以在context.attrs中找到msg

? ? ? ? slots：收到的插槽內(nèi)容，相當(dāng)于this.$slots

? ? ? ? emit：分發(fā)自定義事件的函數(shù)，相當(dāng)于this.$emit

computed計(jì)算屬性

watch函數(shù)

監(jiān)視r(shí)ef函數(shù)定義的響應(yīng)式數(shù)據(jù)

監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)

坑：

????????監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)時(shí)：oldValue無(wú)法正確獲取，強(qiáng)制開啟了深度監(jiān)視

????????監(jiān)視r(shí)eactive定義的響應(yīng)式數(shù)據(jù)中某個(gè)屬性時(shí)，deep配置有效

監(jiān)視r(shí)ef函數(shù)定義的對(duì)象類型響應(yīng)式數(shù)據(jù)

watchEffect

Vue3生命周期

自定義hook函數(shù)

hook本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition API進(jìn)行了封裝。

類似與Vue2中的mixin

自定義hook的優(yōu)勢(shì)，復(fù)用代碼，讓setup中的邏輯更清楚易懂

原始寫法

使用hook抽取公共數(shù)據(jù)

新建hooks文件夾

使用hook函數(shù)

toRef

作用：創(chuàng)建一個(gè)ref對(duì)象，其value值指向另一個(gè)對(duì)象中的某個(gè)屬性

語(yǔ)法：const name=toRef(person,'name')

應(yīng)用：要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí)

toRefs與toRef功能一致，但可以批量創(chuàng)建多個(gè)ref對(duì)象，語(yǔ)法：toRefs(person)

其他Composition API

略

shallowReactive：只處理對(duì)象最外層的響應(yīng)式(當(dāng)一個(gè)對(duì)象數(shù)據(jù)變化的只有外層屬性時(shí)使用)

shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式(當(dāng)一個(gè)對(duì)象數(shù)據(jù)后續(xù)不會(huì)修改其內(nèi)的屬性，而是生成新對(duì)象整體替換時(shí))

readonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(深只讀)

shallowReadonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(淺只讀) 不希望數(shù)據(jù)被修改時(shí)使用

toRaw：將一個(gè)由reactive生成的響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象

markRaw：標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象(有些值不應(yīng)該被設(shè)置為響應(yīng)式的，如第三方類庫(kù)等；當(dāng)渲染具有不可變數(shù)據(jù)的大列表時(shí)，跳過(guò)響應(yīng)式轉(zhuǎn)換可以提高性能)