git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-start
cd vue3-start

npm install or yarn intall

npm run dev

// message.js
import { ref, watch } from "vue";
export function message() {
 let msg = ref(123);
 watch(msg, (newVal) => {
 console.log("msg changed", newVal);
 });
 const changeMessage = () => {
 msg.value = "new Message";
 };
 return { msg, changeMessage };
}

為了能編譯通過(guò)，我們通常會(huì)增加一個(gè)根節(jié)點(diǎn)。

這個(gè)設(shè)計(jì)確實(shí)很糟糕，我曾經(jīng)無(wú)數(shù)次吐槽過(guò)這個(gè)設(shè)計(jì)。因?yàn)闀?huì)帶來(lái)不必要的代碼嵌套和縮進(jìn)。

幸好在 Vue 3 中取消了這一限制：
可以直接在中使用任意數(shù)量的標(biāo)簽:

用 VScode 打開模板時(shí)，看到一些 lint 錯(cuò)誤，這是因?yàn)楣俜讲寮?eslint-plugin-vue 還沒有支持新的模板語(yǔ)法。

3、Suspense

Suspense 是一個(gè) Vue 3 新特性。

通常前后端交互是一個(gè)異步的過(guò)程： 默認(rèn)我們提供一個(gè)加載中的動(dòng)畫，當(dāng)數(shù)據(jù)返回時(shí)配合使用 v-if 來(lái)控制數(shù)據(jù)顯示。
Suspense 的出現(xiàn)大大簡(jiǎn)化了這個(gè)過(guò)程：它提供了 default 和 fallback 兩種狀態(tài)：

4、Multiple v-models

我們都知道 v-models 用于雙向數(shù)據(jù)綁定。一般用于與表單元素一起使用。有時(shí)我們會(huì)在自定義組件中使用它。
Vue 2 只允許在一個(gè)組件上使用一個(gè) v-models。在 Vue 3 中，我們可以將任意數(shù)量的 v-model 綁定到我們的定制組件上:

SurveyForm.vue:

5、Reactivity

Vue 2 的響應(yīng)式已經(jīng)非常棒了，但在少數(shù)情況下會(huì)存在一些問題：

我們發(fā)現(xiàn)通過(guò)this.list下標(biāo)來(lái)修改元素，并不會(huì)觸發(fā) wacher 監(jiān)聽函數(shù)，為了達(dá)到目的，我們不得不使用 vue.set() 或 vue.delete() 這些方法。

而在 vue 3 中，我們不需要借助其他 API：

export default {
 setup() {
 let list = ref([1, 2]);
 let myObj = ref({ name: "Preetish" });
 function myFun() {
  list.value[3] = 3;
  myObj.value.last = "HS";
  delete myObj.value.name;
 }
 return { myFun, list, myObj };
 },
};

6、Portals

Portals 提供了一種將組件中渲染到頁(yè)面任意一個(gè) DOM 節(jié)點(diǎn)中的能力。在 Vue 2 中，利用一個(gè) portal-vue 的第三方插件來(lái)做到這一點(diǎn)。

在 vue 3 中直接使用：

 
hello

 是 vue3 中提供特定的標(biāo)簽用于創(chuàng)建一個(gè) Portals。
 中間出現(xiàn)的內(nèi)容會(huì)出現(xiàn)在 to 指定的節(jié)點(diǎn)中：

目前為止，在 Alpha 版本中并不能使用

7、Transition

之前我在使用 v-enter-active, v-enter, v-enter-to 這些個(gè)狀態(tài)時(shí)搞的暈頭轉(zhuǎn)向。
現(xiàn)在 Vue 3 從命名上更直觀了: v-enter 變成了 v-enter-from，v-leave 變成 v-leave-from。

8、Remove Filter

Vue 3 拋棄了 Filter 的用法，更推薦使用計(jì)算屬性或方法來(lái)實(shí)現(xiàn)：

{{ date | format }}


{{ format(date) }}

9、App configration

在 Vue 2 中，如果想使用 use(), mixin() , directive() 等方法需要配合全局 Vue 對(duì)象:

import Vue from "vue";
import App from "./App";

Vue.use(/* ... */);
Vue.mixin(/* ... */);
Vue.component(/* ... */);
Vue.directive(/* ... */);

new Vue({
 el: "#app",
 template: "",
 components: {
  App,
 },
});

在 Vue 3 中， 改成了 createApp 返回的 Vue 實(shí)例：

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use(/* ... */);
app.mixin(/* ... */);
app.component(/* ... */);
app.directive(/* ... */);

app.mount("#app");

看完上述內(nèi)容，是不是對(duì)怎么上手vue3.0有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。