序文

2020年9月19日の早朝、You Yuxi Dadaが正式にバージョン3.0をリリースしました。コード名：ワンピース、あまりエキサイティングではありません。

Vueには最初からシンプルな使命があります。つまり、誰でもすぐに学習できる親しみやすいフレームワークになることです。ユーザーベースが拡大するにつれて、フレームワークの範囲も拡大する需要に適応します。時間の経過とともに、それは「プログレッシブフレームワーク」と呼ばれるものに進化しました。ユーザーがますます需要のシナリオに対応するときに継続的なサポートを提供しながら、徐々に学習して採用できるフレームワークです。

ここにバージョン3.0のいくつかの機能があります

Vue 3では、オブジェクトベースの2.x APIは基本的に変更されていません。3.0では、大規模なアプリケーションでのVueの問題点を解決し、Reactフックと同様のロジック構成と再利用を実現する[Composition API]も導入されています。 2.xオブジェクトベースのAPIよりも柔軟なコード編成モードとより信頼できる型推論。
Vue 2と比較して、Vue 3はバンドルサイズ（ツリーの揺れを41％削減）、初期レンダリング（55％高速）、更新（133％高速）、およびメモリ使用量（54％少ない）に優れています。【大幅な性能向上】
Vue 3のコードベースはTypeScriptで記述されており、自動的に生成、テスト、バンドルされた型定義があるため、常に最新の状態です。Composition APIは型推論をうまく処理できます。Veturは公式のVSCode拡張機能であり、Vue 3の改善された内部型付け機能を使用して、テンプレート式と小道具の型チェックをサポートしています。ああ、あなたが望むなら、Vue 3タイピングはTSXを完全にサポートします。
単一ファイルコンポーネント（SFC、つまり `.vue`ファイル）に2つの新しい機能が提案されています：` <script setup> `および` <style vars> `

次に、Vue 3.0プロジェクトをビルドして、実践的な練習をします。

vue-cliに基づいてVue 3.0プロジェクトをすばやく構築する
Vue 3.0の基本機能のエクスペリエンス
vue-routerとvuex 4.0を統合する

Vue 3.0プロジェクトの初期化

最初のステップは、vue-cliをインストールすることです

npm install -g @vue/cli

次のコマンドは間違っていることに注意してください

npm install -g vue

npm install -g vue-cli

インストールが成功したら、vueコマンドを使用してメソッドをテストできます

$ vue -V
@vue/cli 4.3.1

2番目のステップは、vueプロジェクトを初期化することです。

vue create vue-next-test

コマンドを入力すると、コマンドラインの対話型ウィンドウが表示されます。ここでは、[機能を手動で選択する]を選択します。

Vue CLI v4.3.1
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features

次に、ルータ、vuex、cssプリプロセッサ、Linter / Formatterを確認します。

Vue CLI v4.3.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 3.0 项目目前需要从 Vue 2.0 项目升级而来，所以为了直接升级到 Vue 3.0 全家桶，
我们需要在 Vue 项目创建过程中勾选 Router 和 Vuex，所以避免手动写初始化代码

Vue 3.0プロジェクトのアップグレード

現在、Vue 3.0プロジェクトの作成は、プラグインのアップグレードを通じて達成する必要があります

vue-cliはまだ直接サポートされていません。カタログに入り、次のコマンドを入力します

cd vue-next-test
vue add vue-next

上記の手順を実行すると、vue-cli-plugin-vue-nextプラグインが自動的にインストールされ、プラグインは次の操作を実行します。

Vue 3.0の依存関係をインストールする
Vue 3.0 Webpackローダー構成を更新して、.vueファイルの構築をサポートします（これは非常に重要です）
Vue 3.0のテンプレートコードを作成する
コード内のVueルーターとVuexをバージョン4.0に自動的にアップグレードします。インストールされていない場合、アップグレードされません
VueルーターとVuexテンプレートコードを自動生成

上記の操作を完了すると、プロジェクトは正式にvue 3.0にアップグレードされます。プラグインはまだtypescriptをサポートしていないため、typescriptを使用する学生は待つ必要があります（まだTSをサポートしていません）。

Vue 3.0の基本機能のエクスペリエンス

以下では、プロジェクト開発の観点からvue 3.0の開発プロセスを体験します

【ルート作成】

プロジェクト開発では、通常、新しいページを作成してからルーティング構成を追加する必要があります。/src/viewsディレクトリにTest.vueを作成します。

<template>
  <div class="test">
　　   <h1>vue3.0 初体验</h1>
　　   <p>少年你的头发可还好，？？？？ 哈哈哈哈哈</p>
  </div>
</template>

<script>
 export default {
 }
</script>

<style lang="less" scoped>
.test {
  color: red;
}
</style>

次に、/ src / router / index.jsにルーティング設定を作成します

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
  }
]

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

export default router

Vueルーターを初期化するプロセスは、以前にコンストラクターが使用されたことを除いて、2.0からそれほど変わっていません。ここでは、createRouterを使用してVueルーターインスタンスを作成しています。

設定方法は基本的に同じで、設定が終わったらApp.vueのTest.vueのルートにリンクする必要があります

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

スタートアッププロジェクト

npm run serve

状態とイベントのバインド

Vueで状態を定義する方法は、React Hooksに似ています。以下では、Test.vueで状態カウントを定義します。

<template>
  <div class="test">
    <h1>test count: {
   
   {count}}</h1>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
        const count = ref(0)
        return {
            count
            }
        }
  }
</script>

Vue 3.0の初期化状態は、セットアップメソッドによるものです。

状態を定義するには、refメソッドを呼び出す必要があります。次に、カウントステータスを更新するイベントを定義します。

<template>
  <div class="test">
    <h1>test count: {
   
   {count}}</h1>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      return {
        count,
        add
      }
    }
  }
</script>

ここでaddメソッドをメソッドで定義する必要はなくなりました。

ただし、countの値を更新するときにcount ++を直接使用することはできません。代わりにcount.value ++を使用してください。

コードを更新した後、ボタンをクリックすると、countの値が更新されます

<template>
  <div class="test">
    <h1>test count: {
   
   {count}}</h1>
    <div>count * 2 = {
   
   {doubleCount}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref, computed, watch } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      return {
        count,
        doubleCount,
        add
      }
    }
  }
</script>

結合された計算属性はメソッドであり、コールバック関数を含める必要があります。計算属性にアクセスして結果を返すと、コールバック関数の値が自動的に取得されます

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

ウォッチャーウォッチもメソッドであり、2つのパラメーターが含まれています。どちらも関数です。

watch(() => count.value, 
  val => {
    console.log(`count is ${val}`)
  })

最初のパラメーターはモニターの値、count.valueはcount.valueが変更されるとモニターのコールバック関数がトリガーされ、2番目のパラメーターは2番目のパラメーターがモニターのコールバックを実行できることを意味します

2つ以上の監視属性の場合、これはそれです。

watch(
  [refA, () => refB.value],
  ([a, b], [prevA, prevB]) => {
    console.log(`a is: ${a}`)
    console.log(`b is: ${b}`)
  }
)

ルートを取得

Vue 3.0は、getCurrentInstanceメソッドを通じて現在のコンポーネントのインスタンスを取得し、コンテキストプロパティctxを通じて現在のコンテキストを取得します。

ctx。$ routerはVueルーターのインスタンスであり、現在のルーティング情報を取得するcurrentRouteが含まれています

<script>
  import { getCurrentInstance } from 'vue'

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

Vuexの統合

Vuexの統合方法は以下の通りです

Vuexの状態を定義する

最初のステップは、src / store / index.jsファイルを変更することです。

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA(state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
})

Vuexの構文とAPIは基本的に変更されていません。状態のtest.a状態を作成し、mutationの状態.test.a状態を変更するメソッドを追加しました：setTestA

Vuexステータスの見積もり

2番目のステップのTest.vueで、プロパティを計算してVuex状態を使用します。

<template>
  <div class="test">
    <h1>test count: {
   
   {count}}</h1>
    <div>count * 2 = {
   
   {doubleCount}}</div>
    <div>state from vuex {
   
   {a}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref, computed, watch, getCurrentInstance } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
      const a = computed(() => ctx.$store.state.test.a)
      return {
        count,
        doubleCount,
        add,
        a
      }
    }
  }
</script>

ここでは、属性を計算してVuexの状態を参照します。

const a = computed(() => ctx.$store.state.test.a)

ctxは、前のセクションで述べた現在のコンポーネントインスタンスです。

Vuexステータスを更新する

Vuexステータスを更新し、バージョン2.0と一貫性のあるcommitメソッドを引き続き使用する

<template>
  <div class="test">
    <h1>test count: {
   
   {count}}</h1>
    <div>count * 2 = {
   
   {doubleCount}}</div>
    <div>state from vuex {
   
   {a}}</div>
    <button @click="add">add</button>
    <button @click="update">update a</button>
  </div>
</template>

<script>
  import { ref, computed, watch, getCurrentInstance } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
      const a = computed(() => ctx.$store.state.test.a)
      const update = () => {
        ctx.$store.commit('setTestA', count)
      }
      return {
        count,
        doubleCount,
        add,
        a,
        update
      }
    }
  }
</script>

ここで、更新ボタンをクリックした後、更新メソッドがトリガーされます。このとき、ctx。$ store.commitを介してsetTestAメソッドが呼び出され、state.test.aの値がcountの値で上書きされます。

全体的な効果は次のとおりです

最後に、次のようにまとめます

Vue 3.0はセットアップで書き込まれ、以前のすべてのデータ状態はデータで書き込まれます。

vue 2.0のすべてのメソッドはメソッドで記述され、状態とメソッドは機能モジュールに従って一緒に分割できるようになりました。これにより、モジュール化が促進されます。

ただし、これにはより高いコードの習慣と品質が必要であり、初心者は3.0でさらに混乱する可能性があります

Vueがだんだん反応しているようで、存在感は程よい

Vuexが提供機能と挿入機能に置き換えられると思います

使用する

Vue 3.0の詳細については、新しいドキュメントWebサイトにアクセスしてください。Vue 2.xユーザーの場合は、移行ガイドにアクセスしてください。

VUE 3.0初体験

序文