vue3相较于vue2的一些改变

vue3新增属性

setup()

setup() 函数,是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
setup 函数会在 beforeCreate 之后、created 之前执行

​ setup是可以完全替代beforeCreate,created的

setup函数有两个形参

​ 第一个形参是props,就是接收父组件传递来的数据,props是一个对象,传递来的数据都在这个对象里

第二个形参是context(相当于this)。应为在setup中无法使用this,所以需要这个context来代替下this,来执行this的方法。

ref()函数

ref() 函数用来根据给定的值创建一个响应式的数据对象,ref() 函数调用的返回值是一个对象,这个对象上只包含一个 .value 属性

此方法和reactive的区别是,你在setup方法中使用ref定义的响应式数据需要.value一下才能拿到,return返回出去的时候则不需要。

reactive()函数

reactive() 函数接收一个普通对象,返回一个响应式的数据对象。、

setup() {
    // 数据
    let person = reactive({
      name:'刘泽权',
      sex:'男',
      age:20,
      job:{
        type:'前端工程师',
        salary:'30k'
      },
      hobby:["篮球","cfm"]
    })

待开发

vue3的生命周期

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白在前进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值