vue3.0新特性--组合式 API

今天在看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里的值