preface
When I was writing my personal blog, I tried to write while learning Vue3. At first I went straight to the vue3+ TS + Element-Plus video, thinking that since it was the same framework/component THAT I wanted to use for my blog, I would learn faster from the video, but the video got stuck. Here’s a brief account of the official documents and the pits I’ve stepped on
1. setup
To see the official documentation, here the official documentation directs -> Setup component options
setupThe component option is a function in which everything returned passes throughreturnExposed to the rest of the component that would otherwise be unusable.setupFunction in theBefore component creationperform
Here’s an example:
export default {
name: "ComponentName".components: {},
setup() {
let aa = 'the value of aa';
let bb = The value of 'bb';
let cc = The value of 'cc';
return { aa, bb, cc }; // Anything returned here can be used for the rest of the component},...// The "rest" of the component
};
Copy the code1.1 parameter
Setup takes two arguments:
- Props: The parent component passes a value to the child component. The value passed is reactive data
- Context: Provides a context object that contains properties, slots, and custom events
I haven’t used the setup parameters yet (because I’ve been writing static pages for my blog), but I’ll record them later
This is usually not used in setup because setup is called before other component options are called, and it does not get this correctly for other component options.
Try printing this in setup yourself and return undefined
So what do we do if we have a situation where we want to use this, getCurrentInstance, right
1.2 getCurrentInstance
The video I watched explained that when you use the Element-Plus Form component, you need to get the Form through this.$refs[formName], which is where getCurrentInstance comes in
Vo: Of course, we use ref to get DOM elements in vue3 in a slightly different way than in VUe2, and I write a note and an example of how to get elements later in this article. The code example here is a direct copy of the video source code to do the example, just do getCurrentInstance interpretation. Forget about this method of getting form elements
GetCurrentInstance supports access to internal component instances, so you can use it instead of this to call it in setup or lifecycle hooks. Then the first pit of the video appears, with code like this:
import { getCurrentInstance } from 'vue' / / introduction
setup() {
// @ts-ignore
const { ctx } = getCurrentInstance(); / /! Notice the assignment here
const handleRegister = (formName: string) = > {
ctx.$refs[formName].validate((valid: boolean) = > {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false; }}); };return { handleRegister };
},
Copy the codeI looked up some information and found that CTX instead of this is only suitable for the development phase, because getCurrentInstance() gets CTX to be used, and CTX is packaged in a different structure in the build environment
Solution: We can use proxy as follows:
const { proxy } = getCurrentInstance();
Copy the codeNote: Don’t rely on using the getCurrentInstance method everywhere in your development
Check out the official documentationgetCurrentInstance
1.3 the script – the setup
When writing a setup function, you have to return all the contents contained in it. Each time you write something, you have to return it one by one. It is very troublesome. My blog project is now labeled.
To do this, add the setup attribute to the
<script setup>And it eventually compiles to normal<script>- The whole
<script>The contents of the tag are compiled into component optionssetup()Function contents
It is written as follows:
<script setup>
const aa = 1;
function log() {
console.log(aa); // Just print the variable}...// Your other operations
// Add the setup attribute to the script tag without returning the content
</script>
Copy the code1.4 ref
1.4.1 Creating reactive data using ref
setupInternal data is not responsive
Therefore, you can use ref to create a reactive data that is automatically updated when the data changes
The ref function only listens for changes in basic types. You can use reactive to listen for changes in complex types. I’m not using reactive and I won’t write about it here.
Here’s an example:
<template>
<div>
<el-input v-model="inputData" placeholder="Please enter a value"> </el-input>
</div>
</template>
<script setup>
let inputData = ref(' '); // values that use ref have a reactive form
function log() {
console.log(inputData.value); // Note that.value is printed here
}
</script>
Copy the codeNote: Values using ref in vue are not obtained through.value, but values using ref in JS must be obtained through.value
Voice: When I was writing, I felt that I had to use.value in js to get a value, which made me not quite used to it. So have to query the easier writing, such as saw Vue3 second proposal ref syntactic sugar, but has now been abandoned, officials now does not support ref syntactic sugar, online there are also some syntactic sugar that others have written, but I still did not follow suit to use, I followed the rookie is an honest official, Don’t do unitary moths, save my own bad ass behind
1.4.2 Using ref to get elements
We can first add ref=’ XXX ‘to the element, then define a variable with the same name using ref in
<template>
<div ref="refBox">Ref fetch element</div> // Add a ref to the element
</template>
<script setup>
// this.$refs. XXX is not the same as vue2's this
let refBox = ref(null);
onMounted(() = > {
// Print out -> null
console.log('refBox.value:',refBox.value);
});
Value :
ref
console.log('refBox.value:',refBox.value);
</script>
Copy the codeNote: At setup time, the element in template is not mounted to the page, so ref must be after Mounted to get the element, so print the refBox in the onMounted life cycle and the result will be null
preface
When I was writing my personal blog, I tried to write while learning Vue3. At first I went straight to the vue3+ TS + Element-Plus video, thinking that since it was the same framework/component THAT I wanted to use for my blog, I would learn faster from the video, but the video got stuck. Here’s a brief account of the official documents and the pits I’ve stepped on
1. setup
To see the official documentation, here the official documentation directs -> Setup component options
setupThe component option is a function in which everything returned passes throughreturnExposed to the rest of the component that would otherwise be unusable.setupFunction in theBefore component creationperform
Here’s an example:
export default {
name: "ComponentName".components: {},
setup() {
let aa = 'the value of aa';
let bb = The value of 'bb';
let cc = The value of 'cc';
return { aa, bb, cc }; // Anything returned here can be used for the rest of the component},...// The "rest" of the component
};
Copy the code1.1 parameter
Setup takes two arguments:
- Props: The parent component passes a value to the child component. The value passed is reactive data
- Context: Provides a context object that contains properties, slots, and custom events
I haven’t used the setup parameters yet (because I’ve been writing mostly static pages for my blog). I’ll use them later and record them in detail
This is usually not used in setup because setup is called before other component options are called, and it does not get this correctly for other component options.
Try printing this in setup yourself and return undefined
So what do we do if we have a situation where we want to use this, getCurrentInstance, right
1.2 getCurrentInstance
The video I watched explained that when you use the Element-Plus Form component, you need to get the Form through this.$refs[formName], which is where getCurrentInstance comes in
Vo: Of course, we use ref to get DOM elements in vue3 in a slightly different way than in VUe2, and I write a note and an example of how to get elements later in this article. The code example here is a direct copy of the video source code to do the example, just do getCurrentInstance interpretation. Forget about this method of getting form elements
GetCurrentInstance supports access to internal component instances, so you can use it instead of this to call it in setup or lifecycle hooks. Then the first pit of the video appears, with code like this:
import { getCurrentInstance } from 'vue' / / introduction
setup() {
// @ts-ignore
const { ctx } = getCurrentInstance(); / /! Notice the assignment here
const handleRegister = (formName: string) = > {
ctx.$refs[formName].validate((valid: boolean) = > {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false; }}); };return { handleRegister };
},
Copy the codeI looked up some information and found that CTX instead of this is only suitable for the development phase, because getCurrentInstance() gets CTX to be used, and CTX is packaged in a different structure in the build environment
Solution: We can use proxy as follows:
const { proxy } = getCurrentInstance();
Copy the codeNote: Don’t rely on using the getCurrentInstance method everywhere in your development
Check out the official documentationgetCurrentInstance
1.3 the script – the setup
When writing a setup function, you have to return all the contents contained in it. Each time you write something, you have to return it one by one. It is very troublesome. My blog project is now labeled.
To do this, add the setup attribute to the
<script setup>And it eventually compiles to normal<script>- The whole
<script>The contents of the tag are compiled into component optionssetup()Function contents
It is written as follows:
<script setup>
const aa = 1;
function log() {
console.log(aa); // Just print the variable}...// Your other operations
// Add the setup attribute to the script tag without returning the content
</script>
Copy the code1.4 ref
1.4.1 Creating reactive data using ref
setupInternal data is not responsive
Therefore, you can use ref to create a reactive data that is automatically updated when the data changes
The ref function only listens for changes in basic types. You can use reactive to listen for changes in complex types. I’m not using reactive and I won’t write about it here.
Here’s an example:
<template>
<div>
<el-input v-model="inputData" placeholder="Please enter a value"> </el-input>
</div>
</template>
<script setup>
let inputData = ref(' '); // values that use ref have a reactive form
function log() {
console.log(inputData.value); // Note that.value is printed here
}
</script>
Copy the codeNote: Values using ref in vue are not obtained through.value, but values using ref in JS must be obtained through.value
Voice: When I was writing, I felt that I had to use.value in js to get a value, which made me not quite used to it. So have to query the easier writing, such as saw Vue3 second proposal ref syntactic sugar, but has now been abandoned, officials now does not support ref syntactic sugar, online there are also some syntactic sugar that others have written, but I still did not follow suit to use, I followed the rookie is an honest official, Don’t do unitary moths, save my own bad ass behind
1.4.2 Using ref to get elements
We can first add ref=’ XXX ‘to the element, then define a variable with the same name using ref in
<template>
<div ref="refBox">Ref fetch element</div> // Add a ref to the element
</template>
<script setup>
// this.$refs. XXX is not the same as vue2's this
let refBox = ref(null);
onMounted(() = > {
// Print out -> null
console.log('refBox.value:',refBox.value);
});
Value :
ref
console.log('refBox.value:',refBox.value);
</script>
Copy the codeNote: At setup time, the element in template is not mounted to the page, so ref must be after Mounted to get the element, so print the refBox in the onMounted life cycle and the result will be null
That’s all FOR today, but I know there’s a lot to add, and a lot to leave unwritten, such as setup parameter details, vue3 lifecycle, etc. I’ll write it later. I will continue to learn and write while writing while adding, if there is any mistake I personally understand, you are welcome to kindly correct. ❤