要使用vue3.0新的api必须要导入
脚手架导入
//在需要使用的vue文件中按需导入，也可在main之中全局导入
import { defineComponent,reactive,ref,toRefs,toRef,isRef,watchEffect} from "vue";
普通HTML导入
//在head中导入模块
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-beta.14"></script>
<script src="https://unpkg.com/vue@next"></script>
//在写以下代码
<script type="module">
const { reactive,ref,toRefs,toRef,isRef,watchEffect} = VueCompositionAPI
</script>
1. setup
核心，从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用，也可以看成是一个vue实例对象，作为在组件内使用 Composition API 的入口点，它可以实现大部分2.x的功能
接收两个参数：props，接收一个props对象，并返回一个响应式代理对象。context，vue实例对象可以看成2.x中的this，但是差别很大。
props，由于set之中无法访问当前vue实例也就是this，因此父组件传递过来的参数需要在传递一次，props是为了语义明确setup的参数实际也可以写成其他的
export default defineComponent({
props:{
test:{
type:String
}
},
setup(props,context){
console.log(props.test)
},
});
context，为了代替this但是目前最新版的这个对象的属性只剩下3个了，原本8个，context上的属性与2.x之中的功能一样
image.png
setup是一个函数它有返回值，返回值是一个对象将被合并到data之中
2. reactive
接收一个对象参数返回一个响应式代理对象 ，功能类似2.x的 Vue.observable()
可以作为当前页面的data数据，也可以在为了性能考虑项目没必要使用代替vuex
作为当前页面的data数据
setup(props, ctx) {
const state = reactive({
testA: "testDataA"
});
return { //setup的返回值会被合并到data中，使用时像使用data就可以
testA:state.testA
}
}
作为代替vuex使用
//在store文件夹下新建一个store.js或者store.ts，如果是js需要去掉类型推断即any
import { reactive} from "vue";
var store:any = reactive({
state:{
screenCars:1,
setTop:0
},
commit:{
change:function(val:any){
store.state.screenCars=val
}
}
})
export default store
//使用方式
import store from '@/store/store'; //在需要的地方导入也可以在main全局注册
//可以在mounted生命周期中测试一下，使用方式取决于你的store文件中的写法
mounted(){
store.commit.change(5) //改变screenCars
console.log(store.state.screenCars) //获取改变screenCars
}
//这只是最基础写法，可以根据自己的需要进行优化
3. ref与toRefs与toRef
ref接收一个数值返回一个响应式可改变的对象，
为什么使用ref，首先基础类型是没有引用的，你直接改变是无法被监听到的，为了更好的响应式只能借助包装对象的形式来实现，2.x中的data返回的也是是一个对象哦。
var test=30
var count = ref(test)
//watchEffect类似于2.x的watch加了immediate属性，
watchEffect(()=>{
console.log(count.value)
})
count.value++
//执行以上代码结果打印30，31
watchEffect(()=>{
console.log(test)
})
test++
//执行以上代码打印结果只会打印30，test++的时候无法被监听到
ref作为响应式对象的属性自动结构无需在使用 .value 访问
var test=30
const count = ref(test)
const state=reactive({
countTest:count //此处无需写count.value
})
console.log(state.countTest)
toRefs把一个响应式对象转换成普通对象，只不过这个对象上的每个属性节点，都是ref()类型
setup(props, ctx) {
const state = reactive({
testA: "testDataA",
testB: ["testDataB"],
testC: { testC: "testDataC" },
});
return {
//当数据过多时不可能一一对应的写出来，那样太麻烦，因此可以解构
//...state,但是解构是拷贝而不是引用因此会失去响应式，即数据改变无法被监听
//toRefs很好的解决了这个问题
...toRefs(state),
};
}
toRef可以指定reactive对象的属性创建一个ref
setup(props, ctx) {
const state = reactive({
testA: "testDataA",
testB: ["testDataB"],
testC: { testC: "testDataC" },
});
return {
...toRef(state,'testA'), //只有testA是响应式的
};
}
