So verwenden Sie berechnete Eigenschaften und Listener in Vue3

Berechnete Attribute

Wir wissen, dass einige Daten in den Daten direkt über die Interpolationssyntax in der Vorlage angezeigt werden können. In einigen Fällen müssen wir jedoch möglicherweise einige Transformationen an den Daten durchführen, bevor wir sie anzeigen, oder mehrere Daten kombinieren. Anzeige

Die Verwendung von Ausdrücken in Vorlagen kann sehr praktisch sein, sie sind jedoch ursprünglich für einfache Vorgänge konzipiert. Wenn Sie zu viel Logik in die Vorlage einfügen, wird die Vorlage überlastet und schwer zu warten Es wird viel doppelten Code geben

Wir hoffen also, die Geschäftslogik und die UI-Schnittstelle zu trennen. Eine Möglichkeit besteht darin, die Logik in eine Methode zu extrahieren, aber dieser Ansatz hat die folgenden Nachteile: Der gesamte Datennutzungsprozess wird durchgeführt Werden Sie ein Methodenaufruf

• Um Daten mehrmals zu erhalten, müssen Sie die Methode mehrmals aufrufen, um die entsprechende Logik ohne Zwischenspeicherung auszuführen

• Tatsächlich gilt für jeden Antworttyp. Für komplexe Datenlogik Sie sollten berechnete Attribute verwenden

  <div id="app">
    <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
    <h3>{{ fullname }}</h3>
  </div>
  
  <script>
    Vue.createApp({
      data() {
        return {
          firstname: &#39;Klaus&#39;,
          lastname: &#39;Wang&#39;
        }
      },
      computed: {
        fullname() {
          return this.firstname + &#39; &#39; + this.lastname
        }
      }
    }).mount(&#39;#app&#39;)

  Caching

Berechnete Attribute werden basierend auf ihren Abhängigkeiten zwischengespeichert. Wenn sich die Daten nicht ändern, müssen berechnete Attribute nicht neu berechnet werden

Aber Wenn sich die abhängigen Daten ändern, wird die berechnete Eigenschaft bei Verwendung trotzdem neu berechnet对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3>{{ fullname }}</h3>
  <button @click="change">change</button>
</div>
<script>
  Vue.createApp({
    data() {
      return {
        firstname: &#39;Klaus&#39;,
        lastname: &#39;Wang&#39;
      }
    },
    methods: {
      change() {
        this.fullname = &#39;Alex Li&#39;
      }
    },
    computed: {
      // 计算属性的完整写法
      fullname: {
        get() {
          return this.firstname + &#39; &#39; + this.lastname
        },
        set(v) {
          this.firstname = v.split(&#39; &#39;)[0]
          this.lastname = v.split(&#39; &#39;)[1]
        }
      }
    }
  }).mount(&#39;#app&#39;)
</script>

缓存

计算属性会基于它们的依赖关系进行缓存，在数据不发生变化时，计算属性是不需要重新计算的

但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算

并且界面会使用最新的计算属性的值进行重新渲染

getter 和 setter

计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // 可以使用watch监听响应式数据的改变
    // 对应有两个参数
    // 参数一 --- 新值
    // 参数二 --- 旧值
    info(newV, oldV) {
      // 如果监听的值是对象，获取到的新值和旧值是对应对象的代理对象
      console.log(newV, oldV)

      // 代理对象 转 原生对象
      // 1. 使用浅拷贝获取一个新的对象，获取的新的对象为原生对象
      console.log({...newV})

      // 2. 使用Vue.toRaw方法获取原生对象
      console.log(Vue.toRaw(newV))
    }
  },
  methods: {
    change() {
      this.info = {
        name: 'Steven'
      }
    }
  }
}).mount('#app')

侦听器

在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中，当数据变化时，template会自动进行更新来显示最新的数据

但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 开启了深度监听后，当info的属性发生改变的时候，就会触发对应的watch回调
      // 注意: 和直接修改info引用不同的是，如果直接修改的是对象的属性
      // 那么此时newV和oldV是同一个对象的引用, 此时也就获取不到对应的旧值
      handler(newV, oldV) {
        console.log(newV, oldV)
        console.log(newV === oldV)  // => true
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

配置选项

属性	说明
deep	是否开启深度监听 值为boolean 未开启的时候，如果监听的是对象，那么只有对象的引用发生改变的时候，才会触发watch回调 开始后，如果监听的是对象，那么只要对象中的任意一个属性发生了改变，就会触发watch回调
immediate	是否立即开始监听 默认情况下，初次渲染是不会触发watch监听，只有当值发生改变后，才会触发watch监听 将immediate设置为true后，初次渲染也会触发watch监听，此时oldValue的值为undefined

watch: {
  'info.name'(newV, oldV){
    console.log(newV, oldV)
  }
}

其它写法

直接监听对象属性

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // watch的值如果是一个字符串的时候
    // 会自动以该字符串作为函数名去methods中查找对应的方法
    'info.name': 'watchHandler'
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(newV, oldV){
      console.log(newV, oldV)
    }
  }
}).mount('#app')

字符串写法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    'info.name': [
      'watchHandler',

      function handle() {
        console.log('handler2')
      },

      {
        handler() {
          console.log('handler3')
        }
      }
    ]
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(){
      console.log('handler1')
    }
  }
}).mount('#app')

数组写法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  created() {
    /*
          $watch 参数列表
            参数一 --- 侦听源
            参数二 --- 侦听回调
            参数三 --- 配置对象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

$watch

Und die Schnittstelle wird mit dem zuletzt berechneten Eigenschaftswert neu gerendert🎜

Getter und Setter

🎜 In den meisten Fällen eine berechnete Eigenschaft Erfordert nur eine Getter-Methode, daher schreiben wir die berechnete Eigenschaft direkt als Funktion🎜rrreee🎜Der Listener🎜🎜 definiert die Daten im von data zurückgegebenen Objekt. Diese Daten werden durch Interpolationssyntax usw. übergeben. Die Methode ist an die Vorlage gebunden . Wenn sich die Daten ändern, wird die Vorlage automatisch aktualisiert, um die neuesten Daten anzuzeigen. In einigen Fällen möchten wir jedoch die Änderung bestimmter Daten in der Codelogik überwachen abgeschlossen🎜rrreee

Konfigurationsoptionen

deep

Eigenschaften	Beschreibung
Gibt an, ob die Tiefenüberwachung aktiviert werden soll Der Wert ist boolesch Wenn es nicht aktiviert ist und das Objekt überwacht wird, ändert sich nur die Referenz des Objekts Der Überwachungsrückruf wird ausgelöst. Wenn das Objekt nach dem Start überwacht wird, wird der Überwachungsrückruf sofort ausgelöst, solange sich ein Attribut im Objekt ändert.
	Ob die Überwachung sofort gestartet werden soll Standardmäßig wird die Überwachungsüberwachung beim ersten Rendern nicht ausgelöst. Nur wenn sich der Wert ändert, wird die Überwachungsüberwachung ausgelöst Sofort festlegen true Anschließend löst das erste Rendering auch die Überwachung aus. Zu diesem Zeitpunkt ist der Wert von oldValue undefiniert

rrreee

Andere Schreibmethoden

🎜 Objekteigenschaften direkt überwachen🎜rrreee🎜String-Schreiben🎜rrreee🎜Array-Schreiben🎜rrreee🎜$watch🎜rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie berechnete Eigenschaften und Listener in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!