javascript - À propos de la liaison de données dans Vue

Question

La documentation officielle de Vue indique que les données de l'instance Vue sont stockées dans l'objet de données et que Vue convertira de manière récursive les propriétés des données en getters/setters, afin que les propriétés des données puissent répondre aux modifications des données.

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

Ma question maintenant est :

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

LoadFromLocal est une fonction déclarée globalement. L'instance Vue convertit les propriétés des données en getters et setters. La valeur de retour de cette fonction immédiatement exécutée changera en raison des modifications apportées aux autres fonctions. Comment Vue surveille-t-il les changements de données lorsque j'appelle le getter et le setter du favori sans l'appeler explicitement ? Est-ce pour vérifier la valeur de retour de la fonction immédiatement exécutée de temps en temps ?

Answer 1

1. La fonction d'exécution immédiate a été exécutée avant la nouvelle Vue

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

new Vue({App});

2. La surveillance se fait via des getters et des setters, rien avant.
Imprimer les attributs dans le modèle et accéder aux attributs lorsque vous êtes prêt équivaut à appeler des getters

Answer 2

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