Vue3 Video Learning
(1) is no longer introduced inVuetectonic (geology)function (math.)The first thing that is introduced is a factory function called createApp.
const app = createApp(App)
(‘#app’)
Create an application instance object - app, similar to the previous vm in Vue2, but app is 'lighter' than vm.
(2) Difference between Vue2 Responsive and Vue3 Responsive Proxy
Reference video explanation: /video/BV1Zy4y1K7SHp=146
A few ES6 syntaxes
(1) Array de-duplication
(2) Merging Object Arrays
(3) Object array sorting
(4)
The first argument to the () method is the target object, and all subsequent arguments are source objects.
() is a shallow copy of the target object, for a deeper copy you can use ((obj)).
(5) find, filter Usage
(6) substring, substr, slice
Reference: /a/1190000016387899
(7) Realize string output in reverse order
Reference: /xhen/p/
Expose properties externally (defineExpose)
By default, script setup components do not expose any internally declared properties to the outside world. If you want to expose some of the properties, you can use defineExpose
script setup
Syntactic sugar is not a new feature module, it simply simplifies the must-return writing of the previous compositionApi and has better runtimeperformances。
Note: Since setup syntactic sugar is a motion formalized in vue 3.2, the version of vue 3.2 is the one that actually fits setup syntactic sugar.
In script setup, introduced components can be used directly without registering with components, and it is not possible to specify the name of the current component, it will automatically take the filename as the main name of the component, i.e. you don't need to write the name attribute anymore.
setup function
Since the created lifecycle method has not yet been executed when the setup function is executed, it is not possible to use data and methods in the setup function.
The setup function can only be synchronous and not asynchronous.
reative
reactive is the method provided in vue3 to implement responsive data, via ES6 proxy
reive parameters must be objects (json/array)
If you pass another object to reactive, by default the interface will not be updated when the object is modified, but if you want to update it, you can do it by reassigning the value
ref
ref, like reactive, is a method used to implement responsive data. Listening on simple values
The underlying nature of ref is actually still reactive, and the system will automatically convert it to ref(xx) -> reactive({value:xx}) based on the value we pass to ref
Using ref's in vue (template) does not require the value to be retrieved via value
The value of a ref used in TS must be obtained via value
Using lifecycle functions in the portfolio API, brought in directly from vue
import {onMounted} from Vue
vue3 responsive data essentials
Responsive data is implemented by definingProperty in the
Responsive data is implemented through Proxy in the
provide vs. inject
Function: Enables communication between ancestor and descendant components.
Usage: The parent component has a provide option to provide data, and the descendant component has an object option to start using that data.
Specific write-ups.
Comparison of watch function and watchEffect function in Vue3
The watch function's convention is to be well-known for both the property to be watched and the callback to be watched.
The watchEffect function works like this: you don't have to specify which property to watch, you just have to watch whichever property is used in the callback.
The watchEffect function is a bit like the computed function: the
The computed function focuses on: the computed value [PS: the return value of the callback function], so you must write the return value.
The watchEffect function focuses on the procedure [the body of the callback function], so you don't need to write a return value.
reactive() vs ref()
Reference: /xiegongzi/p/
Proxy Data Viewing Principle
Vue2 in the data review if the object type, through () getter and setter to do data monitoring;.
Cons of monitoring data in Vue2 :.
The interface will not be updated when properties are added or deleted.
Modify the data directly from the bottom. The interface will not be updated.
This is not the case in Vue3.
Proxy official link: /zh-cn/docs/web/JavaScript/Reference/Global_Objects/Proxy
Reflect official link: /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Compared to Vue2
41% reduction in packing size
55% faster initial rendering, 133% faster update rendering
54% reduction in memory
Using Proxy instead of defineProperty for data responsive
Rewriting Virtual DOM Implementation and Tree-Shaking
Creating a Vue3 project (via Vite)
nodeVersion: 14.16.3npmVersion: 6.14.13
npm create vite@latest vue3-demo --template vue
npm install
npm run dev
Using ref in vue3
Reference: /weixin_47886687/article/details/112919563
keep-alive