需求:之前有vue2基礎,需要學習使用vue3;當然小白也可以(建議先學習vue2)
思路:如果已經(jīng)學習完vue2,那么vue3直接就是小case
一、vue3頁面結構(歸納為三種)
1.傳統(tǒng)的vue2寫法(vue3向下兼容vue2)
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script>
export default {
data() {
return {
number: 1,
};
},
methods: {
addNum() {
this.number += 1;
},
},
};
</script>
2.<script setup>(推薦)
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script setup>
import { ref } from "vue";
const number = ref(1);
const addNum = () => {
number.value += 1;
};
</script>
3.setup() 函數(shù)寫法
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script>
import { ref } from "vue";
export default {
// !!!看過來<比較繁瑣,不推薦使用>
setup() {
let number = ref(1);
const addNum = () => {
number.value += 1;
};
return {
number,
addNum,
};
},
};
</script>
如上:<script setup>是最簡潔的寫法,如果是小白,推薦從第一種(vue2)開始學起
第二種是目前vue3使用比較廣泛的寫法,也是最簡潔明了的
第三種寫法:由于所有的數(shù)據(jù)都需要return才能使用,不建議使用
二、使用 <script setup> 寫代碼
1.data的使用及類比
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script>
export default {
// vue2寫法
data() {
return {
number: 1,
};
},
methods: {
addNum() {
this.number += 1;
},
},
};
</script>
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script setup>
// vue3寫法
import { ref } from "vue";
const number = ref(1);
const addNum = () => {
number.value += 1;
};
</script>
注意:vue2里面的數(shù)據(jù),現(xiàn)在都用ref聲明;需要使用時,不在用this取值,用.value直接獲取。!!!vue3里面不要使用解構,會失去響應(可以來用reactive()保證數(shù)據(jù)響應)
2.生命周期使用及類比
vue3里面:除了沒有beforeCreate和created這兩個函數(shù)外(使用steup取代,setup函數(shù)發(fā)生在beforeCreate之前);
還有就是destroy的兩個函數(shù)改名為unmount,直接在前面加上on開頭,并使用駝峰命名就ok。
<template>
<div>{{ number }}</div>
<button @click="addNum">自增</button>
</template>
<script setup>
// vue3寫法
import { ref } from "vue";
// 需要先解構出來
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
const number = ref(1);
const addNum = () => {
number.value += 1;
};
onBeforeMount(() => {});
onMounted(() => {});
onBeforeUpdate(() => {});
onUpdated(() => {});
onBeforeUnmount(() => {});
onUnmounted(() => {});
</script>
3.computed和methods類比
methods在vue3里面只需要創(chuàng)建方法就可以,其余的和vue2相同
<template>
<div>{{ number }}</div>
<div>{{ changeNum }}</div>
<button @click="addNum">自增</button>
</template>
<script>
export default {
data() {
return {
number: 1,
number1: 1,
};
},
// vue2寫法
computed: {
changeNum() {
return this.number1 + 10;
},
},
methods: {
addNum() {
this.number += 1;
},
},
};
</script>
<template>
<div>{{ number }}</div>
<div>{{ changeNum }}</div>
<button @click="addNum">自增</button>
</template>
<script setup>
// vue3寫法
import { ref } from "vue";
const number = ref(1);
const number1 = ref(1);
const addNum = () => {
number.value += 1;
};
const changeNum = computed(() => {
// 記得加 .value
return number1.value + 10;
});
</script>
4.watch
<template>
<div>{{ number }}</div>
<div>{{ changeNum }}</div>
<div>{{ watchNumber }}</div>
<button @click="addNum">自增</button>
</template>
<script>
export default {
data() {
return {
number: 1,
number1: 1,
watchNumber: 1,
};
},
// vue2寫法
watch: {
number: {
handler(newVal, oldVal) {
//監(jiān)聽后的操作
this.watchNumber += 5;
},
deep: true, // 加這個屬性,深度監(jiān)聽
},
},
computed: {
changeNum() {
return this.number1 + 10;
},
},
methods: {
addNum() {
this.number += 1;
},
},
};
</script>
<template>
<div>{{ number }}</div>
<div>{{ watchNumber }}</div>
<div>{{ changeNum }}</div>
<button @click="addNum">自增</button>
</template>
<script setup>
import { ref, watch } from "vue";
const number = ref(1);
const number1 = ref(1);
const watchNumber = ref(1);
const addNum = () => {
number.value += 1;
};
// vue3寫法
watch(number, (newValue) => {
watchNumber.value = newValue + 5;
});
const changeNum = computed(() => {
// 記得加 .value
return number1.value + 10;
});
</script>
5.props
vue3聲明props可以用defineProps()聲明。
// vue2 的寫法
<template>
<div>{{ options }}</div>
</template>
<script>
export default {
props: {
options: {
type: String,
default: "",
},
},
created() {
console.log(this.options);
},
};
</script>
// Vue3 的寫法
<template>
<div>{{ options }}</div>
</template>
<script setup>
// !!!注意這里
const props = defineProps({
options: {
type: String,
default: "",
},
});
// 在 script 標簽里使用
console.log(props.options);
</script>