What are the ways to make an Observer in Vue?
Jun 12, 2018 pm 02:55 PMThis time I will bring you the methods of making an Observer in Vue, and what are the precautions for making an Observer in Vue. The following is a practical case, let's take a look.
Introduction:
This article is an in-depth introduction to the responsive principles of Vue’s official documentation (https://cn.vuejs.org/v2/guide/reactivity.html) Understand and restore the implementation process through source code.
The responsive principle can be divided into two steps, the process of relying on collection and the process of triggering and re-rendering. There are three very important classes in the dependency collection process, namely Watcher, Dep, and Observer. This article mainly explains Observer.
This article explains the content of Observer that was not covered in the previous article. Let’s first look at this picture on the official website:
The main function of Observer It realizes the process of touch -Data(getter) - Collect as Dependency in the picture above, which is the process of dependency collection.
Let’s take the following code as an example to sort it out:
(Note: Swipe left and right to view the complete code, the same below)
1 2 3 4 5 6 7 8 9 10 11 12 |
|
In the source code, restore Vue The process of instantiation, step by step from the beginning to the source code of the Observer class, is as follows (a lot of code that is not discussed in this article is omitted):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
In the initData method, the data in the data item begins Performing "observation" will turn all data into observable. Next, look at the code of the observe method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
The function of the observe method is to create an Observer instance for data and return it. If data has the ob attribute, it means there is already an Observer instance, and the existing instance is returned. Vue's responsive data will have an ob attribute, which stores the Observer instance of the attribute to prevent repeated binding. Let’s look at what happens in the new Observer(value) process:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
As you can see from the source code, there are two main judgments made in the process of instantiating Observer. If it is an array, call the oberser method again for each item in the array to observe; if it is a non-array object, traverse each attribute of the object and call the defineReactive method on it. The defineReactive method here is the core! Dependency collection is completed by using the Object.defineProperty method to add get/set to each property that needs to be observed. After dependencies are collected, each property will have a Dep to save all Watcher objects. According to the example at the beginning of the article, get/set is added to firstName and fullName respectively, and each of them has a Dep instance to save all the Watcher objects that observe them. The following is the source code of defineReactive:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
|
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to package and optimize webpack4.0
Make json and array key value casing Convert
The above is the detailed content of What are the ways to make an Observer in Vue?. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The difference between event and $event in vue

The difference between export and export default in vue

What scenarios can event modifiers in vue be used for?
