1、区别

optionsAPI：
vue2中使用的是optionsAPI，来定义一个组件内部的一些属性，如methods、data等等；
其缺点往往会在大项目中体现出来，比如一个简单的计数器功能，可能需要在methods内部书写一部分逻辑，在computed内部也书写一部分逻辑，那么问题来了：如果该组件内部有n个这样的小功能，那么此时代码逻辑是十分分散的，并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码，而compositionAPI的出现就是为了解决这一问题的。
compositionAPI：
vue3新增的compositionAPI主要就是为了解决API太过于分散的问题，避免一个功能点下的api太过于分散不便于维护，将同一个功能下的api统一放到一个地方，这样一来项目的开发和维护就简便多了。

2、setup()

compositionAPI也叫做组合式API，vue3中组合式API的入口就是setup函数；

setup函数会在组件被创建（created）之前执行。
setup函数中不能使用this，该函数内部并不会绑定this到当前的vue实例！

1. 两个参数：

props:与options API中的props一样，同样是通过父组件传递过来的数据；

vue内部会默认传递该参数到setup中；

props是响应式的，因此在setup中使用时不能对其进行解构，如果需要解构，则需要依靠toRefs方法实现：

     import { toRefs } from "vue";props:{msg:"JavaScript大王"},// 不能对props解构  否则会失去响应性setup(props){// const { msg } = props   错误方式// 正确的解构操作应该是这样const { msg } = toRefs(props);console.log(msg.value)}

当props中的某个属性非必传或者props内部未定义某个属性时，需要通过toRef方法在setup内部完成对其的定义：

        import { toRefs } from "vue";// 比如props中只有msg   没有peanut这个属性   则需要如下的方式去定义peanutprops:{msg:"JavaScript大王"},setup(props,context){const peanut = toRef(props,'peanut')}

props最好是对象形式（数组形式会报错）

context:
- 是一个普通的JavaScript对象，其暴露了在setup中可能会用到的值：attrs、slots、emit、expose；
- attrs、slots应该尽量不对其使用解构；
- 同时，在执行setup时只能访问到attrs、slots、emit、expose，不能访问到data、computed、methods、模板的refs这些属性；
- demo
  - App.vue

<template><h1>这是App.vue</h1><demo :msg="msg" v-if="msg" demo="test"><template v-slot:haha><div>111</div></template></demo>
</template><script>
import demo from './demo'export default {name: "App",data(){return {msg:'App.vue中的msg'}},components:{demo}
}
</script><style scoped></style>

demo.vue

<template><h1>这是demo.vue</h1><slot name="haha"></slot>
</template><script>
import { toRefs , toRef } from "vue";export default {name: "demo",props:{msg:String},setup(props,context){const { msg } = toRefs(props)console.log('JavaScript大王========>',msg.value)const peanut = toRef(props,"peanut")console.log('JavaScript大王========>',peanut.value)// context是一个普通的JavaScript对象   可以对其使用解构const { attrs , emits , slot ,expose } = context;// Attribute (非响应式对象，等同于 $attrs)console.log('JavaScript大王========>',attrs.demo) // test// 触发事件 (方法，等同于 $emit)console.log('JavaScript大王========>',emits)// 插槽 (非响应式对象，等同于 $slots)console.log('JavaScript大王========>',slot)// 暴露公共 property (函数)console.log('JavaScript大王========>',expose)}
}
</script><style scoped></style>

2. 返回值

返回值必须是一个对象共模板内部使用；
相当于optionsAPI的data对象；

setup(props,context){const name = 'peanut' // 变量const sayHi = () => {// 返回函数console.log('JavaScript大王========>','Hi')}// 必须是一个对象return {name,sayHi,}},

setup中定义并返回的变量不是响应式！ 还需要注意的是，像这样定义的变量虽然可以在模板中正常使用，但是如果在setup内部定义了函数改变了name，那么name是不会同步在页面上发生改变的（虽然在setup内部name内部确实发生了改变）；具体如下例子所示：

<template><h1>这是demo.vue</h1><span>{{number}}</span><button @click="increment"> +1 </button>
</template><script>
export default {name: "demo",props:{msg:String},setup(props,context){let number = 0 // 变量const increment = () => {number += 1console.log('JavaScript大王========>',number)}},
}
</script><style scoped></style>

此时定义的变量number虽然可以在模板内部使用，但是页面并不会根据number的变化做出更新：

setup返回值实现响应式的几个方案

reactive API
该api接受一个对象类型的参数，会返回一个具有响应式特性的对象，该对象会被加工处理成为通过proxy代理的对象，与原始对象不会相互影响。
该api对于传入的参数数据类型有严格限制，需要是数组或者对象，否则会报警告，造成返回的数据不具有响应性。
具体使用参考如下：

<template><h1>demo组件</h1><h2>{{msg}}</h2><button @click="increment">+ 1</button><div>counter1==>{{state.counter1}}</div><div>counter2==>{{counter2}}</div>
</template><script>
import { reactive } from "vue";export default {name: "demo",props:{msg:String},setup(props,context){// 使用reactive API实现数据的响应性const state = reactive({counter1:1})let counter2 = 1 // 该变量未通过reactive api进行响应式处理/*实现点击+1*/const increment = () => {state.counter1 += 1counter2 += 1}return {state,counter2,increment}}
}
</script><style scoped></style>

ref API

reactive API仅适用于对数组、对象的响应式处理，一些基本js数据类型的响应式处理则需要ref API进行处理。
需要注意的是：在vue组件的html片段中，refAPI加工处理后的变量会自动进行解包，可以直接使用，但是在setup内部不会对其进行解包操作，访问的时候需要通过 constant.value 的方式去访问响应式的值。

<template><h1>App.vue</h1><!-- html模板内部可以直接使用  vue内部自动做了解包操作 --><h2>响应式数据===>{{counter}}</h2><button @click="increment">+1</button>
</template><script>
// 需要导入ref
import { ref } from "vue";export default {name: "App",props:{},setup(props,context){// 需要以如下的形式为变量赋值  否则将失去响应性let counter = ref(10)const increment = () => {// setup内部需要以 .value的形式访问counter.value++}return {counter,increment}}
}
</script><style scoped></style>

optionsAPI与compositionAPI相关推荐

Composition-API
简介 Composition API简介:一组基于函数的附加API,能够灵活地组成组件逻辑,Composition API希望将通过当前组件属性.可用的机制公开为JavaScript函数来解决这个问题 ...
this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇
vue的版本是2,使用插件composition-api尝试组合式api 1. this和this.$router这个方法在setup()里直接使用竟然是undefined 我是这么写的 setup( ...
vue3 效率的提升、composition-api 和 ref 详解
vue3 效率的提升.composition-api 和 ref 详解文章目录 vue3 效率的提升.composition-api 和 ref 详解 vue3 效率的提升优化diff算法 hoi ...
vue3 composition-api实现游动锦鲤喜欢的可以自己动手实现哦很有成就感的
制作一个 myFish 锦鲤组件通过CSS Transform 改变锦鲤坐标, <template><div><div class="FishRoot&q ...
vue3 composition-api useRoute useRouter 别混淆
useRouter(跳转), useRoute(获取路由参数)vue2.0一样注意区分
大屏可视化！2022新趋势！
需要源码留言qq 我加你们或者加我 vue面试题核心原理部分 mvc mvvm和mvp的区别? MVVM 就是 Model-View-ViewModel 的缩写,MVVM 将视图和业务逻辑分开. ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
H5 vue-pdf 使用方法复制粘贴直接用
H5 vue-pdf 使用方法复制粘贴直接用 <!-- 如果印章不显示全局搜索这行代码然后注释掉重新打包就可以了 _this3.setFlags(_util.AnnotationFlag ...
OCR身份证实名认证+图片上传+拍照上传图片（自用）
chooseImage() {const that = this;Taro.chooseImage({sizeType: ["original", "compressed ...

optionsAPI与compositionAPI

1、区别

2、setup()

setup返回值实现响应式的几个方案

optionsAPI与compositionAPI相关推荐

最新文章

热门文章