Bagaimana untuk menyelesaikan kegagalan Vue3 ref untuk membina pembolehubah responsif

vue3 ref gagal membina pembolehubah responsif

Penerangan masalah

Gunakan ref untuk mengisytiharkan pembolehubah responsif dalam Vue3, dan gunakan fungsi untuk menukar nilai, tetapi nilai tidak boleh diubah secara responsif

<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>

Penyelesaian

Saya tidak tahu kenapa, apabila rujukannya

import {ref} from "@vue/reactivity"

, tidak akan ada respons, tetapi anda hanya perlu menukarnya kepada

vue3 API Responsif ref dan reaktif

Kami tahu bahawa fungsi ref dan fungsi reaktif digunakan untuk mencapai responsif data. Tetapi bagaimana untuk memilih antara ref dan reaktif dalam pembangunan? Mari kita bincangkan tentang perbezaan antara ref dan reaktif.

Semak

Sebelum versi Vue3, data respons telah ditakrifkan dalam fungsi data

import {ref} from "vue"

Vue2 akan merentasi semua sifat dalam data dan menggunakan Object.defineProperty untuk menetapkan setiap sifat Tukar kepada getter/setter, getter digunakan untuk mengumpul dependensi, dan setter digunakan untuk melaksanakan pemberitahuan dan menerbitkan acara kemas kini.

Vue2 mencipta objek Dep untuk setiap harta sebagai perantara dalam model terbitan langganan untuk mengumpulkan kebergantungan. Vue menjejak kebergantungan ini dan memberitahu perubahan apabila ia diakses dan diubah suai.

Vue3

Vue3 memperkenalkan ref dan reaktif untuk mencipta data responsif:

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

Kita mungkin dapat melihat perbezaan daripada kod di atas. Fungsi ref adalah untuk menukar jenis data primitif kepada data responsif Terdapat 7 jenis data primitif, iaitu: String, Number, BigInt, Boolean, Symbol, Undefined, dan Null. Tetapi ada muslihat yang aneh, iaitu, ref juga boleh menjadi objek. Kami akan bercakap mengenainya kemudian. Fungsi reaktif adalah untuk menukar objek kepada objek responsif.

• ref:

ref digunakan untuk menukar jenis data primitif kepada respons Jenis data daripada atribut formula.

<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 menerima parameter dan mengembalikannya dibalut dalam objek dengan atribut nilai Atribut ini kemudiannya boleh digunakan untuk mengakses atau menukar nilai pembolehubah reaktif Contohnya, dalam kod di atas kami menggunakan nilai count. untuk mengubah suai nilai, seperti berikut:

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

Seperti yang dinyatakan di atas, ref juga boleh menerima jenis objek

title.value = "Hello, Vue3!"

Ini juga mungkin, tetapi ia akan menjadi agak janggal apabila memberikan nilai.

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

ref Prinsip reaktif bergantung pada Object.defineProperty(), jadi jika ia adalah objek, disyorkan untuk menggunakan reaktif.

• reaktif:

reaktif mengembalikan kereaktifan salinan objek, yang akan membongkar semua ref dalam sambil mengekalkan responsif rujukan. Secara amnya kami menggunakannya untuk melaksanakan responsif objek atau tatasusunan.

data.value.author = "nmgwap";

Pengubahsuaian tidak berbeza dengan objek biasa, paparan akan dikemas kini dalam masa nyata

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

Nota:

ref adalah untuk jenis data primitif dan reaktif Kedua-dua API digunakan untuk objek untuk memberikan kereaktifan kepada jenis data JavaScript biasa.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan kegagalan Vue3 ref untuk membina pembolehubah responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!