在上一篇文章中，小编和大家学习了Vue的基本语法和概念，包括组件、数据混合和槽。从今天开始，小编就和大家一起来学习一下Vue3中的新特性，也就是网上炒得铺天盖地的Composition-API，看看它有什么神奇之处。我们之前通过Vue写的代码基本上就是这样的Vue。createApp({data(){return{name:""//绑定基本数据类型dataitems:[1,2,3,4]//绑定引用数据类型}},methods:{handleClick(){//绑定按钮点击函数this.name='lilei'this.items.push(5)}},template:`
`}).mount('#root')同样的代码，转化为设置函数，就是这样Vue.createApp({template:`
Add{{item}}`,setup(){letname=""letitems=[1,2,3,4]consthandleClick=()=>{name='lilei'items.push(5)}return{name,items}}}).mount('#root')这时候我们发现不仅按钮点击事件不好用，甚至控制台还会出现警告。handleClick方法尚未注册。其实这就是小编??要分享给大家的三点：1.控制台的warning是因为setup函数中没有返回对应的函数。页面中使用的变量和函数必须在返回对象中才能使用。至于网上提到的其他痛点，比如如何获取this以及组件之间传值，小编会在后面的内容中陆续更新为了修复控制台报错，我们可以完善这样的代码Vue.createApp({template:``,setup(){letname=""letitems=[1,2,3,4]consthandleClick=()=>{name='lilei'items.push(5)}return{name,items,handleClick}}})。mount('#root')经过上面的改动，我们发现控制台的错误没有了，但是点击按钮还是没有任何反应。这时候我们需要在setup函数中引入基本数据类型和引用数据类型的绑定方法。2.基础数据类型响应式引用——refVue.createApp({template:``,setup(){//通过数据解构引入reflet{ref}=Vue//ref处理基本类型数据//proxy'lilei'变成proxy({value:'lilei'})这样的响应式referenceletname=ref("")letitems=[1,2,3,4]consthandleClick=()=>{//name='lilei'name.value='lilei'//引入ref后，数据格式发生变化。修改内容时，items.push(5)}return{name,items,handleClick}}}).mount('#root')3.引用数据类型响应式引用-reactiveVue.createApp({template:``,setup(){//通过数据解构引入反应式let{ref,reactive}=Vue//反应式处理非基本类型的数据，常见有Array和Object类型//proxy[1,2,3,4]变成prox像y([1,2,3,4])这样的反应式引用letname=ref("")letitems=reactive([1,2,3,4])consthandleClick=()=>{//name='lilei'name.value='lilei'//导入ref后，数据格式发生变化，修改内容时，items.push(5)也要相应调整}return{name,items,handleClick}}}).mount('#root')至此，我们完成了一个从“传统”Vue到Vue3中Composition-API的写法。代码中还有一些痛点，小编会在后续的文章中持续更新，大家也可以扫描二维码，关注我的微信公众号，蜗牛全栈。
