當前位置：首頁 > 前端技术 > vue >内容正文

vue

初探Vue3

發布時間：2023/12/13 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了初探Vue3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

🐵 $新構建工具Vite\textcolor{blue}{新構建工具Vite}$

🐵 $CompositionAPI火爆來襲\textcolor{blue}{Composition API火爆來襲}$

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

🐵 $計算屬性的使用\textcolor{blue}{計算屬性的使用}$

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

🐵 $偵聽器\textcolor{blue}{偵聽器}$

🐵 $引用對象：單個原始值響應化\textcolor{blue}{引用對象：單個原始值響應化}$

🐵 $體驗邏輯組合\textcolor{blue}{體驗邏輯組合}$

vite

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

使用vite快速創建一款Vue3項目

使用vite創建vue3的步驟
npm install -g create-vite-app
create-vite-app vue3-demo
cd vue3-demo
npm install

創建目錄如下

還是老樣子我們看一下項目中的package.json

確實我們的項目中的vue版本是3，并且我們的運行以及打包都是依賴Vite，現在我們npm run dev看一下

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

我們就發現了陌生而又熟悉的地方：
Vue3是通過createApp創建vue實例的而不是new
Vue2中的所有內容都是掛載到new出來的vue構造函數（跟實例）上面的
現在vue3都是掛再到app上面
關于Vite的相關內容我們暫時就介紹這么多，更多的內容大家可以在網上找到更多的資料

Composition API火爆來襲

Composition API字面意思是組合API，它是為了實現基于函數的邏輯復用機制而產生的。是Vue的一大亮點，和Vue2的區別我們下面揭曉

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

在vue2中使用的統稱為選項api（optionApi）比如我們需要定義數據需要我們在data選項去定義，如果我們定義方法我們就需要在methods的選項下

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

Vue3中運用的是compostion Api運用的是一個功能就是一塊代碼，閱讀性可維護性會更高些

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是一個新的組件選項，它是組件內使用Composition API的入口// 調用時刻是初始化屬性確定后，beforeCreate之前setup() {// 響應化：接收一個對象，返回一個響應式的代理對象const state = reactive({ count: 0 })// 返回對象將和渲染函數上下文合并return { state }}}createApp(App).mount('#app')</script> </body></html>

計算屬性的使用

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

事件處理

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

偵聽器

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

引用對象：單個原始值響應化

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

體驗邏輯組合

const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue; // 鼠標位置偵聽 function useMouse () {// 數據響應化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)})// 轉換所有key為響應式數據return toRefs(state) } // 事件監測 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 () {// 使用鼠標邏輯const { x, y } = useMouse()// 使用時間邏輯const { time } = useTime()// 返回使用return { x, y, time }} } createApp().mount(MyComp, '#app')

想了解更多關注我，持續推送

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

👍 $點贊，你的認可是我創作的動力！\textcolor{green}{點贊，你的認可是我創作的動力！}$

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

?? $評論，你的意見是我進步的財富！\textcolor{green}{評論，你的意見是我進步的財富！}$

總結

以上是生活随笔為你收集整理的初探Vue3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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