Detailed explanation of how to use watch in Vue.js

This article mainly introduces the use of $watch in Vue.js. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

I have learned a lot about $watch in Vue.js in the past two days, and it is very important, so I will add a few notes today.

github source code

Observer, Watcher, vm can be said to be the more important parts of Vue. After detecting data changes ViewUpdate is an important link. Let's take a look at how to implement a simple $watch function. Of course, Vue uses many optimization methods, which will not be discussed one by one in this article.

Example:

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

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

First explain their relationship in this demo and Vue:

After vm calls $watch, it first calls observe Function Create an Observer instance to observe data, and the Observer creates a Dep, which is used to maintain subscribers. Then create a Watcher instance to provide the update function. Once the data changes, callback functions are executed layer by layer.

Observer and observe

RecursiveCall the observe function to create an Observer. In the process of creating an Observer, use the Object.defineProperty() function to add the get set function to it and create a Dep instance.

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()
  }
 })
}

You may wonder what the hell is Dep.target?

The above is the detailed content of Detailed explanation of how to use watch in Vue.js. For more information, please follow other related articles on the PHP Chinese website!