Une compréhension simple du mode d'observation de vue

Ce que cet article vous apporte, c'est une simple compréhension du mode d'observation Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Ce qui suit est ma compréhension du modèle d'observateur de vue :

Ne soyez pas partial contre le framework, vous comprenez vraiment jquery, Angular, React, etc., les frameworks ne sont que des outils.
Avez-vous déjà utilisé les méthodes de liaison d'événements trigger, on, off de jquery ? En fait, vue est également dans ce mode, sauf que vue appelle automatiquement la méthode on et déclenche automatiquement le déclencheur. Vous pouvez même implémenter l'écoute et le déclenchement d'événements sans jquery. En fait, l'explication finale est le rappel (principe de base) d'un certain événement.
Ce qui suit est une capture d'écran du répertoire de code source :

1... Lorsque l'instance de vue est initialisée, elle sera dans l'objet renvoyé par la fonction data. La méthode suivante est appelée pour l'attribut de , puis la méthode représentée par exporFn sera exécutée en fonction de exporFn. Cette méthode inclut essentiellement l'appel de la méthode getter dans 1...

 // 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性，重写对应属性的 赋值 和获取的操作。具体查看 （mdn  Object.defineProperty api）
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher 对象， 如果存在
      if (Dep.target) {
        // 把Watcher 实例 推入 Dep 实例的 subs 数组里， 这个就相当于 on
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
      dep.notify()
    }
  })

(pensez aux opérations dans le hook de rendu, qui incluent essentiellement l'obtention de la valeur dans les données d'attribut de l'instance vue ou l'obtention de la valeur de l'attribut calculé de l'instance vue)

// Watcher 构造函数 
 constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  )

. Ainsi, la fonction de rendu sera connectée à l'attribut data et à l'attribut observation de l'instance Vue, qui forme une boucle fermée. Lorsque les propriétés qu'il contient changent, la méthode setter sera automatiquement appelée, déclenchant la méthode dep.notify, qui à son tour déclenchera l'instance Watcher dans dep.subs pour appeler la méthode update, puis la mettre à jour. (Je ne sais pas comment prononcer cette partie du code, donc je ne l'ai pas écrite. Veuillez vérifier le code source pour plus de détails)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!