• 组合式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,所以常用,执行事件解绑、清理定时器、销毁大数据等业务
  • 相关阅读:
    js:React中使用classnames实现按照条件将类名连接起来
    深度学习自学笔记五:浅层神经网络(二)
    股权项目披露:扬州国扬电子有限公司6.2664%股权转让
    MQ - 34 基础功能:在消息队列内核中支持WebSocket的设计
    延时队列我在项目里是怎么实现的?
    jupyter notebook 隐藏&显示全部输出内容
    Linux 常用命令介绍
    php长字符串大文本如何处理 —— <<<定界符的使用
    矩阵特征值与特征向量的理解
    基于AT89C51单片机超声波水位液位控制系统设计(含文档、源码与proteus仿真,以及系统详细介绍)
  • 原文地址:https://blog.csdn.net/tangyu520lehua/article/details/127976013