preface
The source code is here
Related documents (I don’t know if it is official 🤭)
I hope I can help you
The installation
Method 1(Install using Vite)
- npm i -g create-vite-app
- NPX create-viet-app XXXXX(project name)
Method 2(Using vuE-CLI installation)
- vue create vue3-app-vue-cli
Use Vite, which is several times faster than WebPack
The change that this points to
Vue2.0 this points directly to the component instance
Vue3.0 This points to the component proxy object, which points to the component instance
Let’s look at this printed in methods 3.0
Compostion Api
This is the focus of Vue3.0
This can happen if the component is complex
The code structure is redundant and does not conform to the principle of high cohesion and low coupling, which can cause maintenance difficulties in large projects. However, 3.0 has solved this problem. Why is this problem solved?
Please see below
This is where the compostionApi comes in. The code is highly cohesive and poorly coupled, and you can even wrap each function block separately into a function return
hooks
A lifecycle hook corresponding to the 2.x version
| Vue2.x | vue3 |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
setup
The setup method takes two arguments.
-
The first parameter is props, which is also reactive inside Setup. (Be careful not to use deconstruction assignments for props directly, as this would break the reactive, but you can use toRefs for safe deconstruction
-
The second argument is context, which is a normal object (not reactive) and exposes three component properties. 1. arrts 2.emit 3.slots
-
You can use
This API is called before all lifecycle hook functions (since setup is run around beforeCreate and Created lifecycle hooks, that is, any code that will be written in these two hooks should be written directly in Setup
In Setup, this is undefined and is no longer a component instance
All lifecycle hook functions are available in Setup
The setup function needs to return an object, and everything returned is attached to the component instance
Responsive system
As we all know, Vue2. X is implemented via Object.defineProperty in conjunction with the subscribe/publish pattern.
Vue3.0 uses ES6 Proxy to intercept access to the target object.
Create responsive data
ref
The ref method takes a raw value argument and returns a reactive REF object with the original value in its value property
When a ref parameter is accessed in the render context, it is unwrapped automatically without the need for ref.value, as shown below
reactive
The Reactive method takes a common object as a parameter and returns a reactive proxy for that common object, the equivalent of the 2.0 vue.Observable () that has created a reactive property
Listening to the
WatchEffect method
This method passes in a function, the watchEffect method, that listens for dependencies, is called immediately upon mount, and continues to be called if dependencies are updated
Watch method
Equivalent to the 2.0 Watch method, but written differently (you can refer to the documentation for details)
The life cycle
The life cycle has not changed much, with some subtle differences due to the way instances are created.
It is worth noting that in Vue2. X, the two hooks that destroy the instance are beforeDestory and deStoryed, but in Vue3.0 the names of these two hooks are changed to beforeUnmount and unmounted.
