Vue3常用的组合Api

1.组合API-reactive函数

定义响应式数据：

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

代码演示reactive如何实现响应式数据

 当每点击一次按钮触发按钮函数时，Vue3组合Api中的setup内部会执行触发事件

 2.组合API-ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
• 再修改值，获取值的时候，需要.value
• 在模板中使用ref申明的响应式数据，可以省略.value

控制台打印结果如下：

3.其中Vue2与Vue3之间的区别是什么

1. vue2和vue3双向数据绑定原理发生了改变

   • 1vue2 的双向数据绑定是利用ES5 的一个 [API] Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

   • 1vue3 中使用了ES6 的ProxyAPI对数据代理。

2. Vue3支持碎片(Fragments)

   • 1就是说在组件可以拥有多个根节点。

3. Composition API

   • 2Vue2与Vue3 最大的区别：Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

4. 建立数据 data

   • 1Vue2：这里把数据放入data属性中

   • 1Vue3：需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

   • 1使用以下三步来建立反应性数据:

     • 从vue引入reactive

     • 使用reactive()方法来声明我们的数据为响应性数据

     • 使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

总结：

• setup函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）。

• setup 函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数。

• 执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）。

• 与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)。

• 使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态。

• setup()内使用响应式数据时，需要通过.value获取。

• 从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value。

• setup函数只能是同步的不能是异步的。