今天在看vue3.0有啥新特性，做了一些簡單的嘗試，在這里分享給大家，一起學習
首先說說組合式API產生背景，隨着vue開發項目的復雜度上升，我們的關注點也會隨着項目的復雜度上升而延長，有時候可能就一個邏輯，需要跳轉多個代碼塊兒，不管是對於開發過這個項目或者是接手但沒開發過該項目的人都不是很方便，於是就誕生了組合式API，它將與同一個邏輯關注點相關的代碼配置在一起，方便去梳理和縮短關注鏈，簡單代碼展示如下：
<template>
<div id="app">
{{message}}
<button @click="changeVal">改變值</button>
</div>
</template>
<script>
// vue3.0的Composition-API 風格寫法
import { reactive, toRefs } from '@vue/composition-api'
export default {
setup() {
const data = reactive({
message: '我是vue'
})
function changeVal() {
data.message = '我是vue3.0'
}
return {
...toRefs(data),
changeVal
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
組件的data，方法都可以定義到setup中，以及watch，computed和生命周期鈎子都可以在setup中定義，這里定義的data，在改變data值時候不再是this所指向的vm去訪問，而是通過"data."的方式去訪問，然后這里的toRefs是將數據進行響應式聲明，這樣在組件任何地方都可以使用data里的值