Vue3 Composition API

Vue3 setup() / ref / reactive

...
import { ref, reactive } from "vue";
...
setup() {
　　const name = ref("Vic");
　　const names = reactive([
　　　　{ title: "Vic", value: "Vic" },
　　　　{ title: "Allen", value: "Allen" },
　　　　{ title: "Amy", value: "Amy" },
　　]);
　　return { name, names };
}
...

1. Composition API可以直接在setup()裡面定義data跟method，簡潔許多。
2. setup() 就等於Vue2生命週期的beforeCreate、created。
3. Vue2 destroyed = Vue3 onUnmounted。

reactive跟ref的差別

• ref: 不限資料型態，不會對 Object 或 Array 內部的屬性做監聽，存取資料需要.value。
• reactive: 只能是Object或Array資料型態，可以做深層監聽，存取資料不需要.value。
  

使用axios抓取資料

$ npm install axios

import { ref, reactive, onMounted } from "vue";
import axios from "axios";
onMounted(() => {
　　axios
　　.get("http://localhost/redis/public/api/order")
　　.then(function (response) {
　　　　console.log(response);
　　　　name.value = response.data.message;
　　})
　　.catch(function (error) {
　　　　console.log(error);
　　});
});

common function

import { ref, computed } from "vue";
export default function () {
　　const count = ref(0);
　　const double = computed(function(){
　　　　return count.value * 2
　　});
　　function increment() {
　　　　count.value++;
　　}
　　return {
　　　　count,
　　　　double,
　　　　increment,
　　};
}

import Counter from "@/utils/Counter.js";
const { count, double, increment } = Counter();

props

• 用來將父元件的資料傳遞給子元件。

• 有加v-bind:

• 沒加v-bind:

• v-bind可省略，以下兩者寫法一樣意思:

v-bind:parent-msg
:parent-msg

emit

• 用來將子元件的事件與資料傳遞給父元件。