Vue3 | 铸鼎

Vue3简介

Vue3中对比Vue2最大的更新亮点就是组合式API(Composition API),但也保留了选项式API(Options API)

组合式&选项式

选项式 API：

选项式 API 是 Vue 2 中使用的传统方式，它将组件的逻辑分散在不同的选项中，如 data、computed、methods、watch 等。
使用选项式 API 编写的组件代码相对较为分散，随着组件的复杂度增加，代码可读性和维护性可能会下降。
选项式 API 使用了基于对象的方式来定义组件，将数据和方法都声明在组件实例的选项中。
这种方式对于熟悉 Vue 2 的开发者来说更加熟悉和容易上手。

组合式 API：

组合式 API 是 Vue 3 中引入的一种新的组件编写方式，基于函数的组合，通过 setup 函数来组织组件的逻辑。
使用组合式 API 可以将相关的逻辑代码放在同一个函数内部，使代码更加集中和清晰，提高了代码的可维护性。
组合式 API 使用了基于函数的方式来定义组件，setup 函数返回一个对象，对象中包含组件的数据、方法等。
这种方式更加灵活，可以使用任何 JavaScript 语法和特性，更方便地进行逻辑的组合和重用。
组合式 API 还提供了强大的响应式 API，如 ref、reactive 、watchEffect 等。可以更方便地管理和追踪组件的状态。

示例

组合式API

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    function showMessage() {
      alert(message.value);
    }

    onMounted(() => {
      console.log('Component mounted');
    });

    watch(message, (newValue, oldValue) => {
      console.log('Message changed:', newValue, oldValue);
    });

    return {
      message,
      reversedMessage,
      showMessage,
    };
  },
};
</script>

选项式API

<template>
  <div>{{ message }}</div>
</template>

<script>
import { defineComponent, ref, computed, watch, onMounted } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello, Vue 3!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  methods: {
    showMessage() {
      alert(this.message);
    },
  },
  mounted() {
    console.log('Component mounted');
  },
});
</script>

疑问：

Vue3中的选项式是为了兼容Vue2的选项式语法吗?

Vue 3 的选项式 API的设计目标之一是为了兼容 Vue 2 的选项式语法。Vue 3 的开发团队希望让现有的 Vue 2 项目能够平滑地迁移到 Vue 3，因此保留了选项式 API，并且在语法上尽量保持了兼容性。

向下兼容Vue2

Vue 3 是向后兼容 Vue 2 的语法和特性,大多数 Vue 2 的代码可以直接在 Vue 3 中使用，而无需进行重写或更改。这使得迁移到 Vue 3 相对容易，特别是对于现有的 Vue 2 项目。

支持TypeScript

组合式 setup

setup作为Vue3组合式API入口，有两种写法：

setup()

<script setup>语法糖

共性

使用 import { ref } from 'vue' 导入 ref 函数。
使用 const 声明变量，并使用 ref() 创建一个响应式的引用。
使用 function 声明方法。
无需重复编写许多的模板代码和导入组合式 API 函数的代码，逻辑和状态都可以在一个地方进行定义和组织。

疑问

const声明？

Vue 提供的响应式 API，需要在组件中处理参数的变化时，可以使用 ref 或 reactive 函数来创建响应式的变量，通过访问 .value 属性来获取和修改参数的。

const类型优势？

优化性能：const 类型可以帮助 Vue 在编译时通过将它们标记为常量，ue 可以在编译阶段进行静态分析，并对组件的依赖关系进行更精确的跟踪，从而可以更有效地进行模板编译和响应式系统的优化，提高应用程序的性能。
可维护性：其他开发人员可以安全地假设这些函数和变量的值不会在组件的生命周期内发生变化。这样可以减少意外的副作用和不必要的复杂性。
更好的类型推断：使用 TypeScript 等类型检查工具时，将函数和变量声明为 const 类型可以帮助获得更好的类型推断。类型检查器可以更准确地推断出函数的返回值类型和变量的类型，提供更好的代码补全和类型检查。

<script setup>

<script setup>语法糖其实就是为了简化setup()入口，如果使用此方式作为组合式API入口，

特性

不再需要 export default和setup()，直接在 <script setup> 中编写代码。
无需在 setup() 函数中显式地编写 return 语句。Vue 3 将根据 <script setup> 中的代码自动推断出组件选项，并将其与模板进行关联。
符合人体工程学，减少样板代码，提供更直观和一致的编码风格，不用在变量（状态）和函数（逻辑）之间翻来翻去。

setup()

setup() 是 Composition API 的核心函数，它为我们提供了一个地方来编写组件的逻辑代码，提供更清晰、灵活和可维护的代码。

更清晰的逻辑组织：所有的逻辑代码都位于同一个函数中，而不是散落在不同的生命周期钩子函数中。这使得理解和维护代码更加方便。
更灵活的组合式函数：可以在 setup() 中使用任何 JavaScript 的语法和特性，例如条件语句、循环、函数等。更自由地组合和重用代码逻辑。
访问响应式状态和函数：可以通过引入响应式 API（如 ref、reactive 等）来创建响应式的状态和函数。这样可以让组件的数据和行为与模板进行绑定，并自动追踪依赖关系。
更好的类型推导和提示：可以根据 setup() 函数中的代码来推导出响应式状态和函数的类型，从而提供更准确的代码补全和类型检查。

生命周期

示例

Vue2选项式

<script>
export default {
  mounted() {
    // 组件挂载后的操作
    console.log('Component mounted');
  },
};
</script>

Vue3组合式

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 组件挂载后的操作
      console.log('Component mounted');
    });
  },
};
</script>