當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

初探Vue3

發(fā)布時(shí)間：2023/12/13 vue 23 豆豆

生活随笔收集整理的這篇文章主要介紹了初探Vue3 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

🌜 $本篇文章目錄\textcolor{green}{本篇文章目錄}$ 🌛

🐵 $新構(gòu)建工具Vite\textcolor{blue}{新構(gòu)建工具Vite}$

🐵 $CompositionAPI火爆來(lái)襲\textcolor{blue}{Composition API火爆來(lái)襲}$

🐵 $CompositionAPI的基本使用\textcolor{blue}{Composition API的基本使用}$

🐵 $計(jì)算屬性的使用\textcolor{blue}{計(jì)算屬性的使用}$

🐵 $事件處理\textcolor{blue}{事件處理}$

🐵 $偵聽(tīng)器\textcolor{blue}{偵聽(tīng)器}$

🐵 $引用對(duì)象：單個(gè)原始值響應(yīng)化\textcolor{blue}{引用對(duì)象：單個(gè)原始值響應(yīng)化}$

🐵 $體驗(yàn)邏輯組合\textcolor{blue}{體驗(yàn)邏輯組合}$

vite

如今Vue3出現(xiàn)后，搭建Vue項(xiàng)目的方式有三種，除了可以通過(guò) vue-cli 和 webpack 搭建腳手架外官方還提供了一種新的腳手架搭建工具 vite，前面兩種方式我們并不陌生，我們重點(diǎn)來(lái)看一下Vite
Vite 是 Vue 作者開(kāi)發(fā)的一款意圖取代 webpack 的工具，實(shí)現(xiàn)原理是利用 ES6 的 import 會(huì)發(fā)送請(qǐng)求去加載文件的特性，攔截這些請(qǐng)求，做一些預(yù)編譯，省去 webpack 冗長(zhǎng)的打包時(shí)間

使用vite快速創(chuàng)建一款Vue3項(xiàng)目

使用vite創(chuàng)建vue3的步驟
npm install -g create-vite-app
create-vite-app vue3-demo
cd vue3-demo
npm install

創(chuàng)建目錄如下

還是老樣子我們看一下項(xiàng)目中的package.json

確實(shí)我們的項(xiàng)目中的vue版本是3，并且我們的運(yùn)行以及打包都是依賴Vite，現(xiàn)在我們npm run dev看一下

就一個(gè)字賊快！！！！！下面我們看一下main.js文件

我們就發(fā)現(xiàn)了陌生而又熟悉的地方：
Vue3是通過(guò)createApp創(chuàng)建vue實(shí)例的而不是new
Vue2中的所有內(nèi)容都是掛載到new出來(lái)的vue構(gòu)造函數(shù)（跟實(shí)例）上面的
現(xiàn)在vue3都是掛再到app上面
關(guān)于Vite的相關(guān)內(nèi)容我們暫時(shí)就介紹這么多，更多的內(nèi)容大家可以在網(wǎng)上找到更多的資料

Composition API火爆來(lái)襲

Composition API字面意思是組合API，它是為了實(shí)現(xiàn)基于函數(shù)的邏輯復(fù)用機(jī)制而產(chǎn)生的。是Vue的一大亮點(diǎn)，和Vue2的區(qū)別我們下面揭曉

下面兩張圖讓您直白的看出差距

在vue2中使用的統(tǒng)稱為選項(xiàng)api（optionApi）比如我們需要定義數(shù)據(jù)需要我們?cè)赿ata選項(xiàng)去定義，如果我們定義方法我們就需要在methods的選項(xiàng)下

Vue2所運(yùn)用的option api的缺點(diǎn)：例如我們抽離一個(gè)很簡(jiǎn)單的組件組建功能就是一個(gè)累加的功能，而vue抽離出去后的代碼是分散的我們需要在data中去定義一個(gè)num 然后我們需要在methods中去創(chuàng)建一個(gè)add方法，功能代碼比較分散，這僅僅是一個(gè)小功能組件，如果是更復(fù)雜的邏輯呢？

Vue3中運(yùn)用的是compostion Api運(yùn)用的是一個(gè)功能就是一塊代碼，閱讀性可維護(hù)性會(huì)更高些

Composition API的基本使用

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../dist/vue.global.js"></script> </head><body><div id="app"><h1>Composition API</h1><div>count: {{ state.count }}</div></div><script>const {createApp,reactive} = Vue;// 聲明組件const App = {// setup是一個(gè)新的組件選項(xiàng)，它是組件內(nèi)使用Composition API的入口// 調(diào)用時(shí)刻是初始化屬性確定后，beforeCreate之前setup() {// 響應(yīng)化：接收一個(gè)對(duì)象，返回一個(gè)響應(yīng)式的代理對(duì)象const state = reactive({ count: 0 })// 返回對(duì)象將和渲染函數(shù)上下文合并return { state }}}createApp(App).mount('#app')</script> </body></html>

計(jì)算屬性的使用

<div>doubleCount: {{doubleCount}}</div> const { computed } = Vue; const App = {setup () {const state = reactive({count: 0,// computed()返回一個(gè)不可變的響應(yīng)式引用對(duì)象// 它封裝了getter的返回值doubleCount: computed(() => state.count * 2)})} }

事件處理

<div @click="add">count: {{ state.count }}</div> const App = {setup () {// setup中聲明一個(gè)add函數(shù)function add () {state.count++}// 傳入渲染函數(shù)上下文return { state, add }} }

偵聽(tīng)器

const { watch } = Vue; const App = {setup () {// state.count變化cb會(huì)執(zhí)行// 常用方式還有watch(()=>state.count, cb)watch(() => {console.log('count變了:' + state.count);})} }

引用對(duì)象：單個(gè)原始值響應(yīng)化

<div>counter: {{ counter }}</div> const { ref } = Vue; const App = {setup () {// 返回響應(yīng)式的Ref對(duì)象const counter = ref(1)setTimeout(() => {// 要修改對(duì)象的valuecounter.value++}, 1000);// 添加counterreturn { state, add, counter }} }

體驗(yàn)邏輯組合

const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue; // 鼠標(biāo)位置偵聽(tīng) function useMouse () {// 數(shù)據(jù)響應(yīng)化const state = reactive({ x: 0, y: 0 })const update = e => {state.x = e.pageXstate.y = e.pageY}onMounted(() => {window.addEventListener('mousemove', update)})onUnmounted(() => {window.removeEventListener('mousemove', update)})// 轉(zhuǎn)換所有key為響應(yīng)式數(shù)據(jù)return toRefs(state) } // 事件監(jiān)測(cè) function useTime () {const state = reactive({ time: new Date() })onMounted(() => {setInterval(() => {state.time = new Date()}, 1000)})return toRefs(state) } // 邏輯組合 const MyComp = {template: ` <div>x: {{ x }} y: {{ y }}</div> <p>time: {{time}}</p> `,setup () {// 使用鼠標(biāo)邏輯const { x, y } = useMouse()// 使用時(shí)間邏輯const { time } = useTime()// 返回使用return { x, y, time }} } createApp().mount(MyComp, '#app')

想了解更多關(guān)注我，持續(xù)推送

? $原創(chuàng)不易，還希望各位大佬支持一下\textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下}$

👍 $點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！\textcolor{green}{點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！}$

?? $收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}$

?? $評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！\textcolor{green}{評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！}$

總結(jié)

以上是生活随笔為你收集整理的初探Vue3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：官宣：杨幂成美团外卖代言人
下一篇： Windows下干不过 AMD悄然在Li