Vue(五):2.0语法转3.0、setup函数、reactive函数、ref函数、isRef和toRefs方法、路由配置

本文详细介绍了Vue3.0的主要变化,包括基于Proxy的响应式系统、setup函数的使用、reactive和ref函数的创建、isRef与toRefs方法的应用,以及路由配置的示例。通过实例展示了如何将Vue2.0语法转换为3.0,同时阐述了Composition API如何改变Vue组件的声明方式,加强了代码组织和复用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、2.0语法转3.0

vue3.0对vue的主要3个特点:响应式、模板、对象式的组件声明方式,进行了全面的更改,底层的实现和上层的api都有了明显的变化,基于Proxy重新实现了响应式,基于treeshaking内置了更多功能,提供了类式的组件声明方式。
https://www.jianshu.com/p/1e09e244bdc3

2、setup函数

 setup(props, context){
   
    
      attrs: (...) == this.$attrs
      emit: (...) == this.$emit
      listeners: (...) == this.$listeners
      parent: (...) == this.$parent
      refs: (...) == this.$refs
      root: (...) == this.$root
}

按照官方给出的说法,setup函数是一个的Vue组件选项,是用于在组件中使用Composition API的入口。

export default {
   
    setup(props, context) {
   
      context.attrs
      context.slots
      context.parent
      context.root
      context.emit
      context.refs
        ………
    }
}

3、reactive函数

Reactive(声明单一对象时使用)
取得一个对象并返回原始对象的响应数据处理。
const obj = reactive({ count: 0 })

const menuTab = reactive([
   		// 声明数组 即声明对象
        {
    txt: '登录', current
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值