Learning notes

It has been two years since VUe.js was used unknowingly, but the understanding of the responsive principle is stuck in the official documentation explanation 🤦♀️. Recently I made up my mind to learn it thoroughly. Here are my study notes 😎

Realize the principle of

  • Vue2. X is used forObject.defineProperty()In the methodget 和 setThese two methods hijack data
function reactive(data, key, value) {
    Object.defineProperty(data, key, {
        enumerable: true.configurable: true.get() {
            console.log('You are trying to access' + key + 'properties')
            return value
        },
        set(newValue) {
            if (value === newValue) return
            console.log('You try to change' + key + 'properties');
            value = newValue
        }
    })
}

let person = {
    name: 'Ming'.age: '24'
}

// Single attribute responsiveness
reactive(person, 'name'.'Ming')

// Test case
person.name
person.name = 'little red'
person.age / / no response

---------------------------

// Multiple attribute responsiveness
for (const key in person) {
    if (Object.hasOwnProperty.call(person, key)) {
        const element = person[key]
        reactive(person, key, element)
    }
}

// Test case
person.name
person.name = 'little red'
person.age
person.age = '66'

Copy the code
  • Vue3. X usesProxy()To proxy the entire object for data hijacking
let person = {
    name: 'Ming'.age: '24'
}

function reactive(data) {
    return new Proxy(data, {
        get(obj, prop) {
            console.log('You are trying to access' + prop + 'properties')
            return Reflect.get(... arguments) },set(obj, prop, value) {
            console.log('You try to change' + prop + 'properties')
            return Reflect.set(... arguments) } }) } person = reactive(person)// Test case
person.name
person.name = 'little red'
person.age
person.age = '25'
Copy the code
  • The difference between the two:
    • Object.defineProperty()Only one property of the target object can be hijacked at a time
    • Proxy()Can hijack the entire target,Object.defineProperty()To hijack the entire target object, you need to loop through the entire object
    • Object.defineProperty()The addition and removal of object attributes cannot be detected, nor can the ARRAY API methods listen
    • Proxy()More excellent in performance, withReflectUse, allows us to execute quicklythisThe binding

Reactive type

Vue (non-invasive)

this.vm.a++;
Copy the code

React (Intrusive)

this.setState({
  a: this.state.a + 1});Copy the code

Observer class — the key to implementing responsiveness

Array responsivity – Overrides 7 array manipulation methods

Depend on the collection

What is dependency?

The dependency of the data responsive principle is not the dependency of the NPM package we normally use, but the dependency of the Vue where the data is needed

  • Vu1.x, fine-grained dependencies, and the DOM that uses the data are all dependencies
  • Vue2. X, medium – grained dependencies. The components that use data are dependencies
  • Dependencies are collected in getters and fired in setters

Dep class and Watch class

  • The dependency collection code is packaged into a Dep class that manages each instance of the Observer class with a built-in instance of the Dep class
  • Watch is an intermediary. When data changes, the Watch notifies the component
  • A brief description of the working process
    • There is an A object (instance of the Observe class) that has been handled responsively
    • Use instance B of the Watch class to monitor data changes, and the getter is triggered the moment the monitor is added to object A
    • When the getter is fired, the Dep class instance in object A does dependency collection to collect the current instance B
    • When the data of object A changes, the setter is fired
    • The setter is fired, at which point an instance of class Dep in object A notifies instance B, and instance B fires the response callback

Handwritten responsive principle

The code structure

|-- study_reactivity |-- .gitignore |-- package-lock.json |-- package.json |-- readme.md |-- webpack.config.js |-- src | | - array. Js | | -- defineReactive. Js / / response data of main realization | | -- Dep. / js/Dep | | - index. The js / / main entrance | | -- observe. Js | | - Observer. Js / / Observer | | -- utils. Js | | -- Watch. Js / / Watch type | - WWW | - index. The HTMLCopy the code

Source warehouse

Github.com/AFine970/st…

The last

Good study will not be bad, I am 970, we progress together!