一、Vue3简介

  • 2020.09.18分布正式版

  • 特性

    • Vue3采用的渐进式开发，向下兼容
    • 性能的提升
      • 打包体积变小
      • 首次渲染加快
      • 更新更快
      • 内存使用减少
    • Composition【组合】 API
    • 新增API
      • Teleport瞬移组件
      • Suspense解决异步组件问题
      • Fargements
      • Emits

        二、Vue3新特性之setup

  • 基础认识

    • setup是Composition API的容器，值是一个函数
    • 组件中所用到的数据、方法等，均要配置在setup中
    • 会在beforeCreate之前执行一次
  • 返回值
  • 注意点
    • 不要和V2配置混用
    • setup不能是一个async函数
    • setup()返回一个对象，对象中的属性将直接暴露给模板渲染的上下文

  • 语法

    • setup(props,context){}
      • props对象是响应式的——被当作数据源去观测，后续props发生变动时，它也会被框架内部同步更新，但是对用户代码来说，是不可以修改的
      • context：上下文对象

        四、Vue3之响应式系统API

  • reactive

    • 处理对象经过Proxy的加工后变成一个响应式的对象
    • 可以使用toRefs()函数将reactive()创建出来的响应式对象，转变为普通对象
    • 使用toRef()可以将reactive()创建出来的响应式对象变成响应式数据ref()类型
  • ref
    • ref函数传入一个值作为参数，返回一个基于该值的响应式Ref对象，这个对象只包含一个.value属性，该对象的值一旦被改变和访问，都会被跟踪到
  • computed
    • 计算属性，既可以创建只读的计算属性，还可以创建可读可写的计算属性使用get和set函数
  • readonly
  • watchEffect

  • watch

    五、生命周期全都写在setup中

  • 生命周期函数的调用顺序为：

    • image.png
  • onBeforeMount
  • onMounted
  • onBeforeUpdate
  • onUpdated
  • onBeforeUnmount
  • onUnmounted
  • onErrorCaptured
  • onRenderRtacked
  • onRenderTriggered