catalogue
composition api (function based API)
Source code volume optimization
Source code organization
- The source code is rewritten by TypeScript
- use Monorepo Manage project structure
Composition API
option api
- Contains an object that describes component options (data, methods, props, etc.)
- Option APi develops complex components, and the code of the same functional logic is split into different options
option api demo
export default {
data() {
return {
positon: {
x:0,
y:0,
}
}
},
created() {
window.addEventListener('mousemove', this.handle)
},
destroyed() {
window.removeEventListener('mousemove', this.handle)
},
methods: {
handle(e) {
this.position.x = e.pageX;
this.position.y = e.pageY;
}
}
}composition api (function based API)
- vue3.0 added a set of APIs
- A set of function based APIs
- The logic of organizing components can be more flexible
compostion api demo
function useMousePosition() {
const position = Vue.reactive({
x: 0,
y: 0
});
const update = e => {
position.x = e.pageX;
position.y = e.pageY;
};
Vue.onMounted(() => {
window.addEventListener("mousemove", update);
});
Vue.onUnmounted(() => {
window.removeEventListener("mousemove");
});
return position;
}
const app = Vue.createApp({
setup() {
const position = useMousePosition();
return {
position
};
}
})
app.mount('#app')Performance improvement
- 3.0 uses proxy instead of defindProperty to implement the response, optimizes the compiler and rewrites the virtual dom, which greatly improves the performance of render and update. The official proposed that the performance of server-side rendering is also improved by 2-3 times
Responsive system upgrade
- vuejs2.* The core of responsive system in is defineProperty
- vuejs3.* proxy object is used to rewrite the responsive system, which improves the performance and function of the responsive system
- You can listen for dynamically added attributes
- You can listen and delete attributes
- You can listen for the index and length properties of the array
Compilation optimization
- vuejs2.* The process of diff is optimized by marking the static root node
- vuejs3.* By marking and promoting all static root nodes in diff, you only need to compare the contents of dynamic nodes( vue3 template explorer)
- Fragments (upgrade vuetur plug-in)
- Static lift
- Patch flag
- Cache event handler
Source code volume optimization
- vuejs3.* Some uncommon APIs (inline template, filter) have been removed
- tree-shaking
Vite
- Without packaging, the project can be run directly, which greatly improves the R & D efficiency
ES Module
- Modern browsers support ESM
- Load the module by
<script type="module" src=""></script>
- Support the default delayed loading of modules
- Similar to scrpit tag, set defer
- After the document parsing is completed, the DOMContentLoaded event is triggered for execution
Vite as Vue-cli
- Vite can run directly without packaging in development mode
- Vue cli must be packaged in advance to run in development mode
Vite features
- Quick cold start
- Compile on demand
- Module hot update
Packaging method
- vite is packaged in the production environment using Rollup and based on es module
- Vue cli is packaged using webpack
Vite create project
- Create a new project
npm init vite-app <project-name> cd <project-name> npm install npm run dev
- Template based creation
npm init vite-app --template react npm init vite-app --template preact