Vue3.0学习 - 第十节，customRef，如何使用ref获取元素

电玩女神 2023-01-17 15:49 80阅读 0赞

# `customRef` #

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 **`track`** 和 **`trigger`** 函数作为参数，并且应该返回一个带有 `get` 和 `set` 的对象。

代码块：

示例：

<template>
      <div>
        <p>{
       { age }}</p>
        <button @click="fun">click</button>
      </div>
    </template>
    
    <script>
    import { ref, customRef } from "vue";
    function myRef(value) {
      return customRef((track, trigger) => {
        return {
          get() {
            track(); //告诉Vue这个数据时需要追踪变化的
            console.log("getvalue", value);
            return value;
          },
          set(newValue) {
            console.log("set", newValue);
            value = newValue;
            trigger(); //告诉Vue触发界面更新
          },
        };
      });
    }
    export default {
      setup() {
        let age = myRef(18);
        function fun() {
          age.value++;
          console.log(age);
        }
        return { age, fun };
      },
      methods: {},
    };
    </script>

调用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

点击按钮click:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

# 考虑一个通常情况下会出现的场景，我们需要读取另一个文件里的数据，而这个过程是异步的。 #

首先是数据，它放在 public 文件夹里：data.json

[
        {
            "id": 1,
            "name": "鲁班"
        },
        {
            "id": 2,
            "name": "张三"
        },
        {
            "id": 3,
            "name": "李四"
        },
        {
            "id": 4,
            "name": "玩儿"
        }
    ]

如果我们并未使用 `customRef` 来执行自定义:

<template>
    <ul>
      <li v-for="item in obj" :key="item.id">
        {
       {item.id}} - {
       {item.name}}
      </li>
    </ul>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      name: 'App',
      setup() {
        // 创建一个空数组 ref
        const obj = ref([]);
        // 使用 fetch 异步获取文件内容
        fetch('../public/data.json')
          .then((res) => {
            return res.json();
          }).then((data) => {
            console.log(data);
            obj.value = data;
          }).catch((err) => {
            console.log(err);
          })
    
        return {
          obj,
        };
      }
    }
    </script>

如果我们使用**customRef ：**

<template>
      <div>
        <p>{
       { age }}</p>
        
      </div>
    </template>
    
    <script>
    import { ref, customRef } from "vue";
    // function myRef(value) {
    //   return customRef((track, trigger) => {
    //     return {
    //       get() {
    //         track(); //告诉Vue这个数据时需要追踪变化的
    //         console.log("getvalue", value);
    //         return value;
    //       },
    //       set(newValue) {
    //         console.log("set", newValue);
    //         value = newValue;
    //         trigger(); //告诉Vue触发界面更新
    //       },
    //     };
    //   });
    // }
    
    function myRef(value) {
      return customRef((track, trigger) => {
        fetch(value)
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            console.log(data);
            value = data;
            trigger();
          })
          .catch((err) => {
            console.log(err);
          });
        return {
          get() {
            track(); //告诉Vue这个数据时需要追踪变化的
            // 注意点：
            // 不能在get中发送网络请求
            // 渲染界面 -> 调用get方法 -> 发送网络请求
            // 保存数据 -> 更新界面 -> 调用get
            console.log("getvalue", value);
            return value;
          },
          set(newValue) {
            console.log("set", newValue);
            value = newValue;
            trigger(); //告诉Vue触发界面更新
          },
        };
      });
    }
    export default {
        // setup 只能是一个同步函数，不能是一个异步函数
      setup() {
        let age = myRef("../public/data.json");
        // function fun() {
        //   age.value++;
        //   console.log(age);
        // }
    
        return { age };
      },
      methods: {},
    };
    </script>

在这个方案中，我将 获取数据的方案 封装存储在 自定义`ref` 中，在初始化的时候，会在获取数据之后执行 `trigger` 进行视图层的变化。

**注意点：**

*  **不能在get中发送网络请求**
 *  **渲染界面 -> 调用get方法 -> 发送网络请求**
 *  **保存数据 -> 更新界面 -> 调用get**

附录：

<template>
      <div>
        <p>{
       { age }}</p>
        <button @click="fun">click</button>
      </div>
    </template>
    
    <script>
    import { ref, customRef } from "vue";
    // function myRef(value) {
    //   return customRef((track, trigger) => {
    //     return {
    //       get() {
    //         track(); //告诉Vue这个数据时需要追踪变化的
    //         console.log("getvalue", value);
    //         return value;
    //       },
    //       set(newValue) {
    //         console.log("set", newValue);
    //         value = newValue;
    //         trigger(); //告诉Vue触发界面更新
    //       },
    //     };
    //   });
    // }
    
    function myRef(value) {
      return customRef((track, trigger) => {
        function getData() {
          fetch(value)
            .then((res) => {
              return res.json();
            })
            .then((data) => {
              console.log(data);
              value = data;
              trigger();
            })
            .catch((err) => {
              console.log(err);
            });
        }
        getData();
        return {
          get() {
            track(); //告诉Vue这个数据时需要追踪变化的
            // 注意点：
            // 不能在get中发送网络请求
            // 渲染界面 -> 调用get方法 -> 发送网络请求
            // 保存数据 -> 更新界面 -> 调用get
            console.log("getvalue", value);
            return value;
          },
          set(newValue) {
            console.log("set", newValue);
            value = newValue;
            getData(); //告诉Vue触发界面更新
          },
        };
      });
    }
    export default {
      // setup 只能是一个同步函数，不能是一个异步函数
      setup() {
        let age = myRef("../public/data1.json");
        function fun() {
          age.value = "../public/data.json";
          console.log(age);
        }
    
        return { age, fun };
      },
      methods: {},
    };
    </script>

**而在设置新值的时候，再次触发获取数据的方案，从而实现复杂的双向数据绑定。**

**点击 `button` ，可以改变数据，并实现视图层的变化。**

# 通过ref获取元素 #

在Vue2中我们可以使用 this.$refs.refName 获取元素，代替js传统的DOM行为

在 `Vue3` 的组合 API 中，采取了新的方案来执行对应的 `ref` 标签属性获取。过去我们采用的是 `this.$refs` 的方案，现在，要首先创建 `ref` 对象，然后再将这个 `ref` 对象创建出来，以实现监听。

<template>
      <div>
        <p ref="age">123123</p>
      </div>
    </template>
    
    <script>
    import { ref, onMounted } from "vue";
    export default {
      setup() {
        let age = ref(null);
        console.log("age", age.value);
        return { age };
      },
      mounted() {
        //   console.log(this.$refs.box)
      },
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

之前我们就提过，由于setup()执行在beforecreate之前执行，此时打印出来是null

所以我们不能直接在 `setup` 函数中初始化 `box` 标签。

如果存在有初始化或类似的操作，需要借用 生命周期函数，而在 `setup` 中，要寻找生命周期需要用到 `on+生命周期` 的 `api:`

<table> 
 <thead> 
  <tr> 
   <th>选项 API</th> 
   <th>Hook inside inside&nbsp;<code>setup</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>beforeCreate</code></td> 
   <td>Not needed*</td> 
  </tr> 
  <tr> 
   <td><code>created</code></td> 
   <td>Not needed*</td> 
  </tr> 
  <tr> 
   <td><code>beforeMount</code></td> 
   <td><code>onBeforeMount</code></td> 
  </tr> 
  <tr> 
   <td><code>mounted</code></td> 
   <td><code>onMounted</code></td> 
  </tr> 
  <tr> 
   <td><code>beforeUpdate</code></td> 
   <td><code>onBeforeUpdate</code></td> 
  </tr> 
  <tr> 
   <td><code>updated</code></td> 
   <td><code>onUpdated</code></td> 
  </tr> 
  <tr> 
   <td><code>beforeUnmount</code></td> 
   <td><code>onBeforeUnmount</code></td> 
  </tr> 
  <tr> 
   <td><code>unmounted</code></td> 
   <td><code>onUnmounted</code></td> 
  </tr> 
  <tr> 
   <td><code>errorCaptured</code></td> 
   <td><code>onErrorCaptured</code></td> 
  </tr> 
  <tr> 
   <td><code>renderTracked</code></td> 
   <td><code>onRenderTracked</code></td> 
  </tr> 
  <tr> 
   <td><code>renderTriggered</code></td> 
   <td><code>onRenderTriggered</code></td> 
  </tr> 
 </tbody> 
</table>

<template>
      <div>
        <p ref="age">123123</p>
      </div>
    </template>
    
    <script>
    import { ref, onMounted } from "vue";
    
    export default {
      setup() {
        let age = ref(null);
    // 由于 template 中的 div 属性 ref 引用了一个对象 box，因此 box 将与这个 div 执行绑定。
    // 但由于 setup 执行时期，还未创建实际的 div，所以如果要进行与 box 的交互，必须在生命周期中间执行获取。
        // onMounted() 中的行为会在声明周期 mounted 中执行。
        onMounted(() => {
          console.log("age1", age.value);
        });
        console.log("age", age.value);
    
        return { age };
      },
      mounted() {
        //   console.log(this.$refs.box)
      },
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

我们成功获取到了 `box` 指定的 `div` 标签。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221021/2377b3b345194872a0cb1bd792384d9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/f00e2ebe6aa14fada49342e3f03dae7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/ddc0598e8f4a4a8691a58d63f99f2fb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221021/b42570989bec4003b07c57d13593b647.png