vueUse库Reactivity模块功能介绍及其使用方法--上篇

    import { ref, onMounted } from 'vue';
    import { computedAsync } from '@vueuse/core';
    
    export default {
      setup() {
    // 假设我们有一个用于存储用户数据的响应式 ref
    const userId = ref('123');
    
    // 使用 computedAsync 创建一个异步计算属性
    // 这里我们模拟一个异步的 API 请求来获取用户信息
    const userInfo = computedAsync(async () => {
      // 假设 fetchUser 是一个返回 Promise 的函数，用于获取用户信息
      // 这里用 setTimeout 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      return { name: 'Alice', age: 30 };
    }, {
      // 可选配置项，可以在这里设置初始值、错误处理等
      initialValue: null,
      onError(error) {
        console.error('Failed to fetch user info:', error);
      },
    });
    
    // 在组件挂载后，可以触发一些操作，比如根据 userId 更新用户信息
    onMounted(() => {
      // 注意：这里只是为了演示，实际上 userInfo 是自动更新的
      // 在实际应用中，你可能需要根据 userId 的变化来触发更新
    });
    
    // 返回给模板的响应式数据
    return {
      userId,
      userInfo,
    };
      },
    };

    <template>
      <div>
    <p v-if="userInfo.loading">Loading user info...</p>
    <p v-else-if="userInfo.value">
      User Name: {{ userInfo.value.name }}, Age: {{ userInfo.value.age }}
    </p>
    <p v-else>No user info available.</p>
      </div>
    </template>

    import { computed, ref } from 'vue';
    
    // 模拟的 computedEager 函数
    function computedEager(getter, options = {}) {
      // 创建一个计算属性
      const computedRef = computed(getter, options);
    
      // 立即访问计算属性以触发计算（模拟“急切”计算）
      // 注意：这实际上并不会改变计算属性的行为，只是立即触发了它
      // 在某些情况下，你可能不需要这一步，因为它会稍微影响性能
      // 但它确实可以表达“这个计算属性在组件初始化时就需要被计算”的意图
      computedRef.value; // 访问 value 属性以触发计算
    
      // 返回计算属性
      return computedRef;
    }
    
    // 使用示例
    export default {
      setup() {
    const count = ref(0);
    
    // 使用模拟的 computedEager 函数
    const doubledCount = computedEager(() => count.value * 2);
    
    // 注意：由于我们立即访问了 doubledCount.value，
    // 所以 doubledCount 的值在组件初始化时就已经被计算过了
    // 但这并不会改变 doubledCount 的响应式行为
    
    // 返回给模板的响应式数据
    return {
      count,
      doubledCount,
    };
      },
    };

    import { ref, computed, watchEffect } from 'vue';
    
    // 模拟的 computedWithControl 函数
    function computedWithControl(getter, { initialValue = null, onError = () => {} } = {}) {
      const result = ref(initialValue);
      const error = ref(null);
    
      // 使用 computed 创建一个计算属性，但这里不直接返回它
      const computedRef = computed(() => {
    try {
      return getter();
    } catch (e) {
      onError(e);
      error.value = e;
      // 可以选择抛出错误让 computed 停止重新计算，或者返回某个默认值
      return initialValue;
    }
      });
    
      // 使用 watchEffect 来同步 computedRef 的值到 result，以便我们可以控制何时更新和如何处理错误
      watchEffect(() => {
    if (error.value) {
      // 如果发生错误，可以选择不更新 result
      return;
    }
    result.value = computedRef.value;
      });
    
      // 返回包含结果和错误的响应式对象
      return { value: result, error };
    }
    
    // 使用示例
    export default {
      setup() {
    const { value: userInfo, error } = computedWithControl(() => {
      // 模拟异步请求或可能出错的计算
      if (Math.random() > 0.5) {
        throw new Error('Failed to fetch user info');
      }
      return { name: 'Alice', age: 30 };
    }, {
      initialValue: null,
      onError(e) {
        console.error('Error fetching user info:', e);
      },
    });
    
    // 可以在模板或逻辑中访问 userInfo.value 和 error
    
    return {
      userInfo,
      error,
    };
      },
    };

    import { ref, computed } from 'vue';
    
    // 假设的 extendRef 实现
    function extendRef(originalRef, extension = {}) {
      // 创建一个新的 ref，其值初始化为原始 ref 的值
      const extendedRef = ref(originalRef.value);
    
      // 如果 extension 是一个函数，则调用它，并将 extendedRef 和 originalRef 作为参数传递
      if (typeof extension === 'function') {
    extension(extendedRef, originalRef);
      }
    
      // 使用 watch 来同步原始 ref 和扩展 ref 的值
      watch(() => originalRef.value, (newValue) => {
    extendedRef.value = newValue;
      });
    
      // 如果有其他需要在 extendedRef 上添加的属性或方法，可以在这里进行
      // 例如：添加自定义的 getter/setter
      Object.keys(extension).forEach(key => {
    if (key !== 'watch' && key !== 'onMounted' && typeof extension[key] === 'function') {
      Object.defineProperty(extendedRef, key, {
        get() {
          return extension[key].bind(null, extendedRef.value, originalRef.value);
        },
        // 注意：这里通常不会设置 setter，除非有特定需求
      });
    }
      });
    
      // 返回扩展后的 ref
      return extendedRef;
    }
    
    // 注意：上面的实现是一个简化的示例，实际使用中可能需要更复杂的逻辑来处理各种情况

    <template>
      <div>
    <p>原始值: {{ originalCount }}</p>
    <p>扩展值: {{ extendedCount.value }}</p>
    <button @click="increment">增加</button>
      </div>
    </template>
    
    <script>
    import { ref } from 'vue';
    import { extendRef } from '@vueuse/core'; // 注意：这里假设 extendRef 是 vueUse 的一部分，实际情况可能不同
    
    export default {
      setup() {
    const originalCount = ref(0);
    
    // 使用 extendRef 扩展原始 ref
    const extendedCount = extendRef(originalCount, {
      // 假设我们想要添加一个自定义的 getter
      get doubled() {
        return this * 2;
      },
      // 注意：由于上述实现限制，这里的 getter 需要通过其他方式实现
      // 一种方法是在模板中直接使用计算属性或方法
    });
    
    // 由于 extendRef 的实际实现可能不允许直接在返回的 ref 上添加 getter，
    // 我们可以创建一个计算属性来代替
    const doubledCount = computed(() => extendedCount.value * 2);
    
    function increment() {
      originalCount.value++;
    }
    
    return {
      originalCount,
      extendedCount, // 注意：这里我们实际上可能只返回 doubledCount 而不是 extendedCount
      doubledCount,
      increment,
    };
      },
    };
    </script>
    
    <!-- 注意：上面的模板和脚本可能需要根据 extendRef 的实际实现进行调整 -->

    import { ref, reactive } from 'vue';
    
    // 假设的 reactify 函数
    function reactify(value) {
      if (typeof value === 'object' && value !== null) {
    // 如果传入的是对象或数组，使用 reactive
    return reactive(value);
      } else {
    // 否则，使用 ref
    return ref(value);
      }
    }
    
    // 注意：这个实现很简单，并且没有处理嵌套对象或数组内部可能需要的响应式转换

    <template>
      <div>
    <p>计数器: {{ counter.value }}</p>
    <p>用户信息: {{ userInfo.name }} - {{ userInfo.age }}</p>
    <button @click="increment">增加计数器</button>
      </div>
    </template>
    
    <script>
    import { reactify } from './path/to/your/reactify'; // 注意：这里假设 reactify 是在你的项目中定义的
    
    export default {
      setup() {
    // 初始的非响应式数据
    const initialCounter = 0;
    const initialUserInfo = { name: 'Alice', age: 30 };
    
    // 将非响应式数据转换为响应式
    const counter = reactify(initialCounter);
    const userInfo = reactify(initialUserInfo);
    
    // 注意：由于 counter 是通过 ref 创建的，我们需要访问其 .value 属性
    // 而 userInfo 是通过 reactive 创建的，我们可以直接访问其属性
    
    function increment() {
      counter.value++; // 响应式更新
    }
    
    // 注意：虽然我们可以直接修改 userInfo 的属性来触发响应式更新，
    // 但通常建议通过函数来修改状态以保持可预测性和可维护性
    
    return {
      counter,
      userInfo,
      increment,
    };
      },
    };
    </script>
    
    <!-- 注意：上面的模板和脚本可能需要根据你实际的 reactify 实现进行调整 -->

    import { reactive } from 'vue';
    
    // 自定义的 reactifyObject 函数
    function reactifyObject(obj) {
      return reactive(obj);
    }
    
    // 使用示例
    const myObject = { count: 0, name: 'Vue' };
    const reactiveObject = reactifyObject(myObject);
    
    // 现在 reactiveObject 是响应式的，你可以安全地在 Vue 组件中使用它
    // 并且当它的属性变化时，视图会自动更新

    <template>
      <div>
    <p>计数: {{ reactiveObject.count }}</p>
    <p>名称: {{ reactiveObject.name }}</p>
    <button @click="increment">增加计数</button>
      </div>
    </template>
    
    <script>
    import { ref, reactive } from 'vue'; // 注意：虽然这里导入了 reactive，但示例中使用的是自定义的 reactifyObject
    import { reactifyObject } from './path/to/your/reactifyObject'; // 假设你已经在某处定义了 reactifyObject
    
    export default {
      setup() {
    const myObject = { count: 0, name: 'VueUse' };
    const reactiveObject = reactifyObject(myObject); // 使用自定义的 reactifyObject
    
    function increment() {
      reactiveObject.count++; // 修改响应式对象的属性将触发视图更新
    }
    
    return {
      reactiveObject,
      increment,
    };
      },
    };
    </script>