Recently, I developed a project using Vue3+elmentPlus and gained experience experience.

1. Install

yarn install vue@3 vuex@4 vue-router@4
Copy the code

2. Options API and Composition API

The Options API problem
  • In specific areas (data, methods, Watch, computed…) Write code that does the same thing. With the increasing complexity of the business, the amount of code will continue to increase, the subsequent maintenance is very complex, code reusability is not high.
Composition API

Features: Use the Composition API to organize code and functions more elegantly, so that the code of related functions can be organized together more orderly

  • The Vue core team describes Composition API as “a set of additional function-based apis that allow for flexible Composition of component logic”
  • Code written using the Composition API is easier to read and learn without any magic behind the scenes

3. Core: Setup ()

  • Execution timing: Called before the beforeCreate hook
  • Setup () does not have this; this is undefined
  • What Setup means: It lets you refine the logic of a module to make your components more generic and easier to encapsulate, thus reducing the amount of code.

5. Lifecycle functions and responsive data usage

  • 1) Use ref() and Reactive () instead of data attributes
  • 2) Change the properties defined in computed to use computed()
  • Setup () returns a method defined in methods
  • 4) The observed property defined in the original watch is changed to watchEffect()
<template> <div ref="content">test content</div> </template>; import { ref, reactive, onBeforeUpdate, onUpdated, onMounted, onUnmounted, computed, watch, watchEffect } from "vue"; export default { props:{ status:{ type: Number, default:0 } }, setup(props, Context) {console.log(this) // undefined // Attribute (non-responsive object) console.log(context.attrs) // slot (non-responsive object) Console. log(context.slots) // Trigger event (method) console.log(context.emit) let name = ref("ifredom") const contentDom = Dom const arr1 = ref([]) const arr2 = reactive({arr: []}) const arr3 = reactive([]) const CEO = reactive({name: "lei ", sex: "man", age: 44,}); // computed using const workAge = computed(() => {console.log(" After ten years of work "); return ceo.age + 10; }); // Listen on a single data source, Name watch(name, (newVal, OldVal) => {console.log("name changed ") console.log(name.value)}) // Listen to all data sources in function const stop = watchEffect(() => { Console. log("name changed ") console.log(name.value)}) // stop() // Lifecycle function onBeforeMount(() => {console.log("onBeforeMount-- ")}) onMounted(() => {// stop() // Lifecycle function onBeforeMount(() => {console.log("onBeforeMount-- ")}) onMounted(() => { console.log('onMounted---') }) onBeforeUpdate(() => { console.log('onBeforeUpdate---') }) onUpdated(() => { Console. log('onUpdated-- ')}) onUnmounted(() => {console.log('onUnmounted-- ')}) Info) onErrorCaptured(() => {console.log('onErrorCaptured- ')}) Console. log('onRenderTracked-- ')}) // Render identifies onRenderTriggered(() => {console.log('onRenderTriggered-- ')}) // Array assignment - Value = [1, 2, 3] // Arr2. arr = [1, 2, 3] // Method 3 arr3.push(... [1, 2, 3]) function fetchUserInfo(){console.log(" query user information ")} return {if you want to use this method in template, Name, contentDom, arr1, arR2, arR3, CEO, fetchUserInfo,},}Copy the code

6. Global attributes and Vuex usage

import { nextTick, inject, getCurrentInstance} from "vue" import { useStore } from "vuex" import { useRoute } from "vue-router" export default { Setup () {// nextTick uses nextTick(()=>{console.log('Now DOM is updated')}) const route = useRoute(); // route uses const store = useStore() // the same way as in vuex3 // Get roles in state const roles = Roles // Using const sidebar = computed(() => store.state.app.sidebar) // Method 1: // Export from vue in main.js to provide global injection properties (provide) : App.provide ('Platform', 'mobile ') // Obtain Platform from component const Platform = inject('Platform') //' mobile '// Mount to global instance properties (globalProperties) // in main.js: App. Config. GlobalProperties. Platform = 'mobile' const {CTX} = getCurrentInstance () / / / / get the current instance before this get things / / on the prototype // CTX.$store VueX // Platform console.log(ctx.Platform) return {roles, sidebar, platform }; }};Copy the code