Vue Class Component Watcher

Posted on  by admin

So far, we have talked about what is dep and how is it initialized. But, we haven't talked about:. Why is dep needed?

Let's take a look at a simple example. The object todo is defined in the data. There is a watcher to watch on todo.done.

  • After the initialization of computed property title, todo.text holds a dep which is defined by defineReactive - closure dep.

# Initialize "watch" option

In Observer pattern, the Subject is used for collecting the dependents and notfiy the dependents whenever there is change on the Subject. In Vue reactivity system, the dep plays this role.

# Vue.$watch

For every property of a reactive object, it has a dep. Any change on them will notify the depdendents.

Then, the question is:. What is the depedent? To answer this question, we must think what reacts to the change of reactive objects.

# Create a watcher

Computed Properties. Render function (aka. The