VUE 3 0 初體驗之路

2022-01-09 20:31:50 字數 2653 閱讀 2521

目錄環境搭建

核心知識

在2023年9月中旬,vue.js發布了3.0正式版,在不久的將來,vue3.0 也終將成為大前端的必然趨勢,

node版本要求:node.js8.9或更高版本 ,輸入node -v檢視node版本

vue-cli版本:達到vue-cli4.5.0以上,可建立vue3.0的專案,支援體驗vue3.0的新特性,(3.x preview),vue -v檢視腳手架版本

終端輸入:vue create project_name

元件:是維護單一功能,可復用的單個個體,相同的樣式及邏輯即可抽離成元件,方便維護,復用性增強。也是vue3.0專案中,最核心的概念

definecomponent:vue3.0中提供了乙個函式返回傳遞給它的物件,最重要的是:在typescript下,給予了元件正確的引數型別推斷。此處先不展開介紹,後續會總結 vue3.0 + ts。

setup:元件的啟動函式,兩個引數:props(父元件傳遞的資料)content ( 上下文物件),最後return 定義的資料,方法,鉤子函式等,且setup中 沒有this,不能訪問this

ref定義單個資料,接受乙個引數值並返回乙個響應式且可改變的ref 物件。ref 物件擁有乙個指向內部值的單一屬性.value

import  from 'vue'

export default ) // object

// 獲取及改變 ref物件的值,獲取內部值的單一屬性 value

console.log(num1.value) // 10

num1.value++

console.log(num1.value) // 11

return

}}

reactive: 用於建立響應式資料,接收乙個普通物件然後返回該普通物件的響應式**,即雙向資料繫結,

import  from 'vue'

export default ,

})// 獲取及改變:reactive 定義的資料,呼叫時直接 reactive變數名.資料名,

console.log(data.num) // 33

data.num++

console.log(data.num) // 34

return

}}

建立的方法仍然需要 return

}}}

/src/router/index.js:在路由檔案中使用了createrouter方法

import  from 'vue-router'

const routes = [

, ]const router = createrouter()

export default router

home元件中使用,路由跳轉及傳遞引數

query跳轉

params跳轉

child.vue

this is child components

父元件傳遞過來的值:}

傳值給父元件

狀態管理即 vuex,為達到資料共享的目的

/src/store/index.js:在狀態管理檔案中使用了createstore方法

import  from 'vuex'

export default createstore(,

// 同步修改state ,是方法,不能操作非同步操作(包括傳送請求及定時器等)

mutations: ,

},// 提交 mutations

actions: , 2000)}},

// 模組化

modules: {}

})

元件中呼叫,vuex運算元據

}====}====}

設定 name

非同步設定 name

setup:不需要引入的生命週期 ,表示元件建立的過程,且沒有this

onmounted:比setup稍微晚一些執行,表示元件掛載的過程,包括資料, dom元素等,是乙個函式,需要傳入乙個**函式執行,無引數。

onunmounted:與onmounted相對應,元件解除安裝或銷毀(路由跳轉),常用於清除定時器等操作

vue3 0 正式版體驗

vue3 正式版本已經更新,再次入坑。全域性安裝 cd vue3 res cnpm i 用 vscode 開啟import vue from vue vue2 vue3 beforecreate setup setup 開始建立元件之前,在beforecreate和created之前執行。建立的是d...

Vue3 0系列(Vue3 0是如何變快的 )

來說一說為什麼performance 效能比vue 2.x快1.2 2倍 這裡先提供兩個 2.1 diff演算法優化 例子 我是段落 也就是說,vue3在渲染的時候,給會改變的元素新增了靜態標記 import from vue export function render ctx,cache,pro...

敏捷之路 初體驗

說起來第一次聽到敏捷開發這個詞是2004年與之一起的是xp程式設計,當時剛剛加入挨踢大軍還沒多長時間,和很多程式設計師一樣對於專案管理 專案文件持極端反感的態度。曾經老闆嘗試使用ibm的靜室軟體工程來實施erp軟體開發,帶來的結果是乙個專案組在公司辦公室討論乙個月了專案文件還沒有弄清楚,幾乎脫離了實...