vue 3.0手触り体験

vue 3.0 betaバージョンはすでにリリースされています。一時期は一波体験をしました。
なお、本明細書のすべてのプレゼンテーションはvue 3.0 betaバージョンに基づいており、後続の正式版apiは変更されないことを保証していません。公式文書が出たら、公式サイトを基準とします。
環境構築
直接足場を使用して、現地に設置されていない場合は足場設置命令を実行できます。

npm install -g @vue/cli

ローカルにインストールされているなら、更新してみてもいいです。

npm update -g @vue/cli

テストvue-cliバージョン：

vue -V
@vue/cli 4.4.1

次はvueプロジェクトを作成します。

vue create vue3-demo

コマンドインタラクティブウィンドウでManualy select featureを選択します。

Vue CLI v4.4.1
? Please pick a preset:
      (router, vuex, sass, babel, eslint)
 sass (router, vuex, sass, babel, eslint)
 test (less, babel, eslint)
 default (babel, eslint)
❯ Manually select features

以下のオプションをチェックします。一般的なビジネス開発にはこれらが必要です。

Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

車に戻ったら自分の習慣に合わせて選んで、プロジェクトを作ります。この時はまだvue 2のプロジェクト環境に注意してください。次はvue 3にアップグレードした運行環境です。
vue 3.0プロジェクトにアップグレードしました。
vue-cliはまだvue 3.0を直接サポートしていません。プラグインのアップグレードに依存して、コマンドを入力します。

cd vue3-demo
vue add vue-next

上記のコマンドを実行したら、自動的にvue-cli-plugin-vue-nextプラグインをインストールします。これはプロジェクトをvue 3.0の依存環境にアップグレードします。
最新版vue-cliは直接vue 3プロジェクトを作成できます。（200.09更新）
今日はvue-cliを4.5.4バージョンに更新しました。vue 3プロジェクトを直接作成することができます。vue create vue 3-demoコマンドを使ってテスト項目を作成します。次のオプションがあります。

 デフォルトのvue 3構成を直接選択してもいいです。最後の項目を選んで手動で配置してもいいです。ここで手動構成をデモンストレーションして、Manualy select feat uresを選んで、車を返します。

必要に応じて選んでください。最初の項目はVueバージョンを選択できることを示しています。選択したら車に戻ります。

ここでvueのバージョンを選択して、直接3.xを選んで車に戻ります。これでvue 3に基づいて構築されたプロジェクトが作成されます。
vue 3.0特性体験
上記の手順でvue 3.0項目にアップグレードしたら、自動的にいくつかのファイルをvue 3.0の書き方に変えてくれます。
vueのインスタンスを作成
vue 3 vue 3作成例はnewの方式を使う必要がありません。src/main.jsファイルを見てください。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

現在は関数的なスタイルでvueのインスタンスを作成していますが、vue 2はどのようにインスタンスを作成したか覚えていますか？

// Vue2     

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

どちらが好きですか？私はvue 3.0の関数スタイルが好きです。
ルート
ルートの設定ファイルを見てください。src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
 {
 path: '/',
 name: 'Home',
 component: Home
 },
 {
 path: '/about',
 name: 'About',
 // route level code-splitting
 // this generates a separate chunk (about.[hash].js) for this route
 // which is lazy-loaded when the route is visited.
 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes
})

export default router

これはアップグレードした後のルートの配置方法で、vue 2バージョンとは大きな違いが見られます。ルートの例を作成するには、手動でcreateRouter方法を導入する必要があります。historyモードのルートを作成するには、CreateWebHistory方法を手動で導入する必要があります。これはTree-shkingの目的に達しています。つまり、すべてのアプリを梱包しないで、あなたが使うapiだけを包装します。 
レスポンスデータ、methods、ウォッチ、computed
ここは一番大きい部分を変えるべきです。また、論争の一番大きい部分です。どういうことですか？
vue 2バージョンでは、応答式データはこうであると宣言します。

// Vue2
export default {
 // ....
 data() {
 return {
 state: {
 count: 0
 }
 };
 },
}

vue 3.0には、このようなものが必要です。

// Vue3
import { ref } from 'vue'
export default {
 setup () {
 const count = ref(0) //    count，     0
 const str = ref('hello') //    str，     'hello'
 return {
 count,
 str
 }
 }
}

まずref法を導入して、それを使って応答変数を宣言します。これらの操作はsetup関数で行う必要があります。そして、methods、watch、computtedを追加するにはsetupで行う必要があります。これはvue 2の中で大きな違いがあります。vue 2はオプションを使ってdata、methods、watch、computedを作成します。 
次にカウンタの機能を実証します。methods、watchとcomputtedを結合します。

<template>
 <div class="home">
 <p>count: {{count}}</p>
 <p>doubleCount: {{doubleCount}}</p>
 <button @click="add">  </button>
 </div>
</template>

<script>
import { ref, watch, computed } from 'vue'
export default {
 setup () {
 //    count   ，     0
 const count = ref(0)

 //    add   
 const add = () => {
 count.value++
 }

 //    watch，       watch   
 watch(
 () => count.value,
 (val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) }
 )

 //   computed，         computed   
 const doubleCount = computed(() => count.value * 2)

 return {
 count,
 add,
 doubleCount
 }
 }
}
</script>

この例を見ると、まず定義方法はsetup関数の中で直接定義できます。そしてreturnで出ればいいです。方法でcountにアクセスするときに使用しますか？value方法でアクセスします。ここで強調したいのですが、setupで宣言された応答式変数にアクセスするときは、Watchとcomputedにアクセスする必要があります。
次にウォッチを定義します。手動でウォッチを導入する必要があります。これもTree-Sehakingの目的に達しています。何を使って何を導入しますか？最後に包装しても使うアプリだけを包装して、後のcomputedも同じです。
ウオッチ法には2つのパラメータがあり、いずれも関数であり、1番目の関数は傍受値を返し、2番目の関数はコールバック関数であり、その2つのパラメータはそれぞれ新しい値と古い値を表しています。
computted方法は計算した値を返します。最後にリターンが必要です。使い方は上のように分かりやすいです。
このように応答式データを宣言してもいいです。
前に述べたように、応答式のデータはrefを使う必要がありますが、実際にはreactiveを使って複数の変数を宣言してもいいです。

<template>
 <div class="home">
 <p>str: {{state.str}}</p>
 <p>count: {{state.count}}</p>
 <button @click="add">  </button>
 </div>
</template>

<script>
import { reactive } from 'vue'
export default {
 setup () {
 //    reactive，        
 const state = reactive({
 count: 0,
 str: 'hello'
 })

 //       ，     .value      
 const add = () => {
 // state.count.value++ //   
 state.count++
 }

 return {
 state,
 add
 }
 }
}
</script>

reactiveとref
上でrefとreactiveと言いましたが、ここで簡単に話してください。reactiveは、一般的なオブジェクトを受信し、そのオブジェクトの応答式エージェントを返します。これは、2.xのVue.observable()に相当します。

const obj = reactive({ count: 0 })

// obj            
//      ，     obj.count

refもまた、パラメータを受信して応答式を返し、変更可能なrefオブジェクトであり、一般的なパラメータは、数値や文字列などの基礎タイプである。導入されたパラメータがオブジェクトの場合は、reactive方法を呼び出して深層応答変換を行います。refオブジェクトは、内部値を指す単一の属性を持っています。valueは、その値にアクセスするときに必要です。valueはその値を取得します。ただし、セットで戻ってテンプレートに使う場合は、{}に追加・valueアクセスは必要なく、戻ってきたら自動的に解除されます。

<template>
 <div>{{ count }}</div>
</template>

<script>
 export default {
 setup() {
 return {
 count: ref(0), //     ，       .value    
 }
 },
 }
</script>

ルート情報を取得
vue 3.0では、get CurrenntInstance方法を使用して、現在のコンポーネントのインスタンスを取得し、ctx属性を介して現在のコンテキストを取得し、ctx.routerはルーティングの一例であり、ctx.c.urrentRouteは現在のルーティング情報を含む。

<script>
import { getCurrentInstance } from 'vue'
export default {
 setup () {
 const { ctx } = getCurrentInstance()
 console.log(ctx.$router.currentRoute.value)
 }
}
</script>

vuex
ファイルsrc/store/index.jsを表示する:

import Vuex from 'vuex'

export default Vuex.createStore({
 state: {
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 }
})

storeのインスタンスを作成する方法が変わったことが分かりました。vue 2ではnewを使用する方式です。

// Vue2     store   
export default new Vuex.Store({
 // ... 
})

小さな例を示しています。Vue 3.0でstoreを使います。
作成store:

import Vuex from 'vuex'

export default Vuex.createStore({
 state: {
 count: 0
 },
 mutations: {
 ADD (state) {
 state.count++
 }
 },
 actions: {
 add ({ commit }) {
 commit('ADD')
 }
 },
 modules: {
 }
})

コンポーネントにstoreを使う:

<template>
 <div class="home">
 <p>{{count}}</p>
 <button @click="add">  </button>
 </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
 setup () {
 const store = useStore()
 const count = computed(() => store.state.count)

 const add = () => {
 store.dispatch('add')
 }

 return {
 count,
 add
 }
 }
}
</script>

vuexのapiはほとんど変化していないが、コンポーネント内で使用する場合はuse Store方法を導入してstoreのインスタンスに戻る必要があります。実際には、現在のコンポーネントコンテキストでstoreを取得することもできます。

import {getCurrentInstance} from 'vue'

// ...
const store = getCurrentInstance().ctx.$store

 ここまで記録します。日常的に使うところまで大体カバーしています。vue 3.0の正式版を待ちましょう。まだその話です。上で述べたのは現在のvue 3.0 beta版だけに基づいています。後続のappiが変わらないことは保証されません。正式版の公式文書を待ちましょう。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。