Vue组合式API详解-优快云博客

本文链接：https://blog.youkuaiyun.com/tangyu520lehua/article/details/127976013

选项式编程

每一个组件都是一个选项配置对象，然后在使用的时候执行了new运算；函数式编程，是导出得是一个函数，然后使用h函数进行渲染执行，不会进行new运算
在createApp方法中传递的是一个对象，这个对象也就称为vue实例化选项参数，那么这个编程方式就叫选项式API
createApp（{
props: {}
//用来接收父传子数据，可以定义数据的类型，默认值，是否必传
provide() {return{}}, //provide: {只传递固定参数，不能使用this对象}
inject: [ ]，
//数据注入，在顶层使用provide提供数据，如果数据需要双向绑定，那么必须使用computed函数，在使用数据的组件中使用inject进行数据注入
data() { return{ } },
//定义双向绑定数据——为什么是函数？因为组件是一个多例，数据对象是引用数据，如果不是函数导出数据，那么所有的组件都是公用一个数据对象，那么数据就是一个单例对象
computed:{},
//当数据发生变化的时候会重新计算结果，并缓存结果——计算属性；监听一个数据的变化，然后去执行一个业务，他不会缓存数据——观察属性
watch: {}，
components: () ,
methods: () ,
render：（） {}，
//实现虚拟dom创建（h函数——创建虚拟dom的函数,这个函数有三个参数，tag名字,tag属性，tag子元素）和渲染的函数
//template编译后会覆盖选项中的render方法，因为template会被vue-loader编译成一个render方法

//生命周期：四个阶段创建，挂载，更新，卸载，每一个阶段分为之前和之后
//update生命周期只有当数据绑定到虚拟dom之后，它的更新才会触发
//卸载生命周期常用于事件解绑，定时器销毁，大数据销毁等业务
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate () {},
updated() {},
beforeUnmount() {},
unmounted() {}
}）

1.组合式API

什么是组合式API
- 是选项式API和函数式编程（setup钩子函数）混合使用，所以的函数可以编写在setup函数中
- 子组件引入和选项式引入一致
  - import引入组件，通过components属性进行注册
- 属性传递和选项式一致
  - 但是在setup中需要使用props数据，必须先使用props来定义父传子属性，然后setup钩子函数第一个参数接收
为什么使用它
- 因为OOP有this，导致调用很麻烦；要实现柯里化编程——业务解耦