社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > Vue全面升级指南：Composition API深度探索

Vue全面升级指南：Composition API深度探索

Susan Sarandon
发布： 2024-12-06 07:55:12
原创
461 人浏览过

Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

  • Composition API的核心概念和功能
    • setup() 函数：
    • 参考和反应：
    • 计算属性和侦听器：
    • 组合函数
    • 生命周期挂钩：
  • Composition API 编写组件
  • 从选项 API 迁移到组合 API
    • 组件结构
    • 依赖注入
    • 模板重构

Vue 3.x 全面升级，引入了 Composition API，相对于 Vue 2.x 传统的 Options API 来说是一个重大改进。它提供了一种更灵活、更模块化的代码组织方式。

Composition API的核心概念和功能

设置（）函数：

Vue 3中的核心入口点，用于设置组件的状态和逻辑，在beforeCreate钩子之后、create钩子之前执行。它替换了原来在数据、方法等选项中定义的内容。

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
登录后复制
登录后复制

参考和反应：

用于创建响应式数据，ref用于创建基本类型的响应式数据，reactive用于对象和数组的响应式代理。

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
登录后复制
登录后复制

计算属性和侦听器：

compated 用于创建计算属性，仅当依赖项更改时才重新计算。

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
登录后复制
登录后复制

watch 用于观察响应数据的变化，并在发生变化时执行回调。

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
登录后复制
登录后复制

组合函数

Composition API 鼓励创建可重用的组合函数。

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
登录后复制
登录后复制

生命周期挂钩：

Vue 3 中的生命周期钩子不再直接在 setup() 内部使用，而是通过新的生命周期钩子函数，例如 onBeforeMount 和 onMounted。

1。 onBeforeMount：该钩子在组件挂载到 DOM 之前调用。这类似于 Vue 2.x 中的 beforeMount 生命周期钩子。

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
登录后复制
登录后复制

2。 onMounted：组件挂载到 DOM 后立即调用。相当于Vue 2.x中挂载。

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
登录后复制
登录后复制

3。 onBeforeUpdate：在组件数据更新之前、DOM 更新开始之前调用。类似于 Vue 2.x 的 beforeUpdate。

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
登录后复制
登录后复制

4。 onUpdated：组件数据变化引起的DOM更新完成后调用。相当于Vue 2.x中更新。

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
登录后复制
登录后复制

5。 onBeforeUnmount：在组件卸载之前调用。类似于 Vue 2.x 中的 beforeDestroy。

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
登录后复制
登录后复制

6。 onUnmounted：组件卸载后调用。相当于Vue 2.x中的destroyed。

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
登录后复制
登录后复制

7。 onActivated：仅当组件用 包裹时调用已激活。

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
登录后复制
登录后复制

8。 onDeactivated：仅当组件用 包裹时调用已停用。

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
登录后复制
登录后复制

Composition API 编写组件

  • 创建响应式数据：使用 ref 和reactive 创建响应式变量。
  • 计算属性：使用计算函数创建计算属性。
  • 响应式函数：使用 toRefs() 和 toRef() 将对象属性转换为响应式。
  • 监听器：使用watch或watchEffect监听数据变化。 
// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
登录后复制
登录后复制

  • 创建响应式数据：使用响应式创建包含 cityInput、城市和天气的响应式对象。 ref 也可以用于基本类型的响应式数据，但在这种场景下，reactive 更适合管理多个状态。

  • 计算属性：currentCity 计算属性直接返回 state.cityInput 的值。虽然在本例中直接使用 v-model="cityInput" 可能更直观，但它展示了如何定义计算属性。

  • 响应式函数：使用toRefs将状态对象的属性转换为独立的响应式引用，以便在模板中直接绑定。这主要展示了响应式数据的使用，而不是转换函数本身，因为在模板中直接解构赋值（如 const { cityInput } = state;）就足够了。

  • 监听器：使用watch监听cityInput的变化，并在每次input变化时清除天气状态，以便下次查询。

从选项 API 迁移到组合 API

组件结构

将状态、方法和逻辑分离到单独的函数中。在Options API中，我们通常会在组件选项中定义数据、方法、计算等。在 Composition API 中，这些逻辑被分成单独的函数。例如：

选项 API：

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
登录后复制
登录后复制

合成 API：

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
登录后复制
登录后复制

依赖注入

使用提供和注入。在Options API中，我们使用provide和inject来传递数据。在 Composition API 中，此过程保持不变：

选项 API：

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
登录后复制
登录后复制

合成 API：

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
登录后复制
登录后复制

模板重构

将绑定的属性和方法从此转换为直接引用。

以上是Vue全面升级指南：Composition API深度探索的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：dev.to
上一篇：Await Promise.all() 与多个 Await：什么时候应该使用哪个？ 下一篇：如何使用 JavaScript 的文本框中的 Enter 键触发按钮单击？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2165
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2313
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
1950
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
1826
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1879
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板