overview
- Talk about your understanding of responsive data in Vue.js
- What problem did Vue3 solve? What are its advantages?
- What are the new features of Vue3
- What is the difference between the responsiveness of vue2 and vue3?
Talk about your understanding of responsive data in Vue.js
Vue 2.x
Object type : Intercept ( data hijacking) object.defineProperty()by reading and modifying properties
Object.defineProperty 【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty】
- When you pass an ordinary JavaScript object into a Vue instance as a data option, Vue will traverse all properties of this object, and use Object.defineProperty to convert all these properties into getters/setters .
- Object.defineProperty is a feature that cannot be shimmed in ES5, which is why Vue does not support IE8 and lower versions of browsers.
- When using these data attributes, dependency collection will be performed (collected to the watcher of the current component)
- Each component corresponds to a watcher instance, which will record the "touched" data as a dependency during the rendering of the component. When the setter of the dependency is triggered, the watcher will be notified, so that its associated components will be re-rendered
There is a problem:
- Adding attributes, deleting attributes, the interface will not be updated
- Modify the array directly through the subscript, the interface will not be automatically updated
For more exciting content, please search for " " on WeChat前端爱好者 , and click me to view .
Vue 3.x
Through Proxy (proxy) : Intercept the change of any attribute in the object, including: reading and writing of attribute values, adding attributes, deleting attributes, etc.
Through Reflect (reflection) : operate on the properties of the source object
Proxyis a new attribute in ECMAScript 6. 【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy】
Proxy and Reflect described in the MDN document
proxy
The Proxy object is used to create a proxy of an object, so as to realize the interception and customization of basic operations (such as attribute lookup, assignment, enumeration, function call, etc.).
The object virtualized by the Proxy proxy. It is often used as a storage backend for proxies. Verifies invariants (preserving invariant semantics) about object non-extensibility or non-configurable properties according to the target.
grammar
const p = new Proxy(target, handler)
parameter:
target：
The target object to be wrapped by the Proxy (can be any type of object, including primitive arrays, functions, or even another proxy).
handler：
An object that usually has functions as attributes, and the functions in each attribute define the behavior of the proxy p when performing various operations.
new Proxy(data,{
//拦截读取属性值
get(target, prop){
return Reflect.get(target, prop)
},
//拦截设置属性值或添加新属性
set(target, prop, value){
return Reflect.set(target, prop, value)
},
//拦截删除属性
deleteProperty(target, prop){
return Reflect.deleteProperty(target, prop)
}
})
Reffect
Reflect is a built-in object that provides methods for intercepting JavaScript operations. Reflect is not a function object, so it is not constructible.
On the reflect body, there is the **defineProperty()** method
The update of Vue3 data is realized by proxy and React .
Pros and Cons of Proxy and Object.defineProperty
The advantages of Proxy are as follows:
- Proxy can directly monitor objects instead of properties;
- Proxy can directly monitor the changes of the array;
- Proxy has as many as 13 interception methods, not limited to apply, ownKeys, deleteProperty, has, etc. Object.defineProperty does not have;
- Proxy returns a new object, we can only operate the new object to achieve the purpose, and Object.defineProperty can only traverse the object properties and directly modify;
- As a new standard, Proxy will be subject to continuous performance optimization by browser manufacturers, which is the performance bonus of the legendary new standard;
The advantages of Object.defineProperty are as follows:
- It has good compatibility and supports IE9, but Proxy has browser compatibility problems, and it cannot be smoothed out with polyfill, so Vue3.0 is rewritten with Proxy.
Summarize
- In Vue2, the data response type is mainly realized by **Object.defineProperty()**. The defect is that the addition and deletion of data cannot be operated.
- In Vue3, the data response type is mainly realized by the cooperation of proxy and Reflect , which can realize the addition, deletion, modification and query of data.
What problem did Vue3 solve? What are its advantages?
There are several problems in Vue2 code mode:
- As functions increase, more and more complex component codes become difficult to maintain. The main reason is that vue2 organizes the code through the optional API. A logical function may have multiple codes, which is not easy for others to get started.
- There is a lack of a clean mechanism for extracting and reusing logic between multiple components.
- Type inference is not friendly.
- There is no static type checking, errors are not found until the code is run, etc.
Vue3 has made some optimizations on the basis of Vue2, and has better support for typeScript.
Vue3 and Vue2 can coexist. Vue3 is backward compatible and supports optional APIs. At the same time, some new features have been added to greatly improve performance.
Advantages of Vue3:
- better performance
- smaller size
- better ts support
- better code organization
- better logic extraction
- More new features
What are the new features of Vue3
performance improvement
Responsive performance improvement, from the original Object.defineProperty to ES6-based Proxy, making it faster and eliminating warnings.
Vdom has been rewritten to break through the performance bottleneck of Vdom.
Perform template compilation optimization.
More efficient component initialization.
Better support for typeScript
With better type inference, Vue3 supports typeScript very well.
Added Composition API
Composition API is a new function of vue3, which is more powerful than mixin. It can separate each functional module, improve the reusability of code logic, and make the code more compressible.
New component
- Fragment no longer restricts the template to only one root point.
- Teleport Portal allows us to transfer the content of our control to any DOM.
- Supense renders some extra content while waiting for asynchronous components to give the app a better user experience.
Tree-shaking: supports tree-shaking optimization
After tree-shaking optimization, unnecessary modules will be pruned, and the modules that are really needed will be packed into the package. The optimized project is half the size of the original and loads faster.
Custom Renderer API: Custom Renderer
Do WebGL programming the way the DOM is implemented.
What is the difference between the responsiveness of vue2 and vue3?
The responsive principle of vue2:
Object : It hijacks the reading and modification of existing property values of objects through Object.defineProperty .
Object.defineProperty(
'data', 'count', { get(){ }, set(){ }
})
Existing problem: When the object directly adds new properties or deletes existing properties, the interface will not be automatically updated.
Array : It implements hijacking of element modification by rewriting the method of updating the array to update a series of elements in the array.
// 伪代码const originalProto = Array.prototypeconst arrayProto = Object.create(originalProto)
['push','pop','shift','unshift','splice','reverse','sort'].forEach(key=>{
arrayProto[key] = function(){
originalProto[key].apply(this.arguments)
notifyUpdate()
}
})
There is a problem : when replacing elements or updating length directly through subscripts, the interface will not be automatically updated.
For some updates of vue2 objects and arrays, the interface cannot be automatically updated. Vue2 implements real-time update of the view through the $set method.
The responsive principle of vue3:
The vue3 responsive style is to use the ES6 proxy and Reflect to cooperate with each other to realize the data responsive style, which solves the problem that the view in vue2 cannot be automatically updated.
The proxy is a deep monitor, so it can monitor any element in the object and array, so that the view can be updated in real time.
Reference address:
- https://tangjiusheng.com/web/4935.html