vue3筆記

如何創建vue3項目

基於 vue 腳手架 npm i @vue/cli -g

vue create <project-name>
cd <project-name>
npm run serve

基於 vite 創建項目

// npm
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
// yarn
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

 

vue3和vue2的區別

• 模板組件結構

vue2中的組件模板必須要有唯一的根節點

vue3的組件模板可以沒有根節點

 

•  選項API 和 組合API

選項API：使用組件的選項（data、computed、methods、watch）構建代碼

優點：易於學習，這些選項規定了你變量方法該放在哪裏

缺點：代碼組織性差，當組件應用變的很大，邏輯關注的視圖也會很長

組合API：以功能爲單位組織代碼結構

 

源碼優化 

• 數據響應式

vue2使用Object.defineproperty進行數據監聽

vue3使用proxy進行數據監聽

 

router4.x 和 router3.x的區別

• 創建路由的方法

router3.x 使用 new Router創建路由

路由模式使用mode選項：mode: 'history' | 'hash'

import Router from 'vue-router'

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
}]

const router = new Router({
    mode: 'history',
    routes
})

export default router

 router4.x 使用 createRouter創建路由

路由模式使用函數方法：history: createWebHistory() | createWebHashHistory()

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue')
}]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

 

組合式API相關方法

選項式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount 掛載DOM前
mounted	onMounted 掛載DOM後
beforeUpdate	onBeforeUpdate更新前
updated	onUpdated更新後
beforeUnmount	onBeforeUnmount卸載銷燬前
unmounted	onUnmounted卸載銷燬後
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

 

 

 

 

 

 

 

 

 

 

 

 

ref 和 reactive 區別？

• 定義數據
  • ref可傳入基本類型和引入類型的數據，但通常用來定義基本類型數據，不推薦傳入對象
  • reactive通常用來定義引用類型數據 （不可以傳入基本類型數據，如果傳入則不會返回proxy對象，由於reactive是基於proxt實現響應式的，如果返回的不是proxy對象，則該數據不會具有響應式）
  • ref也可以用來定義對象或者數組類型的數據，內部會通過reactive轉化爲代理對象
• 實現原理
  • ref通過Object.defineProperty()來實現數據代理
  • reactive使用proxy實現數據代理，並且通過Reflect操作源對象內部的數據
• 使用及修改
  • ref操作數據需要.value，template模板中不需要
  • reactive不需要