快速掌握Vue3:速成Vue3前端开发看这篇就够啦

  • 快速掌握Vue3:速成Vue3前端开发看这篇就够啦已关闭评论
  • 102 次浏览
  • A+
所属分类:Web前端
摘要

我们可以跟以前定义data和methods,但是vue3中我们更推荐使用setup函数。因为async函数必须返回一个json对象供模板使用,如果setup是一个async函数,返回的将是一个promise对象。
如果setup是一个async函数,那该组件就成了一个异步函数,需要配合Suspense组件才能使用。


一、Vue基本概念

1.1-Vue3的优点

  • Vue3支持Vue2额大多数特性。
  • 更好的支持TypeScript。
  • 打包大小减少41%。
  • 初次渲染快55%,更新渲染快133%。
  • 内存减少54%。
  • 使用proxy代替defineProperty实现数据响应式。
  • 重写虚拟DOM的实现和Tree-Shaking。

二、API

2.1-setup

我们可以跟以前定义data和methods,但是vue3中我们更推荐使用setup函数。

  • setup是一个函数。只在初始化时执行一次。以后大部分代码都是在setup中写。
  • 返回一个对象,对象中的属性或方法,模板中可以直接使用。
  • setup返回的数据会和data和methods进行合并,setup优先级更高。
  • setup函数中没有this。 以后开发都不使用this了
  • setup不要写async函数。

因为async函数必须返回一个json对象供模板使用,如果setup是一个async函数,返回的将是一个promise对象。
如果setup是一个async函数,那该组件就成了一个异步函数,需要配合Suspense组件才能使用。

2.2-ref

让数据变成响应式。

(1)先引用ref import {ref} from 'vue';  (2)将数据变成响应式的。 let data1=ref(12);  (3)操作数据 data1.value = 123; 

2.3-reactive

作用:定义对象格式的响应式数据
如果用ref定义对象/数组,内部会自动将对象/数组转换为reactive代理器对象。

  • const proxy=reactive(obj):接收一个普通对象然后返回该普通对象的响应式代理器对象。
  • js中修改告诉不需要.value。
  • 一般用来定义一个引用类型的响应数据。

2.4-toRefs

将响应式对象中所有属性包装为ref对象,并返回包含这些ref对象的普通对象。
应用:对trsctive定义的对象进行toRefs包装,包装之后的对象中每个属性都是响应式的。

2.5-响应式原理

通过proxy(代理):拦截对对象本身的操作,包括属性的读写、删除等操作。
通过Reflect(反射):动态对被代理对象的响应式属性进行特定的操作。

2.6-watch和watchEffect

watch - 指定监听数据:

  • 监听指定的一个或多个响应式数据,一旦发生变化,就会自动执行监视回调。
    • 如果是监听reactive对象中的属性,必须通过函数来指定。
    • 监听多个数据,使用数组来指定。
  • 默认初始时不指定回调,但是通弄过配置immediate为true,来指定初始时立即执行第一次。
  • 通过配置deep为true,来指定深度监视。

watchEffect - 不指定监听数据:

  • 不用直接指定啦监视的数据,回调函数中使用的哪些响应式数据就监听哪些响应式数据。
  • 默认初始就会执行一次。

2.7-生命周期

vue2中的生命周期钩子函数依旧可以使用,不过建议使用vue3的钩子函数

快速掌握Vue3:速成Vue3前端开发看这篇就够啦

2.8-ref获取元素

vue2中是用thisref.xxx来获取元素或组件,但是vue3中没有this的概念。
vue3通过ref创建响应式数据的api来获取元素。

1.使用ref创建响应式数据,假设叫x
2.模板中绑定ref属性,值为上面的x
注意不能使用v-bind动态绑定。
这是x就是一个dom元素或组件了。

2.9-自定义hook函数

hook函数翻译成中文就是钩子函数(注意并不是生命周期的钩子函数)
比如ref,reactive,computed,watch,onBeforeMount等都是hook函数,只不过他们都是vue内部hook函数。

1.创建一个函数,函数名称必须以"use"开头
2.函数必须return一些数据。

2.10-shallowReactive与shallowRef

他们都表示浅响应式。

  • shallowReactive:只处理了对象第一层属性的响应式(值响应第一层)
  • shallowRef:只有重新复制时才是响应式(不响应内部数据,只响应整体。)

2.11-readonly与shallowReadonly

  • 他们表示只读代理对象
  • readonly
    • 深度只读
    • 设置readonly后,修改响应式数据会报错。
  • shalloReadonly
    • 浅只读
    • 设置shalloReadonly后,修改响应式数据的第一层数据会报错。
  • 应用场景:
    • 在某些特定情况下,我们可能不希望对数据进行更新的操作,那就可以包装成一个只读代理对象,而不能修改或删除。

2.12-toRaw与markRaw

  • toRaw
    • 返回reactive或readonly对象的原始数据
    • 这是一个还原方法,可用于临时读取,得到的数据不具有响应式。
  • markRow:
    • 标记一个对象,使其不具有响应式
    • 应用场景:
      • 有些只不应被设置为响应式的,例如复杂的第三方实例或Vue组件对象。
      • 当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能。

2.13-toRef

  • 为响应式对象上的某个属性创建一个ref引用,更新是应用对象会同步更新。
  • 与ref的区别:ref是拷贝了一份新的数据指单独操作,更新时相互不影响。

2.14-customRef

  • 用于自定义一个ref,可以显示的控制依赖追踪和触发相应。
  • 接受一个工厂函数,两个参数分别用于追踪的track与用于触发相应的trigger,并方法一个带有get和set属性的对象。
  • 需求:使用customRef实现防抖函数

2.15-provide与inject

  • provide和inject提供依赖注入,功能类似2.0的provide/inject
  • 实现跨层级组件(祖孙)间通信。

2.16-响应式数据的判断

  • isRef:检查一个值是否为一个ref对象。
  • isReactive:检查一个对象是否否是由reactive对象的响应式代理。
  • isReadonly:检查一个对象是否由readonly创建的只读代理。
  • isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理。

2.17-Fragment(片段)

  • 在vue2中:组件中必须有一个跟标签
  • 在vue3中:组价可以没有跟标签,内部会将多个标签包含在一个Fragment虚拟标签中。
    • 好处:减少标签层级,减小内存占用

2.18-Teleport(瞬移)

  • Teleport提供了一种干净的方法,让组件的html在父组件界面外的特定标签(很可能是body)下插入显示。

2.19-Suspense(不确定的)

Supense组件是配合一部组件使用的,它可以让一部组件返回数据前渲染一些后背内容。
那我们首先要学会一个异步组件。

  • 在setup函数总返回一个promise,就是一个异步组件。
  • setup函数携程async函数,也是一个异步组件。

2.20-其他新的API

  • 全新的全局API:
    • createApp()
    • defineProperty()
    • defineComponent()
    • nextTick()
  • 将原来的全局API转移到应用对象:
    • app.component()
    • app.config()
    • app.directive()
    • app.mount()
    • app.umount()
    • app.use()

2.21-useSlots和useAttrs

useSlots 和 useAttrs 是真实的运行时函数,它会返回与 setupContext.slots 和 setupContext.attrs 等价的值,同样也能在普通的组合式 API 中使用。
使用场景:父组件使用子组件的插槽

1.父组件

<template>   <h1>这是父组件</h1>    <p>插槽上面1</p>   <slots-attrs msg="我是props的msg" heihei="我是attr">     <template #header >       <div style="width:100%;height:100px;border:1px solid green;">我是父组件插槽--插入的内容。。。</div>     </template>   </slots-attrs>   <p>插槽下面2</p>  </template>  <script lang="ts" setup> import SlotsAttrs from '@/components/04/SlotsAttrs.vue'  </script> 

2.子组件

<template>   <Child ref="child"/>    {{msg}} </template>   <script lang="ts" setup> import { ref,onMounted } from 'vue'; import Child from '@/components/03/Child.vue'   const child = ref(null); const msg=ref('')     onMounted(()=>{   console.log("进来了")   console.log(child.value.msg)   msg.value = child.value.msg; })  </script> 

三、路由

(1)userRout:获得当前路由对象。
(2)useRouter:获得路由实例,可以进行路由跳转。

import {useRoute,useRouter} from "vue-router" 

四、Vuex

(1)userStore:获得vuex实例。

原创地址:https://www.cnblogs.com/kimiliucn/p/17605624.html