Vue3 ref で応答性の高い変数を構築できない問題を解決する方法

vue3 ref は応答変数の構築に失敗します

問題の説明

ref を使用して Vue3 で応答変数を宣言し、関数を使用して値を変更しますが、値を変更できませんResponsely

<template>
  <p>{{userName}}</p>
  <button @click=&#39;change()&#39;>change</button>
</template>

<script>
  //引入定义响应式数据的函数
  import {reactive} from &#39;vue&#39;;
  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity
  export default {
  name: &#39;App&#39;,
  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加
  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method
  setup(){
    //定义响应式数据：数据变化，模板中渲染会自动刷新
    // const obj=reactive({
    //   userName:&#39;jack&#39;,
    // });
    //只定义一个变量,可以使用ref将变量定义为响应式
    let userName=ref(&#39;jack&#39;)
    console.log(userName);
    const change=()=> {
      userName.value=&#39;rose&#39;     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value
      console.log(userName);
    }

    return {userName,change}
  },
}
</script>

解決策

参照が

import {ref} from "@vue/reactivity"

の場合、応答がありませんが、## に変更するだけで済みます。 #

import {ref} from "vue"

vue3 レスポンシブ API ref と reactive

データの応答性を実現するために ref 関数と reactive 関数が使用されることがわかっています。しかし、開発においてrefとreactiveのどちらを選択すればよいのでしょうか? ref と reactive の違いについて話しましょう。

レビュー

Vue3 バージョンより前は、応答データはデータ関数で定義されていました

<template>
  <h2>{{ title }}</h2>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

Vue2 はデータ内のすべてのプロパティを走査し、Object.defineProperty を使用して各プロパティを変換しますgetter/setter に変換します。getter は依存関係の収集に使用され、setter は更新イベントの通知と公開の実行に使用されます。

Vue2 は、サブスクリプション発行モデルの仲介者としてプロパティごとに Dep オブジェクトを作成し、依存関係を収集します。 Vue はこれらの依存関係を追跡し、アクセスおよび変更されたときに変更を通知します。

Vue3

Vue3 では、応答性の高いデータを作成するために ref と reactive が導入されています。

<template>
  <h2>{{ title }}</h2>
  <h3>{{ data.author }}</h3>
  <button @click=""changeTitle>修改title</button>
</template>
 
<script>
  import { ref, reactive, toRefs } from "vue";
  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      // 修改
      function changeTitle(){
        title.value == "Hello, Vue3!"
      }
 
      const data = reactive({
        author: "青年码农",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

おそらく、上記のコードとの違いがわかるでしょう。 ref の機能は、プリミティブ データ型をレスポンシブ データに変換することであり、String、Number、BigInt、Boolean、Symbol、Unknown、Null の 7 つのプリミティブ データ型があります。しかし、奇妙なトリックがあります。それは、ref がオブジェクトになることもできるということです。それについては後で話します。リアクティブの機能は、オブジェクトを応答オブジェクトに変換することです。

• ref:

ref の機能は、プリミティブ データ型をデータ型に変換することです。応答付き 式属性のデータ型。

const title = ref("Hello, Vue 3!");

ref はパラメータを受け取り、value 属性を持つオブジェクトでラップして返します。この属性は、応答変数の値にアクセスしたり変更したりするために使用できます。たとえば、上記のコードでは次のように、count.value を使用して値を変更します:

title.value = "Hello, Vue3!"

上で述べたように、ref はオブジェクト型も受け入れることができます

const data = ref({
    author: "青年码农",
    age: "18"
});

これも可能ですが、次の場合は少し面倒になります。値の割り当て。

data.value.author = "nmgwap";

ref リアクティブ原則は Object.defineProperty() に依存しているため、オブジェクトの場合はリアクティブを使用することをお勧めします。

• reactive：

reactive の反応性を返します。オブジェクトのコピー。参照の応答性を維持しながら、すべての深い参照を解凍します。一般に、オブジェクトまたは配列の応答性を実装するためにこれを使用します。

const data = reactive({
    author: "青年码农",
    age: "18"
});

変更と通常のオブジェクトに違いはありません。ビューはリアルタイムで更新されます

data.author = "nmgwap"

注:

refは元のデータ型とリアクティブ用です。どちらの API も、一般的な JavaScript データ型にリアクティブ性を与えるオブジェクトに使用されます。

以上がVue3 ref で応答性の高い変数を構築できない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。