Vue3高级API的使用

介绍

在前面的内容中，我们已经学习到了很多 Vue 3 的基础语法与一些常用的 API。

本节我们将介绍一些高级 API，带领大家进一步深入了解 Vue 3。

主要内容

●customRef()

●markRaw()

●toRaw()

●获取 DOM 元素

customRef 方法

customRef，从字面上直接理解，“自定义的 ref”，这个 API 是用来显式控制其依赖项的跟踪和更新触发的，它接收 track() 和 trigger() 作为参数。

我们可以使用这个 API 来控制视图更新时间，以及动态控制处理设置值，大家听起来可能有点迷茫，我们来看一个具体的例子吧。

现在我们新建一个名为 customRef.html 的文件，并写入下列代码：

<!--customRef.html--></head><body><div id="app"><button @click="getRef">触发 get</button><button @click="setRef">触发 set</button><p>ref : {{ msg }}</p></div><script>// 导入 customRefconst { customRef, createApp } = Vue;const App = {setup() {// 显式控制其依赖项跟踪和更新触发function TestcustomRef(value) {return customRef((track, trigger) => {return {get() {track();// 触发 get 后，控制台打印信息console.log('get' + value);return value;},set(newValue) {value = newValue + ' set';// 触发 set 后，控制台打印信息console.log('set' + value);// 可以通过这一步控制视图更新时间setTimeout(() => {trigger();}, 1000);},};});}const msg = TestcustomRef('原始值');const setRef = () => {msg.value = '更新设置值';};const getRef = () => {console.log(msg.value);};return {setRef,getRef,msg,};},};createApp(App).mount('#app');</script></body>
</html>

我们打开页面，同时打开控制台，来直观地感受一下这个 API 的使用效果

我们看到页面打开的同时，就会触发 get()，在触发 set() 后，视图中的 msg 会在 trigger() 触发后变化，并且我们可以发现，变化后 msg 显示出来的值 set() 中重新定义的。

markRaw() 方法

markRaw() 方法标记一个对象，使其永远不会被转换为代理（Proxy），而是返回对象本身。

我们新建一个名为 markRaw.html 的文件，并在该文件中写入以下代码：

<!-- markRaw.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>markRaw</title><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><script src="https://unpkg.com/vue@3"></script></head><body><div id="app"><p>{{ msg }}</p><p>{{ op }}</p><button @click="setmsg">set</button></div><script>// 导入 reactiveconst { isReactive, createApp, markRaw, reactive } = Vue;const App = {setup() {const msg = markRaw({value: 'markraw',});// 作为参照const op = reactive({value: 'reactive',});const setmsg = () => {console.log('markRaw ' + isReactive(reactive(msg))); // falseconsole.log('reactive ' + isReactive(op)); // truemsg.value = '';console.log(msg); // 一个普通对象console.log(op); // 一个经过 Proxy 加工的响应式对象};return {msg,op,setmsg,};},};createApp(App).mount('#app');</script></body>
</html>

isReactive()：当我们想要判断一个某个值是否为 reactive() 创建出来的对象，我们可以使用 isReative() 函数。

打开页面，效果如下：

toRaw() 方法

这个 API 可以使一个 proxy 只读对象或者 reactive 对象还原为普通对象，它可用于临时读取，而不会引起代理访问/跟踪开销或写入而不会触发更改。

我们来看看官网给出的代码：

toRaw() 方法
这个 API 可以使一个 proxy 只读对象或者 reactive 对象还原为普通对象，它可用于临时读取，而不会引起代理访问/跟踪开销或写入而不会触发更改。

我们来看看官网给出的代码：

但是官网也贴心的给出了提醒：不建议持有对原始对象的持久性引用，需要我们谨慎使用这个 API。

获取 DOM 元素

在 Vue 3 中我们通过提供的 ref 方法定义与页面元素上 ref 相对应的一个响应式对象，同时传入一个 null。

我们创建一个名为 dom.html 的文件。

<!-- dom.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>dom</title><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><!-- 通过 cdn 方式引入 vue.js 的最新版本 --><script src="https://unpkg.com/vue@3"></script></head><body><div id="app"><p ref="p">获取DOM</p></div><script>// 导入 reactiveconst { createApp, ref, onMounted } = Vue;const App = {setup() {const p = ref(null);onMounted(() => {// 初始渲染后，DOM 元素将被分配给 ref// p.value 是原生 DOM 对象console.log(p.value);});return {p,};},};createApp(App).mount('#app');</script></body>
</html>

我们来看看控制台的信息