隨著 TienChin 項目視頻的錄制，松哥終于也要靜下心來，認真捋一捋 Vue3 中的各種新特性了，然后再和小伙伴們進行分享，其實 Vue3 中還是帶來了很多新鮮的玩意，今天我們就不卷 JAVA 了，來卷卷前端。

以下內容是一個 Java 猿對 Vue3 的理解，主要是應用層面上，如果有專業的前端小伙伴，請輕拍。

1. script 寫法

進入到 Vue3 時代，最明顯的感受就是在一個 .vue 文件中，script 標簽的寫法大變樣了。以前在 Vue2 中，我們都是這樣寫的：

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                //
            }
        },
        mounted() {
            //
        },
        methods: {
            deleteHr(hr) {
                //
            },
            doSearch() {
                //
            }
        }
    }
</script>

不過到了 Vue3 里邊，這個寫法變了，變成下面這樣了：

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script>

    import {ref} from 'vue';
    import {onMounted,computed} from 'vue'

    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            return {a,btnClick,result}
        }
    }
</script>

先從大的方面來看，細節實現咱們后面再細聊。

大的方面，就是在這個 export default 中，以后就只有兩個元素了，name 和 setup，我們以前的各種方法定義、生命周期函數、計算屬性等等，都寫在 setup 中，并且需要在 setup 中返回，setup 中返回了什么，上面的 template 中就能用什么。

這種寫法稍微有點費事，所以還有一種簡化的寫法，像下面這樣：

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>

<script setup>

    import {ref} from 'vue';
    import {onMounted, computed} from 'vue'

    const a = ref(1);
    const btnClick = () => {
        a.value++;
    }
    onMounted(() => {
        a.value++;
    });
    const result = computed(() => {
        return Date.now();
    });
</script>

這種寫法就是直接在 script 標簽中加入 setup，然后在 script 標簽中該怎么定義就怎么定義，也不用 return 了。這個場景，又有點 jQuery 的感覺了。

上面這個實現里有幾個細節，我們再來詳細說說。

2. 生命周期

首先就是生命周期函數的寫法。

以前 Vue2 里的寫法有一個專業名詞叫做 options API，現在在 Vue3 里也有一個專業名詞叫做 composition API。在 Vue3 中，這些對應的生命周期函數都要先從 vue 中導出，然后調用并傳入一個回調函數，像我們上一小節那樣寫。

下圖這張表格展示了 options API 和 composition API 的一一對應關系：

options API composition API beforeCreate Not Needed created Not Needed mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmounted errorCaptured onErrorCaptured renderTracked onRenderTracked renderTriggered onRenderTriggered activated onActivated deactivated onDeactivated

想用哪個生命周期函數，就從 vue 中導出這個函數，然后傳入回一個回調就可以使用了。例如第一小節中松哥給大家舉的 onMounted 的用法。

3. 計算屬性

除了生命周期函數，計算屬性、watch 監聽等等，用法也和生命周期函數類似，需要先從 vue 中導出，導出之后，也是傳入一個回調函數就可以使用了。上文有例子，我就不再啰嗦了。

像 watch 的監控，寫法如下：

<script>

    import {ref} from 'vue';
    import {onMounted,computed,watch} from 'vue'

    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            watch(a,(value,oldValue)=>{
                console.log("value", value);
                console.log("oldValue", oldValue);
            })
            return {a,btnClick,result}
        }
    }
</script>

導入 watch 之后，然后直接使用即可。

4. ref 于 reactive

上面的例子中還有一個 ref，這個玩意也需要跟大家介紹下。

在 Vue2 里邊，如果我們想要定義響應式數據，一般都是寫在 data 函數中的，類似下面這樣：

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                keywords: '',
                hrs: [],
                selectedRoles: [],
                allroles: []
            }
        }
    }
</script>

但是在 Vue3 里邊，你已經看不到 data 函數了，那怎么定義響應式數據呢？就是通過 ref 或者 reactive 來定義了。

在第一小節中，我們就是通過 ref 定義了一個名為 a 的響應式變量。

這個 a 在 script 中寫的時候，有一個 value 屬性，不過在 html 中引用的時候，是沒有 value 的，可千萬別寫成了 {{a.value}}，我們再來回顧下上文的案例：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>

<script>

    import {ref} from 'vue';

    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            return {a,btnClick}
        }
    }
</script>

現在就是通過這樣的方式來定義響應式對象，修改值的時候，需要用 a.value，但是真正的上面的 template 節點中訪問的時候是不需要 value 的（注意，函數也得返回后才能在頁面中使用）。

和 Vue2 相比，這種寫法有一個很大的好處就是在方法中引用的時候不用再寫 this 了。

ref 一般用來定義原始數據類型，像 String、Number、BigInt、Boolean、Symbol、Null、Undefined 這些。

如果你想定義對象，那么可以使用 reactive 來定義，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{book.name}}</div>
        <div>{{book.author}}</div>
    </div>
</template>

<script>

    import {ref, reactive} from 'vue';

    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三國演義",
                author: "羅貫中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,book}
        }
    }
</script>

這里定義了 book 對象，book 對象中包含了 name 和 author 兩個屬性。

有的時候，你可能批量把數據定義好了，但是在訪問的時候卻希望直接訪問，那么我們可以使用數據展開，像下面這樣：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
    </div>
</template>

<script>

    import {ref, reactive} from 'vue';

    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三國演義",
                author: "羅貫中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,...book}
        }
    }
</script>

這樣，在上面訪問的時候，就可以直接訪問 name 和 author 兩個屬性了，就不用添加 book 前綴了。

不過！！！

這種寫法其實有一個小坑。

比如我再添加一個按鈕，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新圖書信息</button>
    </div>
</template>

<script>

    import {ref, reactive} from 'vue';

    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三國演義",
                author: "羅貫中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook=()=>{
                book.name = '123';
            }
            return {a, btnClick,...book,updateBook}
        }
    }
</script>

這個時候點擊更新按鈕，你會發現沒反應！因為用了數據展開之后，響應式就失效了。所以，對于這種展開的數據，應該再用 toRefs 來處理下，如下：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新圖書信息</button>
    </div>
</template>

<script>

    import {ref, reactive, toRefs} from 'vue';

    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三國演義",
                author: "羅貫中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook = () => {
                book.name = '123';
            }
            return {a, btnClick, ...toRefs(book),updateBook}
        }
    }
</script>

當然，如果你將 setup 直接寫在了 script 標簽中，那么可以直接按照如下方式來展開數據：

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新圖書信息</button>
    </div>
</template>

<script setup>

    import {ref, reactive, toRefs} from 'vue';

    const a = ref(1);
    const book = reactive({
        name: "三國演義",
        author: "羅貫中"
    });
    const btnClick = () => {
        a.value++;
    }
    const updateBook = () => {
        book.name = '123';
    }
    const {name, author} = toRefs(book);
</script>