1. Proxy-based observer mechanism
Vue 2. X use Object. DefineProperty, reference document www.jianshu.com/p/8fe1382ba…
Vue 3 USES Proxy, objects, the agent, the reference document segmentfault.com/a/119000001…
Defects of Object.defineProperty:
1) Performance: listen by traversing the property of the object, but the property value is also an object, which requires deep traversal.
2) Unable to listen on arrays: The main operation scenario of arrays is traversal, and if set and GET methods are mounted on each element, there will be a huge performance cost
3) Detection of adding and deleting actions of attributes;
4) Array based on subscript modification, detection of.length modification
So the previous array object property changes, need to manually set to inform the page of the data modification. The following screenshots
Advantages of Proxy:
1) You can listen directly on objects instead of properties and return a new object.
2) Can directly listen to the array changes
3) Intercept a variety of ways, double speed, save memory overhead
Tree-shaking is perfectly supported
Tree-shaking is used to remove unused code and modules from ES6 Module syntax when packaging and compiling into bundles. Reference documents juejin.cn/post/684490…
Vue 2.x global apis such as nextTick cannot be TreeShake, so even if you don’t use these apis, they will be packaged into your production code package
In Vue 3, the official team reorganized all the global apis so that they supported TreeShaking
This will make the package smaller
3. Perfect Typescript support
Vue3 source code is written using TS
Typescript official documentation www.tslang.cn/
4, Composition API
Practical example, based on vuE3 development of a small demo, triangle generator
Github.com/hellangel20…
