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

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

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>

先從大的方面來看，細節(jié)實現(xiàn)咱們后面再細聊。

大的方面，就是在這個 export default 中，以后就只有兩個元素了，name 和 setup，我們以前的各種方法定義、生命周期函數(shù)、計算屬性等等，都寫在 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 的感覺了。

上面這個實現(xiàn)里有幾個細節(jié)，我們再來詳細說說。

2. 生命周期

首先就是生命周期函數(shù)的寫法。

以前 Vue2 里的寫法有一個專業(yè)名詞叫做 options API，現(xiàn)在在 Vue3 里也有一個專業(yè)名詞叫做 composition API。在 Vue3 中，這些對應(yīng)的生命周期函數(shù)都要先從 vue 中導(dǎo)出，然后調(diào)用并傳入一個回調(diào)函數(shù)，像我們上一小節(jié)那樣寫。

下圖這張表格展示了 options API 和 composition API 的一一對應(yīng)關(guān)系：

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

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

3. 計算屬性

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

像 watch 的監(jiān)控，寫法如下：

<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>

導(dǎo)入 watch 之后，然后直接使用即可。

4. ref 于 reactive

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

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

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

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

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

這個 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>

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

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

ref 一般用來定義原始數(shù)據(jù)類型，像 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 兩個屬性。

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

<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>

這個時候點擊更新按鈕，你會發(fā)現(xiàn)沒反應(yīng)！因為用了數(shù)據(jù)展開之后，響應(yīng)式就失效了。所以，對于這種展開的數(shù)據(jù)，應(yīng)該再用 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 標簽中，那么可以直接按照如下方式來展開數(shù)據(jù)：

<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>

5. 小結(jié)

好啦，今天就和小伙伴們分享了 Vue3 中幾個新鮮的玩法～作為我們 TienChin 項目的基礎(chǔ)（Vue 基本用法在 vhr 中都已經(jīng)講過了，所以這里就不再贅述了），當然，Vue3 和 Vue2 還有其他一些差異，這些我們都將在 TienChin 項目視頻中和小伙伴們再仔細分享。