需求：之前有vue2基础，需要学习使用vue3；当然小白也可以（建议先学习vue2）
思路：如果已经学习完vue2，那么vue3直接就是小case
一、vue3页面结构（归纳为三种）
1.传统的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() 函数写法
<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使用比较广泛的写法，也是最简洁明了的
第三种写法：由于所有的数据都需要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里面的数据，现在都用ref声明；需要使用时，不在用this取值，用.value直接获取。！！！vue3里面不要使用解构，会失去响应（可以来用reactive（）保证数据响应）
2.生命周期使用及类比
vue3里面：除了没有beforeCreate和created这两个函数外（使用steup取代，setup函数发生在beforeCreate之前）；
还有就是destroy的两个函数改名为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里面只需要创建方法就可以，其余的和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) {
//监听后的操作
this.watchNumber += 5;
},
deep: true, // 加这个属性，深度监听
},
},
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>
