Vue3高级API的使用

news2024/11/23 22:04:57

介绍

在前面的内容中，我们已经学习到了很多 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>
      // 导入 customRef
      const { 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>
      // 导入 reactive
      const { 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))); // false
            console.log('reactive ' + isReactive(op)); // true
            msg.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>
      // 导入 reactive
      const { 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>

我们来看看控制台的信息