vue3.0の最初の理解

Vue 3まだ正式にはリリースされていませんが、Alphaバージョンはリリースされています。

実稼働環境Vue 3で直接使用することは公式には推奨されていませんが、事前に学習しておくことをお勧めします。

私は彼の口が動かなかったと叫ぶことを学びました、彼の手はまだ非常に正直な開いたVue 3文書です

プロジェクトを作成する

Vue公式はgithubリポジトリを非常に親密に提供しているためVue 3、新しい機能をすばやく体験できます。

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

npm install or yarn intall
复制代码

開発環境の準備ができたら、次のコマンドを開始します。

npm run dev
复制代码

ブラウザhttp://127.0.0.1:8080で開くと、簡単なカウンターページが表示されます。

 

 

 

package.jsonを開きます。現在使用されているvueバージョンは次のとおりです。3.0.0-beta.2

Vue3の新機能

Vue 3設計の目標は、より速く、より小さく、より適切にサポートされることTypeScriptです。

いくつかの新機能は次のとおりです。

1、Composition API 2、複数のルート要素3、Suspense 4、複数のVモデル5、Reactivity 6、Teleport 7、Transition 8、Remove Filter 9、App構成

1、Composition API

Composition APIユーザーが新しい体験Vue2.xをFunction Baseもたらすことを楽しむことができるように、公式プラグインのVue公式リリース。

内vue 3箱の別々のプラグ、アウトをインストールする必要はありません。

開くとApp.vue、次のsetup()メソッドが表示されます。

<template>
  <img src="./logo.png">
  <h1>Hello Vue 3!</h1>
  <button @click="inc">Clicked {
   
   { count }} times.</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => {
      count.value++
    }

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

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

复制代码

Composition API 主に2つの主な利点を提供します。

1.明確なコード構造2.ロジックの重複を排除します

<template>
  <div class="counter">
    <p>count: {
   
   { count }}</p>
    <p>NewVal (count + 2): {
   
   { countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {
   
   { msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
  setup() {
    /* ---------------------------------------------------- */
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
    /* ---------------------------------------------------- */
    let msg= ref('some text')
    watch(msg, newVal => {
      console.log('msg changed', newVal)
    })
    const changeMessage = () => {
      msg.value = "new Message"
    }
    /* ---------------------------------------------------- */
    return {
      count,
      inc,
      dec,
      countDouble,
      msg,
      changeMessage
    }
  }
}
</script>
复制代码

が気に入らないComposition API場合は、引き続き2.x従来の方法を使用できます。

<template>
  <div class="counter">
    <p>count: {
   
   { count }}</p>
    <p>NewVal (count + 2): {
   
   { countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {
   
   { msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      msg: 'some message'
    }
  },
  computed: {
    countDouble() {
      return this.count*2
    }
  },
  watch: {
    count(newVal) {
      console.log('count changed', newVal)
    },
    msg(newVal) {
      console.log('msg changed', newVal)
    }
  },
  methods: {
     inc() {
      this.count += 1
    },
    dec() {
      if (this.count !== 0) {
        this.count -= 1
      }
    },
    changeMessage() {
      msg = "new Message"
    }
  }

}
</script>
复制代码

上記の2つのコードは、エフェクトリストでは完全に同等です。

利用Composition APIのメリット：（私たちはより良いコードを整理することができますstate、methods、computed properties、watcherなど）。

コンポーネントの規模が大きくなるにつれて、ビジネスコードをどのように編成するかが徐々に重要な問題になり、新しい開発者が多くの時間を費やすことなくコードを簡単に理解できるようになります。

mixinコードの再利用に使用する前に。ただし、mixin最大の問題点は、さまざまなコンポーネントの状態とメソッドを追跡する必要があることです。これは、開発に一定の精神的負担をもたらすことがよくあります。注意しないmixinと、コンポーネントの既存の状態またはメソッドが上書きされる可能性があります。

Composition APIコードの再利用を容易にするために使用します。

繰り返される関数のコードを抽出することもできます。

// 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 };
}
复制代码

上記のコンポーネントを他のコンポーネントで使用します。

<template>
  <div class="counter">
    <p>count: {
   
   { count }}</p>
    <p>NewVal (count + 2): {
   
   { countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p>Message: {
   
   { msg }}</p>
    <button @click="changeMessage()">change message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
  setup() {
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
    let { msg, changeMessage } = message()
    return {
      count,
      msg,
      changeMessage,
      inc,
      dec,
      countDouble
    }
  }
}
</script>
复制代码

2、複数のルート要素

ではVue 2、tempalteはルート要素のみを取ります。<p>タグが2つしかない場合でも、それらを1つの<div>タグに含める必要があります。

<template>
  <div class="counter">
    <p> Count: {
   
   { count }} </p>
    <button @click="increment"> Increment </button>
    <button @click="decrement"> Decrement</button>
  </div>
</template>
复制代码

コンパイルして渡すために、通常はルートノードを追加します。

このデザインは本当に悪いです、私はこのデザインについて何度も不平を言いました。不要なコードのネストとインデントが発生するためです。

幸い、Vue 3この制限を解除してください。

<template> </ template>では任意の数のタグを直接使用できます。

<template>
  <p> Count: {
   
   { count }} </p>
  <button @click="increment"> Increment </button>
  <button @click="decrement"> Decrement </button>
</template>
复制代码

VScodeでテンプレートを開くlintと、公式プラグインeslint-plugin-vueが新しいテンプレート構文をまだサポートしていないため、いくつかのエラーが表示されます。

3、サスペンス

SuspenseこれはVue 3新機能です。

通常、インタラクションの終わり頃は非同期プロセスですv-if。コントロールデータディスプレイに返されるデータと組み合わせて使用​​すると、デフォルトの読み込みアニメーションが提供されます。

Suspenseこのプロセスを大幅に簡素化defaultしましたfallback。2つの状態を提供します。

<template>
  <Suspense>
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{
   
   { item.title }}</h2>
          <p>{
   
   { item.body }}</p>
        </article>
      </div>
    </template>
    <template #fallback>
      Articles loading...
    </template>
  </Suspense>
</template>
<script>
import axios from 'axios'
export default {
  async setup() {
    let articleList = await axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response)
        return response.data
      })
    return {
      articleList
    }
  }
}
</script>
复制代码

4、複数のvモデル

v-models双方向のデータバインディングについては、誰もが知っています。通常、フォーム要素で使用されます。カスタムコンポーネントで使用することもあります。

Vue 21つのコンポーネントで許可されるのは1つだけですv-models。でVue 3真ん中、我々は、任意の数のことができv-model、当社のカスタムコンポーネントにバインドされました：

<template>
  <survey-form v-model:name="name" v-model:age="age">
    {" "}
  </survey-form>
</template>
复制代码

SurveyForm.vue：

<template>
    <div>
        <label>Name: </label>
        <input :value="name" @input="updateName($event.target.value)" />
        <label>Age: </label>
        <input :value="age" @input="updateAge($event.target.value)" />
    </div>
</template>
<script>
    export default {
      props: {
        name: String,
        age: Number
      },
      setup(props, { emit }) {
        const updateName = value => {
          emit('update:name', value)
        }
        const updateAge = value => {
          emit('update:age', +value)
        }
        return { updateName, updateAge }
      }
    }
</script>
复制代码

5、反応性

Vue 2 の応答性はすでに優れていますが、いくつかのケースではいくつかの問題が発生します。

<template>
  <div class="hello" @click="test">test {
   
   {list }} {
   
   { myObj }}</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [1, 2],
      myObj: { name: "Preetish" }
    };
  },
  watch: {
    list: {
      handler: () => {
        console.log("watcher triggered");
      },
      deep: true
    }
  },
  methods: {
    test() {
      this.list[2] = 4;
      this.myObj.last = "HS";
      delete this.myObj.name;
    }
  }
};
</script>
复制代码

私たちはすることによって、その見つけたthis.list要素のインデックスを変更すると、トリガされませんwacherリスナー関数を、自分の目標を達成するために、我々は、使用する必要があります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これは、任意のDOM容量ノードでページをレンダリングするためのコンポーネントを提供しました。これを行うVue 2ためにportal-vueサードパーティのプラグインを利用する場合。

でvue 3直接使用：

<Teleport to="#modal-layer">
  <div class="modal">hello</div>
</Teleport>
复制代码

<Teleport>は、vue3で提供される特定のタグPortalsです。

<テレポート>概要</テレポート>は、中間のto指定ノードに表示されます。

<div id="modal-target"></div>
复制代码

これまでのところ、<テレポート>はアルファ版では利用できません

7、トランジション

私が使用する前にv-enter-active、v-enter、v-enter-toこれらの状態を混乱に従事。

これで、Vue 3は命名からより直感的になりました：v-enterbecome v-enter-from、v-leavebecome v-leave-from。

8、フィルターを外す

Vue 3放棄されたFilter使用法、プロパティ、または達成するためのより推奨される計算方法：

<!-- vue 2.x -->
{
   
   { date | format }}

<!-- vue 3.0 -->
{
   
   { format(date) }}
复制代码

9、アプリ構成

でVue 2使用したい場合は、use()、mixin()、directive()および他の方法は、グローバル満たすために必要なVueターゲットを：

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

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

new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App,
  },
});
复制代码

ではVue 3、変更されたcreateApp戻り値のVue例：

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

const app = createApp(App);

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

app.mount("#app");
复制代码

結びの言葉

つまりVue 3、簡単な方法を提供してコードを整理および共有TypeScriptし、新しいコード編成を強力にサポートすることは、アプリケーション開発の将来に大きな影響を与えます。

一方、のようないくつかの他の特徴は、Suspenseよりv-modelsなどの開発者に大きな利便性をもたらします。

同時に、パフォーマンスが速くなり、サイズが小さくなります。それがどのように行われるかについては、別の記事を参照してください：Vue.js作者：Vue3.0の背後にある物語

リンク：https：//juejin.im/post/6844904162799386632
出典：ナゲッツ