1.组合API-reactive函数
定义响应式数据:
- reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。
代码演示reactive如何实现响应式数据
当每点击一次按钮触发按钮函数时,Vue3组合Api中的setup内部会执行触发事件
2.组合API-ref函数
定义响应式数据:
- ref函数,常用于简单数据类型定义为响应式数据
- 再修改值,获取值的时候,需要.value
- 在模板中使用ref申明的响应式数据,可以省略.value
控制台打印结果如下:
3.其中Vue2与Vue3之间的区别是什么
-
vue2和vue3双向数据绑定原理发生了改变
-
Vue3支持碎片(Fragments)
-
1就是说在组件可以拥有多个根节点。
-
-
Composition API
-
2Vue2与Vue3
最大的
区别:Vue2使用选项类型
API(Options API)对比Vue3合成型
API(Composition API)
-
-
建立数据 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函数只能是同步的不能是异步的。