Grundlegende Verwendung von ref

grundlegende Verwendung

.valueDie Ref-Funktion kann einfache Datentypen in reaktionsfähige Daten umwandeln (komplexe Typen sind ebenfalls verfügbar). Beachten Sie, dass Sie beim Bearbeiten von Werten in JS Attribute hinzufügen müssen und diese normal in der Vorlage verwenden können.

 

<template>
  <div class="container">
    <div>{
   
   { name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      const name = ref('ifer')
      const updateName = () => {
        name.value = 'xxx'
      }
      return { name, updateName }
    }
  }
</script>

Umhüllen komplexer Datentypen

Hinweis: Ref kann tatsächlich komplexe Datentypen als reaktionsfähige Daten umschließen. Im Allgemeinen wird die Verwendung von Ref empfohlen, wenn der Datentyp nicht bestimmt ist, z. B. die vom Backend zurückgegebenen Daten.

 

<template>
  <div class="container">
    <div>{
   
   { data?.name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      // 初始值是 null
      const data = ref(null)
      setTimeout(() => {
        // 右边的对象可能是后端返回的
        data.value = {
          name: 'ifer'
        }
      }, 1000)
      const updateName = () => {
        data.value.name = 'xxx'
      }
      return { data, updateName }
    }
  }
</script>