Vue進階（幺叄零）：Vue3新特性

升級 Vue 3.0 項目

目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，

vue-cli 暫時還未直接支持創建Vue3.0項目，首先我們進入項目目錄，並輸入以下指令：

cd vue-next-test
vue add vue-next

setup

setup() 函數是 vue3 中專門爲組件提供的新屬性。它爲我們使用 vue3 的 Composition API 新特性提供了統一的入口。

setup 函數會在 beforeCreate 之後、created 之前執

1.setup是一個新的組件選項，也是其他API的入口。也就是說，你所有的操作都將在setup函數內部定義和執行， Vue3.0也將用函數代替Vue2.x的類也就是new Vue()
2.setup 第一個參數是props,這裏的props和Vue2.x中的props一致。
3.何時調用？setup是在一個組件實例被創建時，初始化了 props 之後調用，其實就是取代了Vue2.x的careted和beforeCreate。
4.setup返回一個對象，對象中的屬性將直接暴露給模板渲染的上下文。而在Vue2.x中，你定義的屬性都會被Vue內部無條件暴露給模板渲染上下文。

接收prop

 props: {
    p1: String,
  },
  setup(props, context) {
    console.log(props.p1);
    
  },

context

setup 函數的第二個形參是一個上下文對象，這個上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到，在 vue 3.x 中，它們的訪問方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs  
  }
}

computed

計算值的行爲跟計算屬性 (computed property) 一樣：只有當依賴變化的時候它纔會被重新計算。類型某act的useCallback useMemo。

computed() 返回的是一個包裝對象，它可以和普通的包裝對象一樣在 setup() 中被返回 ，也一樣會在渲染上下文中被自動展開。

用法一：

 setup() {
    const num = ref(0);
    const get_num = computed(() => num.value + "計算屬性");
    return {
      num,
      get_num,
    };
  },

用法二：

// 創建一個 ref 響應式數據
const count = ref(1)

// 創建一個 computed 計算屬性
const plusOne = computed({
  // 取值函數
  get: () => count.value + 1,
  // 賦值函數
  set: val => {
    count.value = val - 1
  }
})

// 爲計算屬性賦值的操作，會觸發 set 函數
plusOne.value = 9
// 觸發 set 函數後，count 的值會被更新
console.log(count.value) // 輸出 8

計算屬性與數據監聽

import { ref, computed, watch, watchEffect } from "vue";
export default {
    setup() {
        const count = ref(0);
        const doubleCount = computed(() => {
            return count.value * 5;
        });
        watch(
            () => count.value,
            (val, oldVal) => {
                console.log(`count is ${val}`);
            },
            {
                //是否深度監聽
                deep: true,
                //是否先執行一次
                immediate: true
            }
        );
        function add() {
            count.value++;
        }

        return {
            count,
            add,
            doubleCount
        };
    }
};

計算屬性 computed 是一個方法，裏面需要包含一個回調函數，當我們訪問計算屬性返回結果時，會自動獲取回調函數的值。

監聽器 watch 同樣是一個方法，它包含 3個參數，前兩個參數都是 function，第三個參數則是是否深度監聽等。

第一個參數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回調函數，即第二個參數，第二個參數可以執行監聽時候的回調。

如果是2 個以上的監聽屬性，

 watch(
            [() => count.value, () => name.value],
            //接收兩個參數，第一個是新值在數組中，第二個是舊值也是在數組中
            ([count, name], [oldCount, oldName]) => {
                console.log(count, name);
                console.log(oldCount, oldName);
                if (count != oldCount) {
                    console.log("count發聲變化");
                }
                if (name != oldName) {
                    console.log("name發聲變化");
                }
            }
        );

獲取路由

   //獲取當前組件實例
    const vue = getCurrentInstance();
    //獲取當前上下文
    const { ctx } = getCurrentInstance();
    //獲取路由信息
    console.log(ctx.$router);
    function changeRouter() {
        //路由跳轉
        ctx.$router.push("/about");
    }

生命週期

2.x生命週期選項和Composition API之間的映射

• beforeCreate ->使用 setup()

• created ->使用 setup()

• beforeMount -> onBeforeMount

• mounted -> onMounted

• beforeUpdate -> onBeforeUpdate

• updated -> onUpdated

• beforeDestroy -> onBeforeUnmount

• destroyed -> onUnmounted

• errorCaptured -> onErrorCaptured

Vuex簡單使用

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    num: 1,
  },
  mutations: {
    add(state, value) {
      console.log(value)
      state.num++
    },
    decrement(state, value) {
      console.log(value)
      state.num--
    }
  },
  actions: {
  },
  modules: {
  }
});

掛載到Vue中

import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

組件使用：

<template>
    <div class="home">
        <h1>VUEX使用</h1>
        <div>原始值：{{num}}</div>
        <div>
            <button @click="add">增加</button>
            <button @click="decrement">減少</button>
        </div>
    </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
    setup() {
        const store = useStore();
        const num = computed(() => store.state.num);

        function add() {
            store.commit("add", "增加");
            store.dispatch('action', payload)
        }

        function decrement() {
            store.commit("decrement", "減少 ");
        }

        return { num, add, decrement };
    }
};
</script>