组合式API

选项式编程

• 每一个组件都是一个选项配置对象，然后在使用的时候执行了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，导致调用很麻烦；要实现柯里化编程——业务解耦

setup（）函数

• 基本使用
• 访问Prop
• Setup得上下文
• 与渲染函数一起使用
  • 必须导出一个render方法，render方法中需要使用h函数来创建虚拟dom

响应式核心

• ref（）
  • 定义基础数据类型常用，
  • 赋值必须使用value属性（age.value = 赋值），绑定直接使用变量（age 变量）
• reactive ()
  • 定义引用数据类型（array，object），赋值和使用直接使用对象
  • 不可以直接赋值为普通数据，因为它是一个响应式数据对象
• readonly()
• computed()
  • 钩子函数是定义一个getter方法，当为我们用来计算的项的值发生变化的时候，会重新计算结果，并缓存结果
• watch()
  • 钩子函数是监听一个值得变化，然后去执行一个具体的业务，不会缓存结果

生命周期钩子函数

• setup在beforeCreate生命周期之前执行，所以在生命周期钩子函数中没有创建生命周期，因为setup已经完成创建生命周期函数的功能。
• 挂载生命周期 onBeforeMount onMounted
• 更新生命周期 onBeforeUpdate onUpdated
• 卸载生命周期 onBeforeUnmount onUnmounted()

上下文

• 首先要获取当前组件的实例对象 this = getCurrentInstance ()
• 当前组件上下文 ctx
• 应用上下文 appContent
  • 常用于实现时间总线

依赖注入

• provide（）
• inject（）

v-model

• v-model是基于双向绑定原理实现的一个vue指令，
• 它的实现借助了input输入框的value属性进行值绑定，使用input事件来实现数据更新

为什么要使用key？

• 因为v-for是使用for循环机制对虚拟节点进行循环，那么当数据发生变化的时候，需要更新虚拟节点
• 首先要找到是哪个虚拟节点绑定的数据发生了变化，所以需要一个查找过程，这个过程是diff算法
• diff算法，是查找更新前的虚拟节点和更新后的虚拟节点的差异的算法
• 为了对diff算法进行优化，所以添加一个key可以快速定位是哪个对象发生变化，在对其的属性进行对比即可

什么是组件的生命周期？

• 生命周期是指虚拟dom从创建到卸载的过程

为什么要有生命周期？

• 开发者或业务在整个过程需要对组件进行业务处理，那么就需要在生命周期中进行业务实现
• 譬如：在组件初始化的时候，请求数据，那么可以在挂载生命周期执行请求

生命周期包含哪些？

• 四个阶段创建、挂载、更新、卸载，每一个阶段都有之前和之后，共八个生命周期

主要的生命周期有哪些？

• created非异步赋值不会造成二次渲染，但是获取不到虚拟dom
• mounted赋值会造成二次渲染，但是可以获取虚拟dom
• 更新生命周期只有当数据绑定到节点，它更新才会导致生命周期执行
• 卸载生命周期–beforeUnmount，因为这个生命周期可以获取虚拟dom，所以常用，执行事件解绑、清理定时器、销毁大数据等业务