Recently, because of project needs, I had to learn Vue3. So it took 4 hours to go through Vue3. Now let me take you to quickly understand how Vue3 is written.
The purpose of this article is to let people who already have Vue2 development experience quickly master the writing method of Vue3.
Therefore, this article assumes that you have mastered the core content of Vue , and only introduces what you need to know to write Vue3 code.
1. Three ways of writing script in Vue3
First of all, Vue3 has added a new thing called composition api, which is called Composition API in English. Therefore, Vue3 script now supports three ways of writing,
1. The most basic Vue2 writing method
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
methods: {
onClick() {
this.count += 1;
},
},
}
</script>2. The setup() attribute
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
import { ref } from 'vue';
export default {
// 注意这部分
setup() {
let count = ref(1);
const onClick = () => {
count.value += 1;
};
return {
count,
onClick,
};
},
}
</script>3、<script setup>
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
</script>As you can see, both the number of lines of code and the compactness of the code, <script setup> the method is the simplest form.
If you are familiar with Vue, then I recommend the way you use.<script setup>
This way of writing makes Vue3 my favorite front-end framework.
If you are still new to the front end, then I recommend that you learn the first way of writing first.
Because the learning burden of the first way of writing is smaller, learn the first way first, master the most basic Vue usage, and then according to my article, quickly master the most important content in Vue3.
The first way of writing is the same as the way of writing Vue2 in the past, so we won't introduce it too much.
The second way of writing, all objects and methods need return to be used, is too wordy. Except for old projects, you can experience the new features of Vue3 in this way, I personally don't recommend learning about this way. Anyway, I don't plan to improve this part for the time being.
So, next, we mainly introduce, that is <script setup> , what needs to be understood in this writing method.
Note: <script setup> It is essentially the grammatical sugar of the second way of writing. After mastering this way of writing, in fact, the second way of writing can basically be mastered. (Another reason not to learn the second way of writing).
2. How to use <script setup> to write components
Learning Vue3 does not mean that you need to learn a new technology. The underlying development ideas of Vue3 are no different from Vue2.
The difference between V3 and V2 is like, you speak the same sentence in different languages or dialects.
So what we need to care about is how to write the content in Vue2 in the way of Vue3.
1. data——The only thing to pay attention to
Throughout data this section, you just need to remember the following.
Attributes previously created in , are now all declared.data ref()
Use it directly in , remember to add it in .template script .value
At the beginning, I have written a simple example, let's take it directly for comparison.
1) Writing comparison
// Vue2 的写法
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
methods: {
onClick() {
this.count += 1;
},
},
}
</script>// Vue3 的写法
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref } from 'vue';
// 用这种方式声明
const count = ref(1);
const onClick = () => {
// 使用的时候记得 .value
count.value += 1;
};
</script>2) Precautions - the mental burden of combined APIs
a、ref 和 reactive
In Vue3, also provides a reactive called api.
But my suggestion is that you don't need to care about it. In most scenarios, ref it is sufficient.
b. When to use the package and when not to use it.ref()
Whether to use ref depends on whether the page should change after the value of your variable is changed.
Of course, you don't need to care about this at all, just write data the same as in the past.
It's just that when you use it, you need to keep it .value.
c. Do not deconstruct and use
When using it, don't write it like the following, it will lose responsiveness.
That is, the value will be updated, but the page will not be updated
xml
copy code
// Vue3 的写法
<template>
<div>{
{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1);
const onClick = () => {
// 不要这样写！！
const { value } = count;
value += 1;
};
</script>Note: To learn Vue3, you need to consider content like this, which increases the learning cost. In fact, these mental burdens can be completely ignored during the learning process.
This is why I recommend newcomers to learn Vue2 first.
2、methods
To declare the event method, we only need to script create a method object in the tag.
How to write the rest in Vue2, Vue3 is the same way.
xml
copy code
// Vue2 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script>
export default {
methods: {
onClick() {
console.log('clicked')
},
},
}
</script>// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这部分
const onClick = () => {
console.log('clicked')
}
</script>3、props
We can declare that props we can use it defineProps(). For the specific writing method, let's look at the code.
1) Writing comparison
// Vue2 的写法
<template>
<div>{
{ foo }}</div>
</template>
<script>
export default {
props: {
foo: String,
},
created() {
console.log(this.foo);
},
}
</script>// Vue3 的写法
<template>
<div>{
{ foo }}</div>
</template>
<script setup>
// 注意这里
const props = defineProps({
foo: String
})
// 在 script 标签里使用
console.log(props.foo)
</script>2) Precautions - the mental burden of combined APIs
When using props, also be careful not to use destructuring.
<script setup>
const props = defineProps({
foo: String
})
// 不要这样写
const { foo } = props;
console.log(foo)
</script>4. emits event
Same as props the statement, emits we can use it defineEmits(). For the specific writing method, let's look at the code.
// Vue2 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script>
export default {
emits: ['click'], // 注意这里
methods: {
onClick() {
this.$emit('click'); // 注意这里
},
},
}
</script>// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这里
const emit = defineEmits(['click']);
const onClick = () => {
emit('click') // 注意这里
}
</script>5、computed
Directly compare the writing methods.
// Vue2 的写法
<template>
<div>
<span>{
{ value }}</span>
<span>{
{ reversedValue }}</span>
</div>
</template>
<script>
export default {
data() {
return {
value: 'this is a value',
};
},
computed: {
reversedValue() {
return value
.split('').reverse().join('');
},
},
}
</script>// Vue3 的写法
<template>
<div>
<span>{
{ value }}</span>
<span>{
{ reversedValue }}</span>
</div>
</template>
<script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')
// 注意这里
const reversedValue = computed(() => {
// 使用 ref 需要 .value
return value.value
.split('').reverse().join('');
})
</script>6、watch
In this part, we need to pay attention. In Vue3, there are two ways to write watch. One is to use directly watch, and the other is to use watchEffect.
The difference between the two writing methods is:
watchYou need to explicitly specify the dependent variables to achieve the monitoring effect.And
watchEffectit will automatically realize the monitoring effect according to the variables you use.
1) Use directly watch
// Vue2 的写法
<template>
<div>{
{ count }}</div>
<div>{
{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
anotherCount: 0,
};
},
methods: {
onClick() {
this.count += 1;
},
},
watch: {
count(newValue) {
this.anotherCount = newValue - 1;
},
},
}
</script>// Vue3 的写法
<template>
<div>{
{ count }}</div>
<div>{
{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
// 需要在这里，
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {
anotherCount.value = newValue - 1;
})
</script>2) use watchEffect
// Vue2 的写法
<template>
<div>{
{ count }}</div>
<div>{
{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
anotherCount: 0,
};
},
methods: {
onClick() {
this.count += 1;
},
},
watch: {
count(newValue) {
this.anotherCount = newValue - 1;
},
},
}
</script>// Vue3 的写法
<template>
<div>{
{ count }}</div>
<div>{
{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
watchEffect(() => {
// 会自动根据 count.value 的变化，
// 触发下面的操作
anotherCount.value = count.value - 1;
})
</script>7. Life cycle
In Vue3, in addition to destroy changing the two related hooks to unmount, the remaining thing to note is that the and two hooks <script setup> cannot be used in .beforeCreatecreated
If you are familiar with the relevant life cycle, you only need to remember that in setup it, use on the beginning and add the uppercase initial letter.
// 选项式 api 写法
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
// Vue2 里叫 beforeDestroy
beforeUnmount() {},
// Vue2 里叫 destroyed
unmounted() {},
// 其他钩子不常用，所以不列了。
}
</script>// 组合式 api 写法
<template>
<div></div>
</template>
<script setup>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from 'vue'
onBeforeMount(() => {})
onMounted(() => {})
onBeforeUpdate(() => {})
onUpdated(() => {})
onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>3. Conclusion
Well, the above content is basically enough for getting started with Vue3 quickly.
This article itself cannot help you understand all the content of Vue3, but it can help you quickly grasp the writing method of Vue3.
If you want to know the whole content of Vue3, you need to read more official documents of Vue3 yourself.
Recommended reading:
"Why does JavaScript have micro-tasks" [1]
References
[1]
https://juejin.cn/post/7086307441847042062
About this article
Source: Wetoria
https://juejin.cn/post/7225267685763907621