目录

1、vue2和vue3响应式原理

2、Vue3带来了什么

3、composition API 优势好处特点

4、setup配置

5、ref与reactive

6、计算属性

7、watch与watchEffect

8、provide与inject

9.vue3新的生命周期钩子

10、自定义hook函数

11、toRef和toRefs

12、shallowReactive 与 shallowRef

13、readonly 与 shallowReadonly

14、toRaw与markRaw转换为普通数据和标记属性非响应式

15、customRef 自定义ref使用

16、vue3中的父传子,子传父

17、响应式数据的判断isRef、isReactive、isReadonly、isProxy

18、vue3中使用插槽?

19、vue3中路由守卫onBeforeRouteLeave,onBeforeRouteUpdate?

20、vue3中使用vuex useStore?

21、vue3中使用vue-router,useRoute和useRouter ?

22、vue3单文件组件 script setup语法?

23、vue3中nextTick使用

24、原型绑定全局属性

25、vue3中使用keeplive ?

26、element-plus组件库vant3.0ant

27、vue3中废弃了过滤器1、过滤器:过滤器可以通俗理解成是一个特殊的方法,用来加工数据的


1、vue2和vue3响应式原理

Vue2和Vue3的响应式原理都是基于Object.defineProperty实现的,但是Vue3在性能和功能上做了一些优化和改进。

Vue2的响应式原理:

  • Vue2通过Object.defineProperty对data中的属性进行劫持,当属性值发生变化时,会触发对应的更新函数,从而更新视图。

  • Vue2通过Watcher来实现数据与视图的双向绑定,当数据发生变化时,Watcher会通知对应的视图进行更新。

  • Vue2的响应式原理存在一些缺陷,例如无法监听数组的变化,需要通过特殊的方法来实现.

Vue3的响应式原理:

  • Vue3使用Proxy代替了Object.defineProperty,Proxy可以监听到对象的所有属性,包括新增和删除操作。

  • Vue3使用了WeakMap来存储依赖关系,避免了Vue2中Watcher的内存泄漏问题。

  • Vue3支持了多个根节点的组件,可以更方便地进行组件的复用和组合。

2、Vue3带来了什么

  1. 更快的渲染速度:Vue3使用了Proxy代理对象,可以更快地跟踪数据变化,从而提高渲染速度。

  2. 更小的体积:Vue3的体积比Vue2更小,同时也支持按需加载,减少了页面加载时间。

  3. 更好的TypeScript支持:Vue3对TypeScript的支持更加完善,可以更好地进行类型检查和代码提示。

  4. 更好的组件封装:Vue3引入了Composition API,可以更好地封装组件逻辑,使得组件更加可复用和易维护。

  5. 更好的响应式系统:Vue3的响应式系统进行了重构,可以更好地处理嵌套对象和数组的变化,同时也提供了更多的API来处理响应式数据。

    总之,Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的响应式系统,使得开发者可以更加高效地开发Vue应用。

3、composition API 优势好处特点

3.1、为什么要选择组合式API?

由于vue2有局限性:

  • 组件的逻辑膨胀导致组件的可读性变差;

  • 无法跨组件重用代码;

  • vue2对TS的支持有限

3.2、组合式API解决了什么问题?

1、面对vue2的局限性,可以将相同的代码组织在一起,而不会散落在各个角落

3.3、组合式API的优点?

  • composition API是根据逻辑相关性组织代码的,提高可读性和维护性

  • 代码量少,更好的重用逻辑代码

  • 没有引入新的语法,只是单纯函数

  • 异常灵活

  • 工具语法提示友好,因为是单纯函数所以很容易实现语法提示、自动补偿

  • 更好的Typescript支持

  • 在复杂功能组件中可以实现根据特性组织代码,代码内聚性强

  • 组件间代码复用

4、setup配置

Vue 3中的 setup 函数接收两个参数,分别是 props 和 context。

1、props:值为对象,包含: 组件外部传递过来。切组件内部声明接收了的属性。需要注意的是,Vue3中的 props 是只读的,即在setup 函数中不能修改 props 的值。如果需要修改传递过来的数据,可以使用响应式对象或ref。

2、context:上下文对象。

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

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

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

注意:

1、这个钩子会在created之前执行

2、内部不存在this

3、如果返回值是一个对象,那么这个对象中的键值对会被合并到created钩子的this中,而在视图上也能访问相应的数据值

5、ref与reactive

reactive:

(1)、它的响应式是更加‘深层次’的,底层本质是将传入的数据包装成一个Proxy。

(2)、参数必须是对象或者数组,如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs

ref:

(1)、函数参数可以是基本数据类型,也可以接受对象类型

(2)、如果参数是对象类型时,其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成:reactive

(3)、在template中访问,系统会自动添加.value;在js中需要手动.value

(4)、ref响应式原理是依赖于Object.defineProperty()get()set()的。

6、计算属性

6.1、什么是计算属性:

1、computed函数,是用来定义计算属性的,计算属性不能修改。

2、模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

3、计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

methods和computed看起来都可以实现我们的功能, 那么为什么还要多一个计算属性这个东西呢?

原因:

1、计算属性会进行缓存,如果多次使用时,计算属性只会调用一次;

2、而方法会使用一次则调用一次,因此计算属性相对而言性能更好。

注意

  1. 回调函数必须return,结果就是计算的结果

  2. 如果计算属性依赖的数据发生变化,那么会重新计算

  3. 不要在计算中中进行异步操作

高级computed有两个方法,分别是set()和get()。

  1. 计算属性可以直接读取或者修改

  2. 如果要实现计算属性的修改操作,那么computed的实参应该是对象

  • 读取数据触发get方法

  • 修改数据触发set方法,set函数的形参就是你赋给他的值

7、watch与watchEffect

1、watchwatchEffect都是vue3中的监听器,但是在写法和使用上是有区别的,主要是介绍一下watchwatchEffect的使用方法以及他们之间的区别。

2、 watch 的工作原理:侦听特定的数据源,并在回调函数中执行副作用。它默认是惰性的——只有当被侦听的源发生变化时才执行回调,不过,可以通过配置 immediate 为 true 来指定初始时立即执行第一次。可以通过配置 deep 为 true,来指定深度监视。

3、immdiate: 默认情况下,侦听器需要 data 后面值改变了才会生效,若需要侦听器一进入页面就生效,那就需要使用 immediate。 4、deep: 默认情况下,侦听器只会监听数据本身的改变,若要进行深度监听,那就需要使用 deep。 5、immediate 和 deep 配置在第三个参数对象里。 第一个参数:监听谁,第二个参数:回调函数,第三个参数:配置对象

7.1、watchEffect

watchEffect 函数的特点:

  • 优点:

    • 会自动收集依赖,不需要手动传递侦听内容——自动侦听回调函数中使用到的响应式数据。

    • 默认 immdiate 是 true,所以初始化时会立即执行。

  • 缺点:

    • 无法获得变化前的值(oldVal)。

1、watch() 是懒执行的:当数据源发生变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。

2、watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watchwatchEffect 的回调函数会被立即执行(即 { immediate: true }

3、简单来说,watchEffect 是 Vue3 中的一个响应式 API,它允许你监听响应式状态的变化,并在其发生变化时触发副作用函数。这个特性非常有用,在我们需要对响应式数据进行操作的时候,我们可以在监听到变化后马上做出反应。

8、provide与inject

1、provide和inject是一对新的API,用于在父组件中提供数据,然后在子组件中注入数据。

2、provide:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。

3、inject:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。

//在父组件中,使用provide提供数据://name:定义提供 property的 name。//value :property的值。 setup(){provide('info',"值")}​//在子组件中,使用inject注入数据//name:接收 provide提供的属性名。//default:设置默认值,可以不写,是可选参数。setup(){const info = inject("info")inject('info',"设置默认值")return {info }}​//需要注意的是,provide和inject只能在setup函数中使用,而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据,可以使用一个共享的对象或者使用Vuex等状态管理库。

9.vue3新的生命周期钩子

Vue3中新增了两个生命周期钩子函数:

  1. beforeUnmount:在组件卸载之前调用,可以用来做一些清理工作,比如取消订阅、清除定时器等。

  2. onRenderTracked:在组件渲染时调用,可以用来监视组件的状态变化,比如打印组件的状态、记录组件的变化等。

除此之外,Vue3还对原有的生命周期钩子函数进行了优化和改进,比如:

  1. beforeCreatecreated合并为setup函数,使得组件的初始化更加简洁和灵活。

  2. beforeMountmounted合并为onMounted函数,使得组件的挂载更加高效和可控。

  3. beforeUpdateupdated合并为onUpdated函数,使得组件的更新更加精准和可靠。

  4. beforeDestroydestroyed合并为onUnmounted函数,使得组件的卸载更加安全和可靠。

执行最终顺序:

Vue3生命周期:setup

Vue2生命周期:beforeCreate

Vue2生命周期:created

Vue3生命周期:onBeforeMount

Vue2生命周期:beForeMount

Vue3生命周期:onMounted

Vue2生命周期:mounted

Vue3生命周期:onBeforeUpdate

Vue2生命周期:beforeUpdate

Vue3生命周期:onUpdated

Vue2生命周期:updated

Vue3生命周期:onBeforeUnmount

Vue2生命周期:beforeUnmount

Vue3生命周期:onUnmounted

Vue2生命周期:unmounted

10、自定义hook函数

1、以函数形式抽离一些可复用的方法像钩子一样挂着,随时可以引入和调用,实现高内聚低耦合的目标;

2、将可复用功能抽离为外部JS文件

3、函数名/文件名以use开头,形如:useXX

4、引用时将响应式变量或者方法显式解构暴露出来如:const {nameRef,Fn} = useXX()

(在setup函数解构出自定义hooks的变量和方法)

10.1、Vue3自定义Hooks和Vue2时代Mixin的关系:

Mixin不足 在 Vue 2 中,mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是,他们有几个问题: 1、Mixin 很容易发生冲突:因为每个 mixin 的 property 都被合并到同一个组件中,所以为了避免 property 名冲突,你仍然需要了解其他每个特性。 2、可重用性是有限的:我们不能向 mixin 传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性。

10.2、vue3自定义hooks和vue2中mixin的区别和比较?

1、Mixin难以追溯的方法与属性!Vue3自定义Hooks却可以

2、无法向Mixin传递参数来改变逻辑,但是Vue3自定义Hooks却可以:

3、Mixin同名变量会被覆盖,Vue3自定义Hook可以在引入的时候对同名变量重命名

11、toRef和toRefs

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,如果你知道 浅拷贝 的话那么这个引用就很好理解了,它复制的其实就是引用 + 响应式 ref 不加 s 和 加 s 的区别就是这样:

toRef: 复制 reactive 里的单个属性并转成 ref toRefs: 复制 reactive 里的所有属性并转成 ref

12、shallowReactive 与 shallowRef

1、shallowRef:只处理基本数据类型的响应式

2、shallowReactive:只处理对象最外层属性的响应式(浅响应式)

3、浅层作用的响应式数据处理:只处理第一层对象的数据,再往下嵌套的数据,操作数据是不起作用的

4、shallowReativeshallowRef在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。

13、readonly 与 shallowReadonly

readonlyshallowReadonly都是让响应式数据只具备读的能力,后者是浅层次的只读,也就是只对数据对象第一层起作用,深层次的嵌套,当时用shallowReadonl()处理时,深层次数据支持被修改

1、readonly: 让一个响应式数据变为只读的 (深只读),让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值的数据都不允许修改

2、接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理

3、shallowReadonly: 让一个响应式数据变为只读的 (浅只读),接收一个响应式数据,经过shallowreadonly的处理,变成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改

4、让一个响应式数据变为只读能力(浅只读)

14、toRaw与markRaw转换为普通数据和标记属性非响应式

toRaw,将响应式对象(由 reactive定义的响应式)转换为普通对象,然后赋值给新的变量(不影响原来的对象)

markRaw,标记一个对象,使其不能成为一个响应式对象。

toRaw: 作用: 将一个由 reactive 生成的响应式对象转为普通对象 使用场景:

1、用于读取响应式对象对应的普通对象

2、对这个普通对象的所有操作,不会引起页面更新。

markRaw: 作用:标记一个对象,使其永远不会再成为响应式对象 应用场景: 1、有些值不应被设置为响应式的,例如复杂的第三方类库等 2、当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

15、customRef 自定义ref使用

1、customRef:返回一个ref对象,可以显示的控制依赖追踪和触发响应

16、vue3中的父传子,子传父

1、父传子:

1、在父组件的子组件标签上通过:传到子组件的数据名=‘需要传递的数据’

2、子组件中通过props进行接收并在模板中使用

2、子传父:

1、子组件触发事件通过setup函数的第二个参数,context.emit来实现子传父

17、响应式数据的判断isRef、isReactive、isReadonly、isProxy

1、isRef:判断一个值是否为一个 ref 对象

2、isReactive:判断一个对象是否是由 reactive创建的响应式代理

3、isReadonly:判断一个对象是否是由 readonly 创建的只读代理

4、isProxy:判断一个对象是否是由 reactive 或 readonly 创建的代理

18、vue3中使用插槽?

1、插槽 slot 通常用于两个父子组件之间,最常见的应用就是我们使用一些 UI 组件库中的弹窗组件时,弹窗组件的内容是可以让我们自定义的,这就是使用了插槽的原理。

2、理解:

  • slotVue3 中的内置标签。

  • slot 相当于给子组件挖出了一个槽,可以用来填充内容。

  • 父组件中调用子组件时,子组件标签之间的内容元素就是要放置的内容,它会把 slot 标签替换掉

3、具名插槽:具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑,让它们呆在该呆的位置去。比如带 name 的插槽被称为具名插槽

4、作用域插槽:能够接受参数的插槽就被称为了作用域插槽

19、vue3中路由守卫onBeforeRouteLeave,onBeforeRouteUpdate?

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。

1、vue3 router中新增的onBeforeRouteLeave方法表示添加一个导航守卫,此方法会在组件将要离开的时候触发,类似于以前的beforeRouteLeave,但onBeforeRouteLeave可以在任何组件中使用,当组件被卸载的时候,导航守卫也将被移除。当我们使用router执行跳转或返回的时候,就会触发onBeforeRouteLeave方法。

2、 onBeforeRouteUpdate:添加一个导航守卫,在当前位置即将更新时触发。

import { onBeforeRouteUpdate } from "vue-router";onBeforeRouteUpdate(to => {console.log(to, "路由变动");});​

3、onBeforeRouteLeave:添加一个导航守卫,在当前位置的组件将要离开时触发。

//使用组件内守卫,对离开页面事件做一些操作,beforeRouteLeave(to, from, next){if(from.path=='/b'){ //当前页面路由next({replace: true,redirect: '/a'}); //目标路由 重定向}else {next()}}

20、vue3中使用vuex useStore?

1、在Vue3中,可以使用useStore函数来获取Vuex store实例。useStore函数是一个Vue Composition API函数,它可以在组件中使用。

使用`useStore`函数的步骤如下:​1. 在组件中导入`useStore`函数和`createStore`函数。​import { useStore, createStore } from 'vuex'​2. 创建一个Vuex store实例。​const store = createStore({ state: {count: 0}, mutations: {increment(state) { state.count++ }}})​3. 在组件中使用`useStore`函数来获取Vuex store实例。​export default { setup() {const store = useStore()return { store }}}​​4. 在组件中使用Vuex store实例。​ 

Count: {{ store.state.count }}

​import { useStore } from 'vuex'​export default { setup() {const store = useStore()return { store }}}

21、vue3中使用vue-router,useRoute和useRouter ?

1、在Vue.js中,useRouteuseRouter是Vue Router提供的两个钩子函数,用于在组件中访问路由信息和路由实例。

2、useRoute相当于是vue2中的this.$route

import { useRoute } from 'vue-router'export default {setup() { const route = useRoute() console.log(route.path) // 当前路由路径 return {route }}}

3、useRouter相当于是vue2中的this.$router,可以使用useRouter进行路由跳转

import { useRouter } from 'vue-router'export default {setup() { const router = useRouter() console.log(router.currentRoute.value.path) // 当前路由路径​ return {router }}}

4、区别:

useRoute函数返回当前路由的信息对象,包括路由路径、参数、查询参数等信息。

useRouter函数返回Vue Router的实例,我们可以在组件中使用useRouter函数来获取Vue Router的实例。

22、vue3单文件组件 script setup语法?

1、是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 语法,它具有更多优势

  • 更少的样板内容,更简洁的代码

  • 能够使用纯 Typescript 声明 props 和抛出事件。

  • 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。

  • 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

23、vue3中nextTick使用

1、nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它

2、异步使用:

import { nextTick } from 'vue'//异步使用setup() { const message = ref('Hello!') const changeMessage = async newMessage => {message.value = newMessageawait nextTick()console.log('Now DOM is updated') }}//基本使用nextTick(()=>{ ...})

24、原型绑定全局属性

1、通过config.globalProperties

2、通过provide注入:在应用实例上设置一个可以被注入到应用范围内所有组件中的值。当组件要使用应用提供的 provide 值时,必须用 inject 来接收

3、在main.js中全局引入,然后在组件中获取

25、vue3中使用keeplive ?

1、keep-alive是Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。

2、 包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们。

相似, 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。但是 keep-alive 会把其包裹的所有组件都缓存起来。

3、使用:

1、配置app.vue 使用v-if判断是否缓存

2、添加meta属性,在路由元信息中添加缓存的标识

3、实现页面的部分刷新

26、element-plus组件库vant3.0ant

27、vue3中废弃了过滤器1、过滤器:过滤器可以通俗理解成是一个特殊的方法,用来加工数据的

2、vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。所以就干脆把filter这方面的vue源码给删掉,这样的话,更加方便维护。