Table of Contents
(1) Introduction to Vue3
(2) Use vite to create projects
(3) API style
(4) setup
1. Understand
2.Two points to note
(5) Responsive basics
1.ref function
2.reactive function
3. Comparison between ref and reactive
(6) Vue3 responsive principle
1.vue2 responsive principle
2.vue3 responsive principle
(7) Calculated attribute computed
(8) Listener watch, watchEffect
1.watch monitors the data defined by ref
2.watch monitors data defined by reactive
3.watchEffect function
(1) Introduction to Vue3
1. Performance improvement
Pack size reduced by 41%
Initial rendering is 55% faster, update rendering is 133% faster
Memory reduced by 54%…
2. Source code upgrade
Use Proxy instead of defineProperty to implement responsiveness
Rewriting the implementation of virtual DOM and Tree-Shaking…
3. Embrace TypeScript
Vue3 can better support TypeScript
4. New features
1.Composition API (Composition API)
setup configuration
ref and reactive
watch and watchEffect
provide and inject
…
2. New built-in components
Fragment
Teleport
Suspense
3. Other changes
New lifecycle hooks
The data option should always be declared as a function
Remove keyCode support as a modifier for v-on
(2) Use vite to create a project
Create project
npm create vue@latest
Manually download the required plug-ins (node_modules)
npm install
Startup project
npm rundev
vue project directory structure
(3)api style
Vue’s components can be written in two different styles: Optional API and Combined API .
Optional API: Vue2 writing style, using objects containing multiple options to describe the logic of components, such as data, methods, mounted, etc.
Combined API: Use imported API functions to describe component logic. In single-file components, the composition API is often used with