vue3 新特性

重点：组合式API

what——组合式 API

        ▣组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

        ▣响应性 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
        ▣依赖注入：例如provide()和inject()，使我们可以在使用响应性 API 时，利用 Vue 的依赖注入系统。

why——组合式 API

1、组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。它解决了所有mixins的缺陷，那是选项式 API 中一种逻辑复用机制。

2、更灵活的代码组织
选项式 API 在单个组件的逻辑复杂到一定程度时，也面临了一些限制，主要体现在需要处理多个逻辑关注点的组件中，同一个逻辑关注点相关的代码没有被归为了一组，程序员为了一个逻辑关注点在不同的选项块间来回滚动切换，如果是大项目，后期维护非常困难。

 

3、生产包体积更小
搭配

修改变量值

变量名.value = "改变的新特新"
eg：message.value = "改变的新特新"

 

 setup（）中使用props和context

因为setup组件选项在创建组件之前（即beforeCreate和created前）执行，所以无法像2.x 中一样使用this获取当前组件，修改data变量，所以3.x是通过接收setup（props，ctx）的方法，获取到当前组件的实例ctx（context）和props。===》setup方法中没有this关键字

将数据从 父组件 传递到 子组件

在子组件显示

 子组件：

 父组件：