構成API（共通部分）

1. 構成API（共通部分）

書類：

https://composition-api.vuejs.org/zh/api.html

1) セットアップ

新しいオプション。ここではすべての結合された API 関数が使用され、初期化中に 1 回だけ実行されます。
関数がオブジェクトを返す場合、オブジェクト内のプロパティまたはメソッドをテンプレートで直接使用できます。

2) 参照

機能: データ応答を定義する
構文: const xxx = ref(initValue):
- リアクティブデータを含む参照オブジェクトを作成する
- js形式の操作データ：xxx.value
- テンプレート内の操作データ: .value は必要ありません
通常、基本的なタイプの応答データを定義するために使用されます。

<template>
  <h2>{
  
   
   {count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
  ref
} from 'vue'
export default {

  /* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
  // data () {
  //   return {
  //     count: 0
  //   }
  // },
  // methods: {
  //   update () {
  //     this.count++
  //   }
  // }

  /* 使用vue3的composition API */
  setup () {

    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }

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

3) リアクティブ

機能: 複数のデータの応答性を定義します。
const proxy = reactive(obj): 通常のオブジェクトを受け取り、通常のオブジェクトのリアクティブプロキシオブジェクトを返します。
リアクティブ変換は「深い」ものであり、オブジェクト内のすべてのネストされたプロパティに影響します。
内部プロキシ実装は ES6 に基づいており、ソースオブジェクトの内部データはプロキシオブジェクトを通じて応答的に操作されます。

<template>
  <h2>name: {
  
   
   {state.name}}</h2>
  <h2>age: {
  
   
   {state.age}}</h2>
  <h2>wife: {
  
   
   {state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
/* 
reactive: 
    作用: 定义多个数据的响应式
    const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
    响应式转换是“深层的”：会影响对象内部所有嵌套的属性
    内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import {
  reactive,
} from 'vue'
export default {
  setup () {
    /* 
    定义响应式数据对象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    })
    console.log(state, state.wife)

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

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

4) Vue2 と Vue3 の応答性を比較する (重要)

vue2の応答性

芯：
- オブジェクト:defineProperty を通じてオブジェクトの既存のプロパティ値の読み取りと変更をハイジャック (監視/傍受)
- 配列: 配列更新配列と要素を更新する一連のメソッドをオーバーライドすることで、要素変更のハイジャックを実装します。

Object.defineProperty(data, 'count', {
   
    
    
    get () {
   
    
    }, 
    set () {
   
    
    }
})

質問
- オブジェクトが新しい属性を直接追加するか、既存の属性を削除する場合、インターフェイスは自動的に更新されません。
- 要素を直接置換するか、添字を介して長さを更新すると、インターフェイスは arr[1] = {} を自動的に更新しません。

Vue3の応答性

芯：
- プロキシ経由: 属性値の読み取りと書き込み、属性の追加、属性の削除など、データのあらゆる属性に対するあらゆる (13 種類の) 操作をインターセプトします。
- Reflect を通じて: プロキシオブジェクトの対応するプロパティに対して特定の操作を動的に実行します。
- 書類：
  - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
  - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
   
    
    
	// 拦截读取属性值
    get (target, prop) {
   
    
    
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
   
    
    
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
   
    
    
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"

1. 構成API（共通部分）

1) セットアップ

2) 参照

3) リアクティブ

4) Vue2 と Vue3 の応答性を比較する (重要)

vue2の応答性

Vue3の応答性

おすすめ