需求：之前有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>