vue3初始

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 实现,通过代理对象操作源对象内部数据进行操作。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值