To learn vue3, you will learn from the basics. Understand how to use setup function, ref, recative, watch, comptued, pinia, etc.
Today we talk about the vue3 combined api, the setup function
is like this at the beginning of the learning process, the data is defined and must be returned through return
<script>
export default {
setup(){
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
return {
message,
logMessage
}
}
}
</script>
The latest contact is like this
<script setup>
cosnt message = 'new day
const logMessage= ()=>{
console.log(message)
}
</script>
Two different ways of writing, what is the difference?
In fact, directly adding setup to the script tag is syntactic sugar
Grammatical sugar writing, a simple understanding is to turn the previous complicated writing into a simple writing after a certain amount of encapsulation
The original export default, setup(){}, return do not need to be written
The official provides a tool to view the actual running code online
Click here to jump to the official tool of vue SFC Playground
Look at the actual running code on the right, which is the same as the previous complex writing. When running at the bottom layer, it is still a complicated way of writing at the beginning, but it provides us with a simple way of writing through encapsulation, which is the meaning of syntactic sugar.