Explication détaillée de la façon d'utiliser watch dans Vue.js

Cet article présente principalement comment utiliser $watch dans Vue.js L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour y jeter un œil

J'ai beaucoup appris sur $watch dans Vue.js au cours des deux derniers jours, et c'est très important, j'ajouterai donc quelques notes aujourd'hui.

gitcode source du hub

Observer, Watcher, vm peuvent être considérés comme les parties les plus importantes de Vue . Après avoir détecté les modifications des données, La vue est une partie importante de la mise à jour . Voyons comment implémenter une simple fonction $watch. Bien entendu, Vue utilise de nombreuses méthodes d'optimisation, qui ne seront pas abordées une par une dans cet article.

Exemple :

// 创建 vm
let vm = new Vue({
 data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
 // 做点什么
})

Clarifiez d'abord leur relation dans cette démo et Vue :

Après que vm ait appelé $watch, il appelle d'abord la fonction d'observation Créez une instance Observer pour observer les données, et Observer crée un Dep, qui est utilisé pour gérer les abonnés. Créez ensuite une instance Watcher pour fournir la fonction update. Une fois les données modifiées, la fonction de rappel est exécutée couche par couche.

Observateur et observation

RécursivementAppelez la fonction d'observation pour créer un observateur. Dans le processus de création d'un Observer, utilisez la fonction Object.defineProperty() pour y ajouter la fonction get set et créer une instance Dep.

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

function defineReactive (obj, key, val) {
 var dep = new Dep()

 var property = Object.getOwnPropertyDescriptor(obj, key)
 // 是否允许修改
 if (property && property.configurable === false) {
  return
 }

 // 获取定义好的 get set 函数
 var getter = property && property.get
 var setter = property && property.set

 var childOb = observe(val)
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
   var value = getter ? getter.call(obj) : val
   // 说明是 Watcher 初始化时获取的, 就添加订阅者
   if (Dep.target) {
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
    }
    // if isArray do some....
   }
   return value
  },
  set: (newVal) => {
   var value = getter ? getter.call(obj) : val
   if (value === newVal) {
    return
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = observe(newVal)
   dep.notify()
  }
 })
}

Vous vous demandez peut-être ce que c'est que Dep.target ?

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!