Vue3.0入门(上)

        在完成了两个使用Vue2框架搭建的项目后,我终于对Vue3.0下手了!经过学习,好像Vue3.0里面确实有些东西是有了质的飞跃~浅总结一波,简单梳理一下里面的重难点,如果你也是Vue3.0的初学者,那可以看一看哦

目录

一、Vue3.0带来了什么?

二、Vue3.0的新特性

1.Composition API(组合API)

2.拉开序幕的setup

2.1 setup的基础介绍

2.2 setup的注意点

3.Ref函数与Reactive函数 

3.1 Ref函数:

3.2 Reactive函数

3.4 ref和Reactive的对比

4.Vue3.0的生命周期


一、Vue3.0带来了什么?

        一个版本的升级必然是优化了原来的版本,那么相较于Vue2,Vue3.0给我们带来了以下的优化:

        1.性能的提升

        2.源码的升级

        3.拥抱TypeScript

        4.新的特性

前面的三点,感受并不是特别突出,但是Vue3.0的新特性,是我们在学习过程中的重难点,一定要重点关注,重点感受哦。

二、Vue3.0的新特性

1.Composition API(组合API)

       在Vue2中我们使用的是Options API,即配置项API,使用这种方法对数据、方法等进行配置会存在一定的问题。于是在Vue3.0中,提出了一个新的概念是Composition API,即组合API。将所有的数据、方法等放入setup中,即组合API的入口函数。

  • 配置项API存在的问题:当开发代码数据过长时,不方便查找某个功能对应的数据、方法或其他生命周期钩子所在的位置,可能需要通篇阅览。
  • 组合API的优势:可以将每个功能需要的数据、方法等内容放在一块,或者使用hook函数,在setup中使用即可,需要修改时,直接找到对应的hook函数修改即可。

2.拉开序幕的setup

2.1 setup的基础介绍

     setup作为组合API的入口函数,是所有组合API“表演的舞台”。组件中所有用到的数据、方法都定义在setup里面。

     setup函数的两种返回值:

             1.若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。

             2.若返回一个渲染函数:则可以自定义渲染内容。

2.2 setup的注意点

使用上:

        1.尽量不要与Vue2.x配置混用。Vue2中的配置项能访问到setup中的属性和方法,但是在setup中不能访问到Vue2.x中的配置(data、methos、computed.…)

        2.如果混用有重名,setup优先

        3.setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(注:后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

        4.setup在beforeCreate之前执行一次,this是undefined。

参数上:

  1. props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。

  2. context:上下文对象

     attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs

    slots: 收到的插槽内容, 相当于 this.$slots

    emit: 分发自定义事件的函数, 相当于 this.$emit。 

3.Ref函数与Reactive函数 

3.1 Ref函数:

  • 作用: 定义一个响应式的数据

  • 语法: const xxx = ref(initValue) 

    import {ref} from 'vue'
    setup(){
        let sum = ref(0)
    }
    • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)

    • JS中操作数据: xxx.value

    • 模板中读取数据: 不需要.value,直接读取即可

  • 注:

    • 接收的数据可以是:基本类型、也可以是对象类型

    • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的

    • 对象类型的数据:内部 求助 reactive函数

3.2 Reactive函数

  • 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)

  • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)

    import {reactive} from 'vue'
    setup(){
        let car = reactive({name:'张三',age:20})
    }
  • reactive定义的响应式数据是“深层次的”。

  • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。

3.3 Vue3.0中的响应式

        我们知道,在Vue2中,实现响应式的原理主要是通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持),即使用了get()和set()。但是存在新增属性、删除属性时界面不会更新的问题,同时在Vue2中不支持通过数组下标修改数组内容。在Vue3.0中,这些问题的得到了解决。

        在Vue3.0中,主要是通过了Proxy(代理)和Reflect(反射)来实现响应式的。

  • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。

  • 通过Reflect(反射): 对源对象的属性进行操作。

3.4 ref和Reactive的对比

Ref

Reactive
定义数据基本数据类型对象(或数组)类型数据
原理Object.defineProperty()的get和set

proxy实现响应式(数据劫持);reflect操作源对象内的数据

使用角度操作需要.value,读取不需要

操作与读取均不需要.value

        注意:ref也可以定义对象(或数组)类型数据,但是内部会自动转为reactive代理对象。

4.Vue3.0的生命周期

        在前面介绍过Vue2中的生命周期,其实在Vue3.0中,生命周期大致和Vue2差不多,只是有细微的改变。因为篇幅的原因,只截取了Vue3中改变的部分作为对比展示。 

         这里可以看出来优化了创建vm实例对象时的判断条件,避免走完两个生命周期钩子后实例不存在的情况。

        这里可以看到,在最后两个生命周期钩子中,beforeDestroy改成了beforeUnmount,destroyed改成了unmounted,更好的与beforeMount与Mounted相呼应。

        另外,在vue3.0中,所有的生命周期钩子不仅可以像Vue2中那样使用配置项配置,也可以使用Composition API进行配置,不过要注意其名字的变化

配置项配置composition API
beforeCreatesetup()

created

setup()

beforeMount

onBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updateonUpdate
beforeUnmountonBeforeUnmount
unmountedonUnmounted

        注意:两种配置方式尽量不要重复,如果重复了setup中的生命周期钩子会优先执行。另外,beforeCreate和created直接体现在setup中了。


        Vue3.0新增的东西太多了,一篇有点放不下,分成两篇啦,更多基础等待下篇哦,主要是computed属性和watch属性、Vue3.0的其他composition API属性~

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值