setup
理解:vue3中的一个新的配置项,值为一个函数,setup是所有composition API即组合API“表演的舞台”,组件中所用到的:数据,方法等等,均要配置在setup中,
它有两种返回值:1、若返回一个对象,则对象中的属性和方法没在模板中均可以使用
2、若返回一个渲染函数:则可以自定义渲染内容
注意:setup不能是async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。后期也可以一个promise实例,但需要suspense和异步组件的配合
ref函数
作用:定义响应式的数据
语法:const xxx=ref(initvalue)
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
js中操作数据:xxx.value
模板中读取数据;不需要.value,直接<div>{{xxx}}</div>
备注:
接收的数据可以使:基本类型,也可以是对象类型
基本类型的数据:响应式依然是靠object.defineproperty()的get与set完成的
对象类型的数据:内部使用了vue3de一个新函数reactive函数
reactive函数
- 作用: 定义一个<strong style="color:#DD5145">对象类型</strong>的响应式数据(基本类型不要用它,要用```ref```函数)
- 语法:```const 代理对象= reactive(源对象)```接收一个对象(或数组),返回一个<strong style="color:#DD5145">代理对象(Proxy的实例对象,简称proxy对象)</strong>
- reactive定义的响应式数据是“深层次的”。
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。