1. 初始化项目
npm i -g @vue/cli
npm install @vue/composition-api -S
npm install @vue/composition-api -S
2.main.js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompsitionApi)
vue3.x的新方法
1.setup(props参数，ctx上下文对象) 方法
setup()在beforeCreate 之后 create之前执行 ，注意在setup()中无法访问到this
setup(props, ctx) {
console.log('setup')
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
2.reactive 函数接收一个普通函数，返回一个响应式的数据对象
<template>
<div>
<p>当前的 count 值为：{{count}}</p>
<button @click="count += 1">+1</button>
</div>
</template>
<script>
import {reactive} from '@vue/composition-api'
export default {
setup(props, ctx) {
// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })
state.count += 1
console.log(state)
// setup 函数中将响应式数据对象 return 出去，供 template 使用
return state
}
}
</script>
3.ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
<template>
<div>
<h3>02.ref.vue 文件</h3>
<p>refCount：{{refCount}}</p>
<button @click="refCount += 1">+1</button>
</div>
</template>
<script>
import { ref } from '@vue/composition-api'
export default {
setup() {
// / 创建响应式数据对象 count，初始值为 0
const refCount = ref(0)
// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以，只有在setup内部才需要 .value 属性
console.log(refCount.value) // 输出 0
// 让 refCount 的值 +1
refCount.value++
// 再次打印 refCount 的值
console.log(refCount.value) // 输出 1
return {
refCount
}
}
}
</script>
