一篇文章看懂Vue組合式API

更新時(shí)間：2023年04月07日 10:11:02 作者：Hulake_

眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書(shū)寫(xiě)Vue組件,這篇文章主要給大家介紹了關(guān)于Vue組合式API的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一. 為什么要使用Composition API

1.1.一個(gè)Options API實(shí)例

在前面的課程中，我們都是采用 Options API（基于選項(xiàng)的 API ）來(lái)寫(xiě)一個(gè)組件的。下面是一個(gè)實(shí)例：

<template>
  Count is: {{ count }}, doubleCount is: {{ doubleCount }} 
  <button @click="add">加</button>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  methods: {
    add() {
      this.count++;
    }
  }
}
</script>

當(dāng)要去理解一個(gè)組件時(shí)，我們更加關(guān)心的是：“這個(gè)組件是要干什么（即代碼背后的意圖）”，而不是：“這個(gè)組件用到了什么選項(xiàng)”。

Options API 撰寫(xiě)出來(lái)的代碼自然采用了后者的表述方式，然而對(duì)前者的表述并不好。

1.2.Options API存在的問(wèn)題

在 Options API 中實(shí)際上形成了一種強(qiáng)制的約定：

props 里面設(shè)置接收參數(shù)
data 里面設(shè)置變量
computed 里面設(shè)置計(jì)算屬性
watch 里面設(shè)置監(jiān)聽(tīng)屬性
methods 里面設(shè)置事件方法

我們會(huì)發(fā)現(xiàn)： Options API 都約定了我們?cè)撛谀膫€(gè)位置做什么事，這在一定程度上也強(qiáng)制我們進(jìn)行了代碼分割。這就為展示背后的邏輯關(guān)注點(diǎn)設(shè)置了障礙。我們必須不斷地在選項(xiàng)代碼塊之間“跳轉(zhuǎn)”，以找到與該關(guān)注點(diǎn)相關(guān)的部分。

尤其是在大型組件中，數(shù)據(jù)與方法會(huì)很多，而數(shù)據(jù)與其相關(guān)聯(lián)的方法就會(huì)被其他數(shù)據(jù)和方法分隔的很遠(yuǎn)，往往很難被看出它們之間的關(guān)聯(lián)。

這是一個(gè)大型組件的示例，其中邏輯關(guān)注點(diǎn)是按顏色分組。

這種碎片化使得理解和維護(hù)復(fù)雜組件變得困難。選項(xiàng)的分離掩蓋了潛在的邏輯問(wèn)題。此外，在處理單個(gè)邏輯關(guān)注點(diǎn)時(shí)，我們必須不斷地“跳轉(zhuǎn)”相關(guān)代碼的選項(xiàng)塊。

如果我們能夠?qū)⑴c同一個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼配置在一起，這樣會(huì)更好。而這正是組合式 API 使我們能夠做到的。

1.3.Composition API簡(jiǎn)介

Composition API：組合式 API；一組低侵入式的、函數(shù)式的 API，使得我們能夠更靈活地【組合】組件的邏輯。

這是有別于 Options API 的一種函數(shù)式 API。無(wú)需通過(guò)很多選項(xiàng)來(lái)完成業(yè)務(wù)邏輯，Composition API提供了一個(gè)setup函數(shù)，我們可以將data數(shù)據(jù)、計(jì)算屬性、方法等等，都放在setup函數(shù)中，這樣就可以對(duì)業(yè)務(wù)進(jìn)行集中處理了。

采用Composition API來(lái)重寫(xiě)上面的組件：

<template>
  Count is: {{ state.count }}, doubleCount is: {{ state.doubleCount }}
  <button @click="add">加</button>
</template>
 
<script>
import { reactive, computed } from "vue";
 
export default {
  setup() {
    const state = reactive({
      count: 0,
      doubleCount: computed(() => state.count * 2),
    });
 
    function add() {
      state.count++;
    }
 
    return {
      state,
      add
    }
  }
}
</script>

還有一個(gè) setup 函數(shù)，setup 函數(shù)是一個(gè)新的組件選項(xiàng)。作為在組件內(nèi)使用 Composition API 的入口點(diǎn)，如果 setup 返回一個(gè)對(duì)象，則對(duì)象的屬性將會(huì)被合并到組件模板的渲染上下文，我們就可以在模板里使用對(duì)應(yīng)的屬性和方法。

二.Composition API

2.1.setup()入口

setup 函數(shù)是一個(gè)新的組件選項(xiàng)，它是在組件內(nèi)使用 Composition API 的入口點(diǎn)。它會(huì)在Vue實(shí)例創(chuàng)建完成前被調(diào)用。所以，setup函數(shù)中沒(méi)有this指針

<template>
  <div></div>
</template>
 
<script>
export default {
  setup() {
	//這里書(shū)寫(xiě)本地狀態(tài)（data數(shù)據(jù)）、計(jì)算屬性或方法等
    console.log('setup函數(shù)');
  }
}
</script>

如果 setup 返回一個(gè)對(duì)象，則對(duì)象的屬性將會(huì)被合并到組件模板的渲染上下文，我們就可以在模板里使用對(duì)應(yīng)的屬性和方法。所以，我們可以將本地狀態(tài)（data數(shù)據(jù)）、方法、計(jì)算屬性等寫(xiě)在 setup 函數(shù)中。

<template>
  Count is: {{ count }}
</template>
 
<script>
export default {
  setup() {
    let count = 10;
    
    return {
      count
    }
  }
}
</script>

上面代碼中，在 setup 函數(shù)中聲明了一個(gè) count 數(shù)據(jù)。然后使用 return 返回需要暴露的內(nèi)容。運(yùn)行之后可以看到：視圖能夠正確顯示count數(shù)據(jù)。

setup函數(shù)總結(jié)：

setup函數(shù)是Composition API 的入口點(diǎn)，是它的核心。
由于執(zhí)行 setup 時(shí)，組件實(shí)例尚未被創(chuàng)建，因此在 setup 中不能使用 this。
setup中定義的東西必須要return出去，才能被使用或綁定視圖。

2.2.ref 響應(yīng)式監(jiān)聽(tīng)

上面實(shí)例中，雖然視圖能夠顯示數(shù)據(jù)。但當(dāng)改變數(shù)據(jù)時(shí)，視圖卻不會(huì)得到響應(yīng)。

<template>
  Count is: {{ count }}
  <button @click="add">加</button>
</template>
 
<script>
export default {
  setup() {
    let count = 10;
 
    function add(){
      count++;       //setup函數(shù)中沒(méi)有this指針
    }
    
    return {
      count,
      add
    }
  }
}
</script>

原因很簡(jiǎn)單，count只是聲明的一個(gè)普通數(shù)據(jù)，不具備響應(yīng)功能。

在 Vue 3.0 中，我們可以通過(guò)一個(gè) ref 函數(shù)來(lái)實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)監(jiān)聽(tīng)。ref 接受一個(gè)參數(shù)，并將其包裹在一個(gè)帶有 value 屬性的對(duì)象中返回，然后可以使用該 value 屬性訪問(wèn)或更改響應(yīng)式變量的值：

<template>
  Count is: {{ count }}
  <button @click="add">加</button>
</template>
 
<script>
//注意：要導(dǎo)入ref
import {ref} from 'vue';
 
export default {
  setup() {
    let count = ref(10);  //count成為響應(yīng)式數(shù)據(jù)。
 
    function add(){
      count.value++;       //使用value屬性獲取響應(yīng)數(shù)據(jù)
    }
    
    return {
      count,
      add
    }
  }
}
</script>

為什么要將值封裝在一個(gè)對(duì)象中，看似沒(méi)有必要，但為了保持 JavaScript 中不同數(shù)據(jù)類型的行為統(tǒng)一，這是必須的。因?yàn)樵?JavaScript 中，Number 或 String 等基本類型是通過(guò)值傳遞的，而不是通過(guò)引用傳遞的：

2.3.reactive與toRefs

上面實(shí)例中，操作數(shù)據(jù)時(shí)需要使用 value 屬性，比較麻煩。

可以使用 reactive 與 toRefs 解決這個(gè)問(wèn)題。首先使用 reactive 創(chuàng)建響應(yīng)式對(duì)象，封裝數(shù)據(jù)。

<template>
  <p>Count is: {{ state.count }}</p>
  <button @click="add">加</button>
  <p>{{ state.user.username }}</p>
</template>
 
<script>
//注意：要導(dǎo)入ref
import {reactive} from 'vue';
 
export default {
  setup() {
    //所有響應(yīng)數(shù)據(jù)都聲明在這里，包括對(duì)象、數(shù)組
    const state = reactive({
      count: 10,
      user:{
        userId: 1,
        username: '張三'
      }
    })
 
    function add(){
      state.count++;       //這里可以不使用value了
    }
    
    return {
      state,
      add
    }
  }
}
</script>

此時(shí)不用使用 value 屬性了。

但是因?yàn)橹挥衧tate是響應(yīng)式數(shù)據(jù)，而state中的那些數(shù)據(jù)還不是響應(yīng)式的。所以在視圖訪問(wèn)數(shù)據(jù)時(shí)都需要使用 state 作為前綴才可以。這就比較麻煩了。

此時(shí)我們可以使用 toRefs 進(jìn)行優(yōu)化。toRefs可以將state中的每一個(gè)數(shù)據(jù)進(jìn)行展開(kāi)，且都包裝成響應(yīng)數(shù)據(jù)。這樣視圖層就可以直接使用了。

<template>
  <p>Count is: {{ count }}</p>
  <button @click="add">加</button>
  <p>{{ user.username }}</p>
</template>
 
<script>
//注意：要導(dǎo)入ref
import {reactive, toRefs} from 'vue';
 
export default {
  setup() {
    //所有響應(yīng)數(shù)據(jù)都聲明在這里，包括對(duì)象、數(shù)組
    const state = reactive({
      count: 10,
      user:{
        userId: 1,
        username: '張三'
      }
    })
 
    function add(){
      state.count++;       //這里可以不使用value了
    }
    
    return {
      ...toRefs(state),    //這里使用使用 ...toRefs(state)
      add
    }
  }
}
</script>

在返回時(shí)使用 ...toRefs(state) ，這樣視圖層就可以不使用 state 前綴了。
為什么要使用 ... 參數(shù)擴(kuò)展運(yùn)輸符呢？因?yàn)閠oRefs(state) 將state對(duì)象展開(kāi)，并包裝成多個(gè)響應(yīng)數(shù)據(jù)。

2.4.computed的用法

<template>
  <p>Count is: {{ count }}</p>
  <p>doubleCount is: {{ doubleCount }}</p>
  <button @click="add">加</button>
  <p>{{ user.username }}</p>
</template>
 
<script>
//注意：要導(dǎo)入ref
import { reactive, toRefs, computed } from "vue";
 
export default {
  setup() {
    //所有響應(yīng)數(shù)據(jù)都聲明在這里，包括對(duì)象、數(shù)組
    const state = reactive({
      count: 10,
      user: {
        userId: 1,
        username: "張三",
      },
      doubleCount: computed(() => {    //使用computed函數(shù)
        return state.count * 2;
      }),
    });
 
    function add() {
      state.count++; //這里可以不使用value了
    }
 
    return {
      ...toRefs(state),
      add,
    };
  },
};
</script>

首先要import導(dǎo)入computed。
在reactive({})中聲明computed即可。

到現(xiàn)在為止，響應(yīng)式數(shù)據(jù)就都可以處理了。

2.5.watch的用法

<template>
  <div>
    {{ num }}
    <button @click="add">加</button>
  </div>
</template>
 
<script>
import { reactive, toRefs, watch } from "vue";
 
export default {
  setup() {
    const state = reactive({
      num: 0,
    });
 
    watch(state,(newValue, oldValue) => {
        console.log(newValue, oldValue);
      }
    );
 
    function add() {
      state.num++;
    }
 
    return {
      ...toRefs(state),
      add,
    };
  },
};
</script>

使用watch函數(shù)來(lái)進(jìn)行數(shù)據(jù)監(jiān)聽(tīng)。watch函數(shù)有兩個(gè)參數(shù)。
第一個(gè)參數(shù)：要監(jiān)聽(tīng)的數(shù)據(jù)。
第二個(gè)參數(shù)：觸發(fā)監(jiān)聽(tīng)時(shí)的處理函數(shù)（包括newValue, oldValue）

上面實(shí)例中直接監(jiān)聽(tīng)state響應(yīng)對(duì)象。但我們知道，在state中會(huì)有很多數(shù)據(jù)，如果只想監(jiān)聽(tīng)其中的某個(gè)數(shù)據(jù)，就需要換一種寫(xiě)法：

watch(() => state.num,(newValue, oldValue) => {
    console.log(newValue, oldValue);
});

第一個(gè)參數(shù)要寫(xiě)成函數(shù)返回值的形式，這樣就能監(jiān)聽(tīng)state響應(yīng)對(duì)象中的某個(gè)數(shù)據(jù)了。

2.6.setup()參數(shù)

setup() 函數(shù)有兩個(gè)參數(shù)：props 和 context。

為什么要有這兩個(gè)參數(shù)呢？我們知道父子組件之間是可以傳值。但是現(xiàn)在我們的業(yè)務(wù)邏輯都寫(xiě)在setup函數(shù)中，而setpu中沒(méi)有this指針，那么就只能靠這兩個(gè)參數(shù)來(lái)進(jìn)行傳遞了。

props：父組件向子組件傳值的參數(shù)。
context：子組件向父組件傳值的參數(shù)。

2.6.1.props參數(shù)

setup() 函數(shù)的 props 是父組件向子組件傳值的參數(shù)。

在components文件夾中創(chuàng)建子組件（Hello.vue）：

<template>
  <div>我是子組件</div>
</template>
 
<script>
export default {
  setup(props, context) {
    console.log(props.msg)
  },
  props: {
    msg: String,
  },
};
</script>
 
<style>
</style>

父組件（HomeView.vue）：

<template>
  <div>
    <Hello msg="hello"></Hello>
  </div>
</template>
 
<script>
import Hello from '../components/Hello.vue'
import { reactive, toRefs, computed } from "vue";
 
export default {
  setup() {
    const state = reactive({
 
    });
    return {
      ...toRefs(state),
    };
  },
  components:{
    Hello
  }
};
</script>

注意，要先import導(dǎo)入子組件，然后使用components掛載子組件。

2.6.2.context參數(shù)

setup() 函數(shù)的 context 是子組件向父組件傳值的參數(shù)。

子組件（Hello.vue）：

<template>
  <div>
    <div>我是子組件</div>
    <button @click="send">給父組件發(fā)數(shù)據(jù)</button>
  </div>
</template>
 
<script>
export default {
  setup(props, context) {
    function send() {
      context.emit("childmsg", "hello world!");
    }
 
    return {
      send,
    };
  },
  props: {
    msg: String,
  },
};
</script>
 
<style>
</style>

父組件（HomeView.vue）：

<template>
  <div>
    <Hello msg="hello" @childmsg="get"></Hello>
    <p>我是父組件，接受子組件傳的值：{{welcome}}</p>
  </div>
</template>
 
<script>
import Hello from '../components/Hello.vue'
import { reactive, toRefs, computed } from "vue";
 
export default {
  setup() {
    //所有響應(yīng)數(shù)據(jù)都聲明在這里，包括對(duì)象、數(shù)組
    const state = reactive({
      welcome: ''
    });
 
    function get(param) {
      state.welcome = param;
    }
 
    return {
      ...toRefs(state),
      get
    };
  },
  components:{
    Hello
  }
};
</script>

三.Composition API的使用

下面我們會(huì)將前面學(xué)過(guò)的知識(shí)點(diǎn)都改寫(xiě)為Composition API的形式。而且，Vue3兼容Options API和Composition API兩種寫(xiě)法。所以這兩種寫(xiě)法都要會(huì)。

3.1.provide與inject的使用

我們學(xué)過(guò)provide與inject可用于多級(jí)組件直接傳遞數(shù)據(jù)，下面學(xué)習(xí)provide與inject在Composition API中的使用。

創(chuàng)建孫子組件（SubHello.vue）

<template>
  <div>
    <div>我是孫組件</div>
  </div>
</template>
 
<script>
import { inject } from "vue";
 
export default {
  setup(props, context) {
 
    console.log(inject('msg'))
      
    return {};
  }
};
</script>

在孫子組件中import導(dǎo)入inject，并使用inject接收上級(jí)組件的傳值。

在子組件（Hello.vue）中使用孫子組件

<template>
  <div>
    <div>我是子組件</div>
    <SubHello></SubHello>
  </div>
</template>
 
<script>
import SubHello from './SubHello.vue'
 
export default {
  setup(props, context) {
 
    return {};
  },
  components:{
      SubHello
  }
};
</script>
 
<style>
</style>

在父組件中使用provide給多級(jí)組件傳值

<template>
  <div>
    <Hello></Hello>
  </div>
</template>
 
<script>
import Hello from "../components/Hello.vue";
import { provide } from "vue";
 
export default {
  setup() {
    provide('msg','hello');
  },
  components:{
    Hello
  }
};
</script>

注意，由于父組件向?qū)O子組件傳遞數(shù)據(jù)是單向的，所以孫子組件不能修改傳遞的值。如果子組件

3.2.vue生命周期的用法

在 setup () 內(nèi)部調(diào)用生命周期鉤子：

選項(xiàng)式API	setup () 內(nèi)部調(diào)用生命周期鉤子
beforeCreate()	setup()
created()	setup()
beforeMount()	onBeforeMount()
mounted()	onMounted()
beforeUpdate()	onBeforeUpdate()
updated()	onUpdated()
beforeUnmount()	onBeforeUnmount()
unmounted()	onUnmounted()

注意：在Composition API中沒(méi)有beforeCreate()和created()這里兩個(gè)聲明周期函數(shù)了，統(tǒng)一使用setup()。

實(shí)例：

<template>
  <div>
    {{ num }}
    <button @click="add">加</button>
  </div>
</template>
 
<script>
import { reactive,toRefs,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";
 
export default {
  setup() {
    const state = reactive({
      num: 1,
    });
 
    function add() {
      state.num++;
    }
 
    onBeforeMount(() => {
      console.log("DOM掛載前!");
    });
 
    onMounted(() => {
      console.log("DOM掛載后!");
    });
 
    onBeforeUpdate(() => {
      console.log("數(shù)據(jù)更新前!");
    })
 
    onUpdated(() => {
      console.log("數(shù)據(jù)更新后!");
    })
 
    onBeforeUnmount(() => {
      console.log("實(shí)例卸載前!");
    })
 
    onUnmounted(() => {
      console.log("實(shí)例卸載后!");
    })
 
    return {
      ...toRefs(state),
      add,
    };
  },
};
</script>

3.3.編程式路由的使用

下面學(xué)習(xí)如何在Composition API中使用路由。

打開(kāi)App.vue組件，這里已經(jīng)有了路由。當(dāng)然，是使用router-link標(biāo)簽來(lái)實(shí)現(xiàn)的。現(xiàn)在我們將它改成編程式路由。

<template>
  <nav>
    <!--
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    -->
    <button @click="toHome">Home</button>
    <button @click="toAbout">About</button>
  </nav>
  <router-view />
</template>
 
<script>
import { useRouter } from "vue-router";
 
export default{
  setup() {
    const router = useRouter();
 
    function toHome(){
      router.push('/');
    }
  
    function toAbout(){
      router.push({path:'/about',query:{name:'zhangsan'}});
    }
 
    return {
      toHome,
      toAbout
    }
  },
}
</script>

先import導(dǎo)入useRouter模塊。
通過(guò)useRouter模塊獲取router對(duì)象。以后的路由寫(xiě)法就與前面所學(xué)一樣了。

下面是獲取路由參數(shù)，打開(kāi)AboutView.vue文件

<template>
  <div>   
  </div>
</template>
 
<script>
import { useRoute } from "vue-router";
 
export default {
  setup(){
    const route = useRoute();
 
    console.log(route.query.name);
  }
}
</script>

通過(guò)同樣的方式獲取route對(duì)象后就可以獲取路由參數(shù)了。

3.4.Vuex的使用

下面學(xué)習(xí)如何在Composition API中使用Vuex。

<template>
  <div>
  </div>
</template>
 
<script>
import { useStore } from "vuex";
 
export default {
  setup() {
    const store = useStore();
    console.log(store.state.num);
    console.log(store.getters.newnum);
  }
};
</script>

先import導(dǎo)入useStore模塊。
通過(guò)useStore模塊獲取store對(duì)象。就可以通過(guò)store對(duì)象獲取Vuex中的所有數(shù)據(jù)了。

3.5.獲取DOM的使用

前面我們知道在Vue中，可以使用ref來(lái)獲取DOM對(duì)象。下面學(xué)習(xí)如何在Composition API中使用ref。

<template>
  <div ref="myRef">獲取單個(gè)DOM元素</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const myRef = ref(null);   //ref(null)是一個(gè)固定的寫(xiě)法
 
    onMounted(() => {
      console.dir(myRef.value);
    });
    return {
      myRef
    };
  }
};
</script>

在HTML標(biāo)簽中使用 ref 屬性標(biāo)識(shí)一個(gè)DOM對(duì)象。
需要 import 導(dǎo)入 ref 對(duì)象。
使用 const myRef = ref(null); 的方式獲取包裝好的DOM對(duì)象，命名為HTML中的 ref 屬性名。并且此數(shù)據(jù)需要暴露出去。
使用 value 屬性即可獲取 DOM對(duì)象。

四.使用Composition API重寫(xiě)todoList

AddNew組件

<template>
  <div>
    <input type="text" v-model="newItem" />
    <button @click="handleAdd">添加</button>
  </div>
</template>
 
<script>
import {reactive, toRefs} from 'vue';
 
export default {
  setup(props, context){
    const state = reactive({
      newItem: ""
    })
 
    function handleAdd() {
      if (state.newItem == "") {
        alert("不能為空");
        return;
      }
      //注意：這里使用setup參數(shù)context來(lái)出發(fā)父組件事件
      context.emit("submitNewItem", state.newItem);
      state.newItem = "";
    }
 
    return {
      ...toRefs(state),
      handleAdd
    }
  }
}
</script>

TheList組件

<template>
  <ol>
    <li v-for="(item, index) in list" :key="index" @click="judgeItem(index)">
      {{ item }}
    </li>
  </ol>
</template>
 
<script>
export default {
  setup(props, context) {
    //這里分別使用了setup的兩個(gè)參數(shù)  
    function judgeItem(index) {
      if (props.listType) {
        context.emit("handleDelete", index);
      } else {
        context.emit("handleJudge", index);
      }
    }
 
    return {
      judgeItem
    };
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
    listType: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

TodoList組件

<template>
  <div>
    <h1>todoList</h1>
    <AddNew @submitNewItem="addNewItem"></AddNew>
    <TheList :list="todoList" @handleJudge="toDone"></TheList>
    <hr />
    <TheList :list="doneList" :listType="true" @handleDelete="toDelete"></TheList>
  </div>
</template>
 
<script>
import AddNew from "../components/AddNew.vue";
import TheList from "../components/TheList.vue";
import {reactive, toRefs} from 'vue';
 
export default {
  setup(){
    const state = reactive({
      todoList: [],  //待辦事項(xiàng)
      doneList: []   //完成事項(xiàng)
    })
 
    function addNewItem(newItem){
      state.todoList.push(newItem);
    }
    function toDone(index){
      state.doneList.push(state.todoList.splice(index,1)[0]);
    }
    function toDelete(index){
      state.doneList.splice(index,1);
    }
 
    return {
      ...toRefs(state),
      addNewItem,
      toDone,
      toDelete
    }
  },
  components: {
    AddNew,
    TheList,
  },
};
</script>

五.setup語(yǔ)法糖

在Composition API中，在setup函數(shù)中聲明的數(shù)據(jù)、函數(shù)等內(nèi)容，都需要通過(guò) return 對(duì)外暴露，才能被組件的視圖模板（template）使用，這就造成了書(shū)寫(xiě)上的不方便。于是，Vue官方又給我們推出了一個(gè)新的setup語(yǔ)法糖。

使用setup語(yǔ)法糖，就可以不用寫(xiě)setup函數(shù)了。并且，數(shù)據(jù)和函數(shù)也不用返回，組件也不需要注冊(cè)了。

5.1.setup語(yǔ)法糖的基本結(jié)構(gòu)

<template>
</template>
 
<script setup>
//此處直接寫(xiě)setup函數(shù)中的內(nèi)容
</script>
 
<style>
</style>

在script標(biāo)簽中使用setup屬性即可。
運(yùn)行時(shí)，script標(biāo)簽中的內(nèi)容會(huì)被重新編譯成 setup() 函數(shù)的形式。
而且，聲明的數(shù)據(jù)、函數(shù)不需要通過(guò) return 暴露，即可被 template所使用

5.2.響應(yīng)數(shù)據(jù)的使用

<template>
  <div>
    <p>{{ num }}</p>
    <button @click="add">加</button>
  </div>
</template>
 
<script setup>
let num = 10;
//const num = 10;
 
//由于num不是響應(yīng)數(shù)據(jù)，所以改變num是無(wú)效的。
const add = ()=>{
  alert("觸發(fā)了此方法");
  num++;
}
</script>

直接聲明的數(shù)據(jù)不是響應(yīng)式的，數(shù)據(jù)改變時(shí)不會(huì)響應(yīng)到視圖模板中。

<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ dept.deptno }}，{{ dept.dname }}，{{ dept.loc }}</p>
    <ul>
      <li v-for="user in userArr" :key="user.userId">
        {{user.userId}}，{{user.userName}}，{{user.userAge}}
      </li>
    </ul>
    <button @click="add">加</button>
  </div>
</template>
 
<script setup>
import { reactive, ref } from "vue";
 
const num = ref(10);
 
const dept = reactive({
  deptno: 20,
  dname: "技術(shù)部",
  loc: '沈陽(yáng)市',
});
 
const userArr = ref([
  {
    userId: 100,
    userName: "張三",
    userAge: 25,
  },
  {
    userId: 101,
    userName: "李四",
    userAge: 26,
  },
  {
    userId: 102,
    userName: "王五",
    userAge: 27,
  },
]);
 
const add = () => {
  num.value++;      //注意：要使用value屬性獲取
  dept.deptno++;
  //userArr.value[0].userAge++;
  userArr.value = [];
}
</script>

ref 和 reactive 都可以做響應(yīng)式數(shù)據(jù)，它們的區(qū)別如下：

reactive：用于定義引用類型。只能修改數(shù)據(jù)，不能改變其引用。
ref：用于定義基本類型和引用類型?？梢孕薷臄?shù)據(jù)，也可以改變其引用。
- 在方法中修改數(shù)據(jù)時(shí)需要使用 value屬性。因?yàn)椋琑ef的本質(zhì)是通過(guò)Reactive創(chuàng)建的，Ref(10) 就相當(dāng)于：Reactive({value:10});
- 在視圖模板調(diào)用可以省略value屬性的書(shū)寫(xiě)。

5.3.其它語(yǔ)法的使用

下面例子演示了computed計(jì)算屬性、watch監(jiān)聽(tīng)、生命周期函數(shù)的使用。

<template>
  <div>
    {{ num }}
    {{ newNum }}
    <button @click="add">add</button>
  </div>
</template>
 
<script setup>
import { ref, computed, watch, onMounted } from 'vue';
 
const num = ref(10);
 
const newNum = computed(() => {
  return num.value*2;
})
 
const add = ()=>{
  num.value++;
}
 
watch(num,(newValue,oldValue)=>{
  console.log(newValue,oldValue);
})
 
//生命周期函數(shù)
onMounted(() => {
  console.log("DOM掛載后!");
});
</script>

5.4.引入組件的使用

引入的組件不必注冊(cè)，可以直接使用。

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script setup>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>

5.5.父子組件傳值的使用

5.5.1.defineProps的使用

defineProps用于父組件向子組件傳值。

父組件

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" :num="num"/>
  </div>
</template>
 
<script setup>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
 
const num = 20
</script>

子組件

<template>
  <div class="hello">
    <h1>{{ msg }}，{{ num }}</h1>
  </div>  
</template>
 
<script setup>
//const myProps = defineProps(['msg','num']);
 
const myProps = defineProps({
  msg:{
    type: String
  },
  num:{
    type: Number,
    required: true
  }
});
</script>
 
<style scoped>
</style>

defineProps也可以有數(shù)組形式和對(duì)象形式兩種寫(xiě)法。

5.5.2.defineEmits的使用

defineEmits用于子組件向父組件傳值。

父組件

<template>
  <div class="home">
    <HelloWorld 
           msg="Welcome to Your Vue.js App" 
           :num="num"
           @childmsg="get"/>
  </div>
</template>
 
<script setup>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
 
const num = 20;
 
const get = (value) => {
  console.log(value)
}
</script>

子組件

<template>
  <div class="hello">
    <h1>{{ msg }}，{{ num }}</h1>
    <button @click="send">給父組件傳值</button>
  </div>  
</template>
 
<script setup>
const myProps = defineProps(['msg','num']);
 
const emit = defineEmits(['childmsg']);
 
const send = () => {
  emit('childmsg','子組件向父組件傳的值');
}
</script>
 
<style scoped>
</style>

六.使用setup語(yǔ)法糖重寫(xiě)todoList

AddNew組件

<template>
  <div>
    <input type="text" v-model="newItem" />
    <button @click="handleAdd">添加</button>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
 
const newItem = ref("");
 
const emit = defineEmits(["submitNewItem"]);
 
const handleAdd = () => {
  if (newItem.value == "") {
    alert("不能為空");
    return;
  }
  emit("submitNewItem", newItem.value);
  newItem.value = "";
};
</script>

TheList組件

<template>
  <ol>
    <li v-for="(item, index) in list" :key="index" @click="judgeItem(index)">
      {{ item }}
    </li>
  </ol>
</template>
 
<script setup>
const emit = defineEmits(['handleDelete','handleJudge']);
 
const judgeItem = (index) => {
  if (myProps.listType) {
    emit("handleDelete", index);
  } else {
    emit("handleJudge", index);
  }
};
 
const myProps = defineProps({
  list: {
    type: Array,
    required: true,
  },
  listType: {
    type: Boolean,
    default: false,
  },
});
</script>

TodoList組件

<template>
  <div>
    <h1>todoList</h1>
    <AddNew @submitNewItem="addNewItem"></AddNew>
    <TheList :list="todoList" @handleJudge="toDone"></TheList>
    <hr />
    <TheList
      :list="doneList"
      :listType="true"
      @handleDelete="toDelete"
    ></TheList>
  </div>
</template>
 
<script setup>
import AddNew from "../components/AddNew.vue";
import TheList from "../components/TheList.vue";
import { reactive } from "vue";
 
const todoList = reactive([]); //待辦事項(xiàng)
const doneList = reactive([]); //完成事項(xiàng)
 
const addNewItem = (newItem) => {
  todoList.push(newItem);
}
const toDone = (index) => {
  doneList.push(todoList.splice(index, 1)[0]);
}
const toDelete = (index) => {
  doneList.splice(index, 1);
}
</script>