javascript – Informationen zur Datenbindung in Vue

Question

Vues offizielle Dokumentation besagt, dass die Daten der Vue-Instanz im Datenobjekt gespeichert werden und Vue die Eigenschaften von Daten rekursiv in Getter/Setter umwandelt, sodass die Eigenschaften von Daten auf Datenänderungen reagieren können.

var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // -> 1
vm.$data === data // -> true

Meine Frage ist jetzt:

data() {
      return {
        favorite: (() => {
            return loadFromLocal(this.seller.id, 'favorite', false);
        })()
      };
    }

LoadFromLocal ist eine global deklarierte Funktion. Die Vue-Instanz wandelt die Eigenschaften in Daten in Getter und Setter um. Der Rückgabewert dieser sofort ausgeführten Funktion ändert sich aufgrund von Änderungen in anderen Funktionen. Wie überwacht Vue Datenänderungen, wenn ich den Getter und Setter des Favoriten aufrufe, ohne ihn explizit aufzurufen? Soll von Zeit zu Zeit der Rückgabewert der sofort ausgeführten Funktion überprüft werden?

Answer 1

1.立即执行函数在new Vue之前，已经执行完了

var App = {
  data() {
    return {
      a: (()=>{ return 1; })()
    }
  }
}

new Vue({App});

2.监听就是通过getter 和setter进行的，没有什么在之前。
在模板中打印属性，在ready时访问属性，都相当于调用了getter

Answer 2

data() {
      return {
        favorite: (() => {
            return loadFromLocal(this.seller.id, 'favorite', false);
        })()
        //其实和下面没区别，只是初始赋值是立即执行函数的返回值而已
        favorite:1
      };
    }