Web前端最全快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏）(1)，前端开发费用

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

a: 1,

first: {

b: 2,

second: {

c: 3

}

}

}

const state = reactive(obj)

console.log(state)

console.log(state.first)

console.log(state.first.second)

}

}

来看一下打印结果：

设想一下如果一个对象层级比较深，那么每一层都用 Proxy 包装后，对于性能是非常不友好的

接下来我们再来看看 shallowReactive

来看一下打印结果：

结果非常的明了了，只有第一层被 Proxy 处理了，也就是说只有修改第一层的值时，才会响应式更新，代码如下：

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change1”>改变1

<button @click=“change2”>改变2

来看一下具体过程：

首先我们点击了第二个按钮，改变了第二层的 b 和第三层的 c，虽然值发生了改变，但是视图却没有进行更新；

当我们点击了第一个按钮，改变了第一层的 a 时，整个视图进行了更新；

由此可说明，shallowReactive 监听了第一层属性的值，一旦发生改变，则更新视图

（8）shallowRef

---

这是一个浅层的 ref，与 shallowReactive 一样是拿来做性能优化的

shallowReactive 是监听对象第一层的数据变化用于驱动视图更新，那么 shallowRef 则是监听 .value 的值的变化来更新视图的

我们来看一下具体代码

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change1”>改变1

<button @click=“change2”>改变2

首先看一下被 shallowRef 包装过后是怎样的结构

然后再来看看改变其值会有什么变化

我们先点击了第二个按钮，发现数据确实被改变了，但是视图并没随之更新；

于是点击了第一个按钮，即将整个 .value 重新赋值了，视图就立马更新了

这么一看，未免也太过麻烦了，改个数据还要重新赋值，不要担心，此时我们可以用到另一个API，叫做 triggerRef ，调用它就可以立马更新视图，其接收一个参数 state ，即需要更新的 ref 对象

我们来使用一下

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change”>改变

我们来看一下具体过程

可以看到，我们没有给 .value 重新赋值，只是在修改值后，调用了 triggerRef 就实现了视图的更新

（9）toRaw

---

toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的

先来看一段代码

{{ state.name }}

{{ state.age }}

<button @click=“change”>改变

来看看具体过程

我们改变了 reactive 对象中的数据，于是看到原始数据 obj 和被 reactive 包装过的对象的值都发生了变化，由此我们可以看出，这两者是一个引用关系

那么此时我们就想了，那如果直接改变原始数据 obj 的值，会怎么样呢？答案是： reactive 的值也会跟着改变，但是视图不会更新

由此可见，当我们想修改数据，但不想让视图更新时，可以选择直接修改原始数据上的值，因此需要先获取到原始数据，我们可以使用 Vue3 提供的 toRaw 方法

toRaw 接收一个参数，即 ref 对象或 reactive 对象

上述代码就证明了 toRaw 方法从 reactive 对象中获取到的是原始数据，因此我们就可以很方便的通过修改原始数据的值而不更新视图来做一些性能优化了

注意： 补充一句，当 toRaw 方法接收的参数是 ref 对象时，需要加上 .value 才能获取到原始数据对象

（10）markRaw

---

markRaw 方法可以将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据

我们来看一下代码

{{ state.name }}

{{ state.age }}

<button @click=“change”>改变

我们来看一下在被 markRaw 方法处理过后的数据是否还能被 reactive 包装成响应式数据

从图中可以看到，即使我们修改了值也不会更新视图了，即没有实现数据响应式

（11）provide && inject

---

与 Vue2中的 provide 和 inject 作用相同，只不过在Vue3中需要手动从 vue 中导入

这里简单说明一下这两个方法的作用：

• provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值

• inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称

假设这有三个组件，分别是 A.vue 、B.vue 、C.vue，其中 B.vue 是 A.vue 的子组件，C.vue 是 B.vue 的子组件

// A.vue

// B.vue

// C.vue

（12）watch && watchEffect

---

watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作的，但用法上还是有所区别

watch：watch( source, cb, [options] )

参数说明：

• source：可以是表达式或函数，用于指定监听的依赖对象

• cb：依赖对象变化后执行的回调函数

• options：可参数，可以配置的属性有 immediate（立即触发回调函数）、deep（深度监听）

当监听 ref 类型时：

当监听 reactive 类型时：

当同时监听多个值时：

因为 watch 方法的第一个参数我们已经指定了监听的对象，因此当组件初始化时，不会执行第二个参数中的回调函数，若我们想让其初始化时就先执行一遍，可以在第三个参数对象中设置 immediate: true

watch 方法默认是渐层的监听我们指定的数据，例如如果监听的数据有多层嵌套，深层的数据变化不会触发监听的回调，若我们想要其对深层数据也进行监听，可以在第三个参数对象中设置 deep: true

补充： watch方法会返回一个stop方法，若想要停止监听，便可直接执行该stop函数

---

接下来再来聊聊 watchEffect，它与 watch 的区别主要有以下几点：

1. 不需要手动传入依赖

2. 每次初始化时会执行一次回调函数来自动获取依赖

3. 无法获取到原值，只能得到变化后的值

来看一下该方法如何使用：

从上述代码中可以看出，我们并没有像 watch 方法一样先给其传入一个依赖，而是直接指定了一个回调函数

当组件初始化时，将该回调函数执行一次，自动获取到需要检测的数据是 state.count 和 state.name

根据以上特征，我们可以自行选择使用哪一个监听器

（13）getCurrentInstance

---

我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过 this 来得到，而在Vue3中我们大量的代码都在 setup 函数中运行，并且在该函数中 this 指向的是 undefined，那么该如何获取到当前组件的实例呢？

这时可以用到另一个方法，即 getCurrentInstance

{{ num }}

我们来看一下其打印结果

因为 instance 包含的内容太多，所以没截完整，但是主要的内容都在图上了，我们重点来看一下 ctx 和 proxy，因为这两个才是我们想要的 this 的内容

可以看到 ctx 和 proxy 的内容十分类似，只是后者相对于前者外部包装了一层 proxy，由此可说明 proxy 是响应式的

（14）useStore

---

在Vue2中使用 Vuex，我们都是通过 this.$store 来与获取到Vuex实例，但上一部分说了原本Vue2中的 this 的获取方式不一样了，并且我们在Vue3的 getCurrentInstance().ctx 中也没有发现 $store 这个属性，那么如何获取到Vuex实例呢？这就要通过 vuex 中的一个方法了，即 useStore

// store 文件夹下的 index.js

import Vuex from ‘vuex’

const store = Vuex.createStore({

state: {

name: ‘前端印象’,

age: 22

},

mutations: {

……

},

……

})

// example.vue

我们来看一下打印结果

然后接下来就可以像之前一样正常使用 vuex 了

（15）获取标签元素

---

最后再补充一个 ref 另外的作用，那就是可以获取到标签元素或组件

在Vue2中，我们获取元素都是通过给元素一个 ref 属性，然后通过 this.$refs.xx 来访问的，但这在Vue3中已经不再适用了

接下来看看Vue3中是如何获取元素的吧

div元素