选项 API 与组合式 API

1let user = {};
2function getUser() {
3  user = { name: "bob" };
4}
5
6let products = [];
7function getProducts() {}
8
9const basket = [];
10const showBasket = basket.length > 0 ? true : false;
11function updateBasket(item) {}

1<script>
2export default {
3  setup() {
4    const user = {};
5    function getUser() {}
6
7    const products = [];
8    function getProducts() {}
9
10    const basket = [];
11    const showBasket = basket.length > 0 ? true : false;
12    function updateBasket(item) {}
13
14    return { user, getUser, products, getProducts, ... };
15  }
16}
17</script>

1<template>
2  <p>Welcome {{ user }}</p>
3  <button @click="getUser">获取用户</button>
4</template>

1<script>
2export default {
3  setup() {
4    const user = {};
5    function getUser() {}
6    onMounted(getUser);
7
8    const products = [];
9    function getProducts() {}
10    onMounted(getProducts);
11
12    const basket = [];
13    const showBasket = computed(() => basket.length > 0 ? true : false);
14    function updateBasket(item) {}
15
16    return { user, getUser, products, getProducts, ... };
17  }
18}
19</script>

1<script>
2import { onMounted, computed } from 'vue';
3// ...
4</script>