【Vue3实战】setup语法糖实战基础

【Vue3实战】setup语法糖实战基础_第1张图片

【Vue3实战】setup语法糖

  • 前言
  • 一、setup语法糖的优势
    • 1. 更清晰的逻辑组织
    • 2. 更好的类型推断和IDE支持
      • 无需导入
      • 自动注入组件的上下文
      • 更好的类型推断
    • 3. 更灵活的组合逻辑
    • 4. 更好的响应式能力
  • 二、Vue2和Vue3 setup语法糖的生命周期比较
    • 1. 生命周期
      • 创建(Creation)
      • 挂载(Mounting)
      • 更新(Updates)
      • 销毁(Destruction)
    • 2. Vue2和Vue3中生命周期的对应关系
    • 3. setup的执行时机
  • 三、setup语法糖注意事项
    • 尽量不要与Vue2.配置混用
    • setup函数中不能使用this
    • setup 接受两个参数
    • setup语法糖中和模板(Template)的双向绑定
    • setup函数只能是同步的不能是异步的
  • 结语

前言

由于在前端代码的构建当中,我们对代码的简洁易用的需求与日俱增

Vue3推出的setup语法糖

大幅的提高了我们构建代码的效率

这篇博客会在TypeScript的基础上,为大家说明setup语法糖的使用

传送门:【Vue3实战】TypeScript前端实战基础

如果对TypeScript语法不太了解的童鞋,可以访问上面链接的博客来学习TypeScript语法


一、setup语法糖的优势

Vue 3 的 Composition API 和 setup 语法糖带来了一些优势

相较于 Vue 2 的选项 API,它提供了更灵活和可组合的方式来组织组件逻辑。

以下是一些使用 Vue 3 setup 语法糖的好处,并与 Vue 2 进行比较的例子:

1. 更清晰的逻辑组织

Vue 2(使用选项 API):

<script lang="ts">
export default {
  // 数据
  data() {
    return {
      count: 0,
    };
  },
  // 计算属性
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  // 方法
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Vue 3(使用 setup 的传统写法,不建议):

<script lang="ts">
import {computed, ref} from 'vue';

export default {
  setup() {
    // 响应式数据
    const count = ref(0);

    // 计算属性
    const doubleCount = computed(():number => count.value * 2);

    // 方法
    const increment = (): void => {
      count.value++;
    };

    // 返回组件需要的数据和方法
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
</script>
// 相对于Vue2的写法,简化的并不明显

Vue 3(setup 语法糖写法,推荐!):

<script setup lang="ts">
//自动注入
import {computed, ref} from 'vue';

// 响应式数据
const count = ref(0);

// 计算属性
const doubleCount = computed((): number => count.value * 2);

// 方法
const increment = (): void => {
  count.value++;
};
</script>
//和Vue2以及setup传统写法相比,简化了50%的代码

你可能感兴趣的:(vue,typescript,vue,vue.js,javascript,前端,前端框架)