Vue3.xの新機能まとめとvue2.xとの比較

モバイル 2023-07-30 11:15:05 訪問数: null

Vue3.0の機能の概要

1. Vue3.x と Vue2.x の違い

1. OptionsApiとCompositionApiの違い

注: Vue3.x でも vue2 のオプションの API 記述メソッドを使用できますが、最新の構成 API 記述メソッドを選択することをお勧めします。

OptionsApi - Vue2.x - Option Api
1. 自由度は限られており、プロップ、メソッド、データ、計算、監視などの規定に従ってコードを記述する必要があり、それぞれが独自の役割を実行し、交差は禁止されています。
2. コンテキストはこれを使用する必要があります3.
ライフ サイクルには beforeCreated() と Created() が含まれます

CombopositionApi - Vue3.x - Commission Api
1. コードを分割し、setup() 関数内で自由に記述できるようにします。これにより、コード分割の意味がさらに軽減されます。 2. これを使用しない場合は、
setup() 関数の context パラメーターを一律に使用します。オリジナルの this.getData => context.getData による
3. ライフサイクルは setup() エントリによって置き換えられます
4. Tree-Shaking の目的は、使用されるものをすべて導入することであり、最終的には使用される API のみがパッケージ化されます

例:
コンテンツコンテキスト
ここに画像の説明を挿入

2. ライフサイクルの変化

全体としては大きな変化はなく、以前の beforeCreate を Setup で置き換えて作成するだけで、その他のライフサイクルの名称は変更されており、機能は変更ありません。
ここに画像の説明を挿入

3. テンプレートテンプレートは複数のルートタグをサポートします

  • 元の単一のルート タグを調整して複数のルート タグをサポートし、無駄なコードを減らし、コードの自由度を高めます。
  • 複数のルートタグがサポートされているのは、最下層がラップ用の Fragment コンポーネントに変更されているためです。
//Vue2.x写法
<template>
	<div class="name">
		<p></p>
		<p></p>
	</div>
</template>

//Vue3.x
<template>
	<div class="name"></div>
	<div class="name2"></div>
	<div class="name3"></div>
</template>

4.Routeはページインスタンスとルーティング情報を取得します。

Vue2.x

  • これを通じてルーターインスタンスを取得します
export default{
    
    
  mounted() {
    
    
    this.getRouter();
  },
  methods: {
    
    
    getRouter() {
    
    
      console.log(this.$route);
      console.log(this.$router);
    },
  },
}

Vue3.x

  • 1 つ目は、getCurrentInstance メソッドを使用して現在のコンポーネント インスタンスを取得することです。

import {
    
     getCurrentInstance } from "vue";
export default {
    
    
  setup(props, context) {
    
    
    const {
    
     ctx } = getCurrentInstance();
    console.log(ctx.$router.currentRoute.value);
  },
};
  • 2 つ目は userRoute と userRouter 経由です
import {
    
     useRoute, useRouter } from "vue-router";
export default {
    
    
  setup(props, context) {
    
    
    const currRoute = useRoute();
    const currRouter = useRouter();

    console.log(currRoute);
    console.log(currRouter);
  },
};

5. Vuex の状態管理

  • APIは大きく変わっていませんが、
  • インスタンスの作成方法が変更され、Vue2.x は new Store、Vue3.x は createStore になりました。
//Vue2.x 中创建 store 实例
export default new Vuex.Store({
    
    
   // ... 
})


//Vue3.x
import Vuex from 'vuex'

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

Vue3.x コンポーネントで使用 - 2 つの方法

  • 最初の方法
<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>
  • 2 番目の方法: 現在のコンポーネント コンテキストでストアを取得する
import {
    
    getCurrentInstance} from 'vue'
// ...
const store = getCurrentInstance().ctx.$store

6. レスポンシブオブジェクト関数 ref および reactive

export default{
    
    
	setup(){
    
    
		const count=ref(0);
		const state=reactive({
    
    
			count:0
		})
	}
}

参照

  • ref は単一の変数を定義する傾向があり、一方、reactive はオブジェクトを定義する傾向があります。
  • ref は count.value=xxx の形式でデータを変更しますが、reactive は使用するのに state.count=xxx のみを必要とします。
  • ref は内部的にカプセル化された reactive と同等です
  • ref は単純な双方向バインディング変数とみなされます toRef は、非応答オブジェクトを応答オブジェクトに変換します。
  • テンプレートは値を取得するときに { {count}}を直接使用できます。

反応的な

  • リアクティブ内では計算プロパティなどのさまざまなメソッドを使用でき、データを双方向にバインドするだけです。
  • リアクティブ後に返されたデータを変換するには、toRefs を使用するのが最善です。
  • refと混合した場合、isRefを使用して型を判断できます

7. モニター属性 watch と watchEffect の違い

  • watch では監視する属性 (パラメータ) を指定する必要がありますが、vue3.x では監視する属性 (パラメータ) を指定する必要がなく、応答性の高い属性を自動的に収集する watchEffect が追加されました
  • Watchは新しい値と古い値(更新前の値)を取得できますが、watchEffectは取得できません
  • watch は最初に依存関係を指定し、初期化中には実行されず、依存関係が変更されたときにのみ実行されます。
    一方、watchEffect は初期化中に依存関係を収集するために 1 回実行され、依存関係が変更されたときに watchEffect が再度実行されます。
  • watch も watchEffect も、双方向バインドされていないプロパティをリッスンすることはできません
  • watch は、ref と reactive によってバインドされたオブジェクトを直接監視できますが、watchEffect はできません (ref の値は .value である必要があり、reactive の値は内部属性に固有である必要があります)。また、初回のみ実行されます。

まとめ: 2 つのプロパティの違いを比較し、特定のニーズに応じて適切に使用してください。
1. コンポーネントの初期化時に実行する必要がある場合は、watchEffect を使用します。
2. 新しい値と古い値を取得する必要がある場合は、watch を使用します。
ここに画像の説明を挿入

ここに画像の説明を挿入

8. 計算された属性が計算されました

  • 最初のタイプでは値の変更が許可されていないため、「計算されたプロパティの変更は許可されていません」という警告が表示されます。
  • 2 番目では値の変更が可能です
    ここに画像の説明を挿入

9. 支柱支柱の使用変更

  • Vue2.xで使用される
exprot default {
    
    
    props: {
    
    
        title: String
    },
    mounted() {
    
    
        console.log(this.title);
    }
}
  • Vue3.xで使用される
//通过setup中的内置参数进行调用,舍弃了之前的this调用方式
exprot default {
    
    
    props: {
    
    
        title: String
    },
    //props 组件传入的属性
    setup(props,context) {
    
    
        console.log(props.title) // 响应式
    }
}

10. ミックスインのバリエーションをミックスする

  • Vue2.xのmixin パターンは、表面的には安全に見えます。しかし、オブジェクトをマージすることでコードを共有するため、コードの脆弱性が目に見えず増大し、コードのソースが不明瞭で、メソッド属性の競合などが発生し、関数を推論する能力が隠蔽されるため、アンチになります。 -パターン。
// vue页面中引入,该方法会将Mixins中的所有方法和属性一并引入
import mixin from 'mixin.js'
export default{
    
    
	data(){
    
    },
	mixins: [mixin]
}
  • Vue3.x の Comboposition API の最も賢い部分は、変数を関数やモジュール システムに渡すなど、ネイティブ JavaScript に組み込まれた保護機能に依存してコードを共有し、呼び出す必要がある部分のみを使用できるようにすることです。
// vue页面中引入
import mixin from 'mixin.js'
//第一种写法 - 利用ES6解构写法,只引用需要的部分
export default{
    
    
	setup(){
    
    
		const {
    
     count, plusOne, hello } = mixin()
		hello()
		console.log(count.value, plusOne.value)
	}
}

// 第二种写法 - 调用组件中的局部变量
export default {
    
    
  setup () {
    
    
    // 某个局部值的合成函数需要用到
    const myLocalVal = ref(0);
    // 它必须作为参数显式地传递
    const {
    
     ... } = mixin(myLocalVal);
  }
}

11. カスタムディレクティブ

  • 公式ドキュメントのカスタムディレクティブからの抜粋
  • 名前が示すように、カスタム コマンドは、v-html、v-bind、v-on などの簡単に呼び出せるように自分で作成したコマンドです。
    ここに画像の説明を挿入

12. テレポート

13. 値を渡す親子コンポーネント

  • データを親コンポーネントに返すときに、 backData などのカスタム名を使用する場合は、それをEmitsで定義する必要があります。そうしないと、コンソールに Emits オプションの警告が報告されます。
<template></template>
export default{
    
    
	emits:['backData'],
	setup(props,{
     
     emit}){
    
    
		function back(){
    
    
			emit('backData');
		}
	}
}

2. ちょっとした知識

1. すべての Vue3 ベースのコーディングは TypeScript コーディングを使用しますか?

1. この種の要件では速度が最も重要であるため、TypeScript はビジネスの変更が頻繁にあるビジネス プロジェクトには適していません。
2. ツール/インフラストラクチャ プロジェクトの場合は、TypeScript を使用するのが最適です。

2.defineComponent を使用する場合

コードの記述に使用される言語に応じて適切なモジュールを選択してください

  1. TypeScript を使用する場合は、エクスポート時に defineComponent を使用する必要があります。これら 2 つはペアになっています。図 1 に示すように、型を正しくチェックするには
  2. 図 2 に示すように、JavaScript コーディングの場合、この関数は必要ありません。
    ここに画像の説明を挿入ここに画像の説明を挿入

3. スクリプトとスクリプトセットアップの違い

  • セットアップ後に文言を追加した後、エクスポートを通じてプロパティまたはメソッドをエクスポートします
<template>
  <button @click="inc">{
    
    {
    
     count }}</button>
</template>

<script setup>
  import {
    
     ref } from 'vue'

  const count = ref(0)
  const inc = () => count.value++
</script>
  • セットアップ後に書き込まない場合は、vue2.x の data() での return と同様に、属性またはメソッドを返す必要があります。
import {
    
     ref } from 'vue'

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

    return {
    
    
      count,
      inc,
    }
  },
}

4. Object.defineProperty (Vue2) と Proxy (Vue3) のレスポンシブの違い

Vue2.x の Object.defineProperty

  • ハイジャックできるのは、オブジェクト プロパティのゲッター操作とセッター操作のみです。データが変更されると、データ、プロパティなど、オブジェクトのすべてのプロパティをトラバースする必要があり、大量のデータを消費します。
  • Set/Map、クラス、配列、その他の型はサポートされません
  • 属性の新しい追加または削除を検出できず、応答しないため、手動で this.$set を呼び出して更新する必要があります。
  • Object.defineProperty は配列の添字の変更を監視できないため、配列の添字を介して配列の値を直接設定することになり、リアルタイムで応答することも、プッシュなどのメソッドを監視することもできません。 Vue でセッターを追加する
const data= {
    
    
    name: 'xiaoming',
    sex: '男'
}
// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(key => {
    
    
  let val = data[key]
  Object.defineProperty(data, key, {
    
    
    enumerable: true, // 该属性可被枚举
    configurable: true, // 该属性可以被删除以及属性描述符可以被改变
    get () {
    
    
      console.log(`属性值${
      
      data}当前值为${
      
      val}`)
      return val
    },
    set (newValue) {
    
    
      console.log(`监听到属性值${
      
      data}由${
      
      val}变为${
      
      newValue}`)
      val = newValue
    }
  })
});
 
data.name // 属性值name当前值为zhangsan
data.name = 'lisi' // 监听到属性值name由zhangsan变为lisi
data.age // 属性值age当前值为18
data.age = 25 // 监听到属性值age由18变为25

Vue3.xプロキシ(ES6)

  • オブジェクト全体をハイジャックできる
  • オブジェクトの新しいプロパティをリアルタイムに応答でき、配列添字の変更を検出できます。
  • プロキシは ES6 の新しい属性であるため、一部のブラウザはまだサポートしておらず、IE11 とのみ互換性があります。
let obj = {
    
    
  a: 1,
  b: 2,
}
 
const p = new Proxy(obj, {
    
    
  get(target, key, value) {
    
    
    if (key === 'c') {
    
    
      return '我是自定义的一个结果';
    } else {
    
    
      return target[key];
    }
  },
 
  set(target, key, value) {
    
    
    if (value === 4) {
    
    
      target[key] = '我是自定义的一个结果';
    } else {
    
    
      target[key] = value;
    }
  }
})
 
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定义的一个结果
 
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
 
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定义的一个结果

5. env 環境変数の設定

  • プロジェクトのルート ディレクトリに新しい .env.development と .env.production を作成します。
  • カスタム環境変数は VITE_APP で始まる必要があります
  • 対応するサフィックスを package.json に追加します
  • ページ内で import.meta.env.VITE_APP_BASE_API を呼び出します。
    ここに画像の説明を挿入
    ここに画像の説明を挿入
console.log(import.meta.env);

6. データデータの初期化

Vue2.x

Object.assign(this.$data, this.$options.data());

Vue3.x

 const initState = () => {
    
    
      return {
    
    
        a: 1
      }
    }
 const state = reactive(initState())
    
 const resetState = () => {
    
    
      Object.assign(state, initState())
    }

参考文献

Vue3.x の新機能をすでに理解している場合は、Vue3 プロジェクトをすぐに開始できるように、次の記事を読むことをお勧めします。

おすすめ

転載: blog.csdn.net/r657225738/article/details/115551368
おすすめ
Open Source Daily | Chrome に組み込まれている Gemini の重要性は、中国の AI 追求に関する 5 つの大きな誤解ではありません。ECharts の創設者は魚を育てるために「海に行った」が、何もありません。驚き
中国のAIチームが「米国のために準備を進めている」という噂にマイクロソフトが反応
ランキング
配列内の重複要素を検索し、繰り返し回数の最小値から最大値までの順に並べ替えます es6
【C++学習記】Ten、C++デザインパターン - 抽象ファクトリーパターン
知人：素人の言語ランタイム（A）に
ist „collision.relativeVelocity.magnitude“ in Unity
Linuxダイナミックリンク（3）のPLTとGOTについて話す-パブリックGOTエントリ
leetcode。図L.207カリキュラム-Java
羅区[] P3518 [POI2011] SEJ、金庫
MySQL にクエリを実行するときに使用するインデックスを指定します
現在のユーザー環境変数とシステムのWin10ベースのビュー
十二の仕事 - あなたの誕生日
アーカイブ
もっと
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

コードワールド

© 2018 codetd.com