vue3 新特性

一、vue3新特性

 

1⃣️ same small size、import only what you need

2⃣️ Boosted performance(faster rendering)

    a. Rewritten Virtual Dom.

    b. Improve Diffing Algorithm.

3⃣️ options API -> compositon API 

4⃣️ enhanced Ts support(optional)

5⃣️ multi-root components

 

更多詳情查看 Vue3 Deep Dive. 

 

二、安裝

// 腳手架 Vite：

npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3


// 腳手架 vue-cli：

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

 

三、具體新特性細節

 

1⃣️、組合式API  & setup

 https://vue3js.cn/docs/zh/guide/composition-api-introduction.html

 https://www.cnblogs.com/catherLee/p/14487632.html

2⃣️、ref函數（響應式變量）

import { ref } from 'vue' //ref 對我們的值創建了一個響應式引用。使用引用的概念將在整個組合式 API 中經常使用。

const counter = ref(0) //ref 接受參數並返回它包裝在具有 value property 的對象中，然後可以使用該 property 訪問或更改響應式變量的值。

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

3⃣️

 

 

編輯中.....