1. Knowledge of composition API
Vue3 is compatible with the writing method of vue2
Composition API requires proficiency
2. Extract the same code logic as Mixin
- Mixin provides a very flexible way to distribute reusable functions in vue components
- A Mixin object can contain any component options
- When a component uses a Mixin object, all the options of the Mixin object will be mixed into the options of the component itself
Mixin mixed demo:
demoMix.js
export const demoMix = {
data(){
return {
title:"hello mixin"
}
},
created(){
console.log("mixin 执行了")
},
methods:{
foo(){
console.log("foo click")
}
}
}
3. [Merge rules] If there is a conflict between the mixin and the options of the current component, how to deal with it?
4. Global Mixins
- The global Mixin can use the app method mixin to complete the registration
- Once registered, global mixin options will affect every component
5. extends [only for understanding, rarely used]
Similar to Mixins
extends demo：
extends and mixin will be used less and less in vue3
6、composition API
vue2 is the Options API
vue3 is Composition API
setup() is the place to actually write the Composition API
6.1. Disadvantages of Options API: [Poor readability]
When we implement a function, the code logic corresponding to this function will be split into each attribute
When our components become larger and more complex, the list of logical concerns will grow, and the logic of the same function will be split and scattered
Especially for those who didn't write these components in the first place, the code of this component is difficult to read and understand (other people who read components)
7. Basic usage of Options API
written in the setup function
8. The setup function: [this cannot be used in the setup function]
The setup function is actually called before created
This cannot be used in the setup function
Function parameters:
The setup function has two parameters:
- The first parameter: props [properties passed by the parent component]
- The second parameter: context
The return value context of the function contains three attributes
attrs: all non-prop attributes
slots: the slot passed by the parent component (this will be useful when returning with the render function, which will be mentioned later)
emit : emit is used when an event needs to be emitted inside the component (because we cannot access this, we cannot emit an event through this.$emit)
9. The return value of setup
Can be used in the template template
That is to say, the data option can be replaced by the return value of setup
Use of the return value of setup:
10. Reading of setup source code
runtime-core
11. The use of responsive api reactive
The return value of reactive will be hijacked when used, and proxy will be used
12、ref api
reactive has restrictions on the type passed in, requiring an object or array type to be passed in
If a basic data type is passed in, a warning will be reported
ref will return a mutable responsive object, which maintains its internal value as a responsive reference, which is the source of the ref name
Its internal value is maintained in the value attribute of ref
13. The unpacking in the template is shallow unpacking, reactive and responsive objects, which can be unpacked
14. readonly read-only api
readonly will return the read-only proxy of the original object (that is, it is still a Proxy, which is a proxy whose set method is hijacked and cannot be modified by alignment)
<template>
<div>
<h2>homeChild</h2>
<button @click = "updateState">updateState</button>
</div>
</template>
<script>
import { reactive, ref, readonly } from 'vue'
export default {
setup(){
const info1 = {name:"why"};
const readonlyInfo1 = readonly(info1);
const info2 = reactive({
name:"zhangsan"
})
const readonlyInfo2 = readonly(info2);
const info3 = ref("why");
const readonly3 = readonly(info3)
let updateState = ()=>{
// readonly2.name = "yxx"
readonly3.value = "yxx"
}
return {
updateState
}
}
}
</script>
<style scoped>
</style>