Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the principle of Vue data response". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the principle of Vue data response" can help you solve your doubts.

What is the responsive type?

In short, the data changes, the page changes.

How to realize data response

There are generally two ways to implement data response in Javascript, which correspond to the way vue2.x and vue3.x are used. They are:

Object property interception (vue2.x)

Object.defineProperty

Object Global Agent (vue3.x)

Proxy

In which the object attributes are intercepted, the reasons are all the same.

Implement object property interception

Literal object definition

Let data = {name:' Xiaolan'}

Object.defineProperty object definition

Let data = {} Object.defineProperty (data,'name', {/ / access the name attribute will execute this method and return the value get () {console.log ('name attribute is obtained') return 'Xiaolan classmate'} / / this method is executed when the new value is set. NewVal is the new value set set (newVal) {console.log ('name property is set to a new value') console.log (newVal)}})

We can get the value through data.name, or we can assign the value through data.name=' Xiao Zhao.

Demonstration of existing problems

Finally, the value of the name obtained has not been changed.

Solution

We can transfer the linkage between the get function and the set function through an intermediate variable _ name.

Let data = {} let _ name = 'Xiaolan classmate' Object.defineProperty (data,'name', {/ / access the name attribute will execute this method. The returned value is the obtained value get () {console.log ('name attribute is obtained') return _ name} / / this method is executed when the new value is set. NewVal is the new value set set (newVal) {console.log ('name property is set to a new value') console.log (newVal) _ name = newVal}})

Result verification

General hijacking scheme

Think about it, if there is an object that has already declared the data, how can we hijack each property into the form of setter and getter?

Here is a declared piece of data

Let data = {name: 'Xiaolan', age: 18, height:180}

We want all the properties in it to be responsive, and the operations on each attribute value in the get and set methods are connected

Let data = {name: 'classmate Xiaolan', age: 18, height:180} / / traverse each attribute Object.keys (data). ForEach ((key) = > {/ / key attribute name / / data [key] attribute value defineReactive (data,key,data [key])}) / / responsive conversion method function defineReactive (data,key,value) {Object.defineProperty (data,key) {get () {return value}, set (newVal) {value = newVal}})}

Structure description: this place actually uses the characteristics of closures. See the figure below. Each time the defineReactive function is executed, it will form an independent function scope, and the incoming value will be resident in memory because of the closure. In this way, the value in each defineReactive function will be used as a local variable operated by its own set and get functions.

After reading this, the article "what is the principle of Vue data response" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.