What is data responsiveness

First of all,

const vm = new Vue({options}) //
Copy the code

When the VM /options changes (the user interacts with them) or (changes in the options –> uses props), the user/developer gets a –> response, and Vue notifying the code that uses that data.

Vue encapsulates the injected component/data, and when the relevant setter is fired, the associated component /view is rerendered –> Data and view respond to each other (for UI controls).

!!!!! Vue executes asynchronously when updating the DOM!!

Vue 2.0 reactive principle –Object.defineProperty

! Vue2 x! – Official documentation – In-depth responsive principles

When passing an ordinary JavaScript object to a Vue instance as the data option, Vue iterates through all of the object’s properties, And use Object.defineProperty() to turn all of these properties into getters/setters.

Each instance has a corresponding Watcher instance, which records the properties it touches as dependencies during component rendering. Later, when the setter for the dependency fires, notify Watcher –> the associated component to re-render.

The embodiment of practical examples

Due to JavaScript limitations, Vue cannot detect array and object changes. And Vue does not allow dynamic root-level responsive properties to be added to already created instances

When working with objects

Var vm = new Vue({data:{a:1}}) // 'vm.a' is responsive vm.b = 2 // 'vm.b' is non-responsiveCopy the code

In view of the way

$set(Vue. SomeObject,'b',2) // this.$set(VueCopy the code

When you work with arrays

Vue cannot detect changes to the following arrays:

Items [indexOfItem] = newValue; vm.items. Length = newLength; vm.itemsCopy the code

In view of the way

Vue. Set (vm.items, indexOfItem, newValue) // Global method vm.items. Splice (indexOfItem, 1, newValue) // instance method vm.items (vm.items, newValue) indexOfItem, newValue)Copy the code
The second kind of vm. Items. Splice (newLength)Copy the code

Declare a responsive property

Var vm = new Vue({data: {// declare message as a null string message: ''}, template: '< div > {{message}} < / div >'}) / / after setting ` message ` vm. The message = 'Hello! 'Copy the code

The idea of declaring placeholders first –> even undefind will work

There is also an important consideration for code maintainability: Data objects are like schemas for component state. Declaring all of the reactive properties up front makes the component code easier to understand if it changes in the future or if it is read by other developers.

Vue2.0 summary

  • Based on Object.defineProperty, there is no ability to listen on the array, so you need to redefine the array prototype to achieve responsiveness.
  • Object.defineproperty cannot detect the addition and deletion of Object attributes.
  • Since Vue performs getter/setter conversions on properties when initializing instances, all properties must exist on the data object for Vue to convert it to responsive.
  • Deep monitoring requires one-time recursion, which has a large impact on performance.

Vue 3.0 Responsive principle –Proxy

! Vue3! – Official documentation – In-depth responsive principles

When a normal JavaScript object is passed to an application or component instance as a data option, Vue uses a handler with getters and setters to iterate over all of its properties and convert it to proxy-MDN

  • Detecting when a value changes is no longer required –>Proxy allows Vue to intercept and

  • Trace the function that changes it: Do this in the getter in the proxy, called effect

  • The trigger function updates the final value: this is done in the setter in proxy, named trigger

The embodiment of practical examples

Vue3.0 summary

  • With Proxy and Reflect, you can listen natively on arrays, listening for object attributes to be added and removed.
  • You can significantly improve performance by not having to iterate through data’s properties at once.
  • Proxy is a new attribute in ES6.