持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，[点击查看活动详情](juejin.cn/post/709970… "juejin.cn/post/709970…

开始

• vue3发布没多久就迫不及待的写了个todolist 点击预览,当时也没有太多想法，只是感觉 composition api 比较新奇，仅此而已。
• 在不断使用中，也发现很多设计都是符合直觉，你觉得它应该这样它就是这样。简而言之好用！
• 之后看了一些关于vue3的分享，印象最深的其实是一张图

不要用2.x 的思维写3.x

• 很多时候不是写不出好代码，而是没有见过好代码。写代码的本质其实是模仿，没有见过有何谈模仿呢？
• 以下是一些很常见的例子

不要在 setup 定义一个 state

• 这里说的并不是不能定义一个 state 的变量，而是说不要定义一个用来存储所有数据的 state，3.x 不需要一个 存储所有数据的 data。为什么呢？
• 这个其实很简单，处理某项功能的逻辑应该写在一起。逻辑不会混在一起，变量也不应该混在一起。

<script>
import { reactive ,toRefs} from 'vue';

export default {
  name: 'test',
  setup() {
    const state = reactive({
      test1: '',
      test2: {},
      test3: [],
      //  ... 其他逻辑的处理变量
    });

    // a功能逻辑
    const testA = () => {

    }

    // ... 其他一些处理逻辑

    // b功能逻辑
    const testB = () => {

    }

    // ... 其他一些处理逻辑

    // c功能逻辑
    const testC = () => {

    }

    return {
      ...toRefs(state),
      testA,
      testB,
      testC,
    }
  }
};
</script>

• 其实可以这样写

<script>
import { reactive, ref } from 'vue';

export default {
  name: 'test',
  setup() {
    const test1 = ref('');
    // a功能逻辑
    const testA = () => {
      test1.value = 'xxxx';
    };

    // ... 其他一些处理逻辑

    const test2 = reactive({ a: '1212' });
    // b功能逻辑
    const testB = () => {
      test2.a = 'xxxx';
      // 也可以这样群不替换 Object.assign(test2, {a: '112121'})
    };

    // 其他一些变量
    // ... 其他一些处理逻辑

    // 当下边的逻辑不需要了 直接删除这一块就可以，不用再去找相关逻辑
    const test3 = ref([]);
    // c功能逻辑
    const testC = () => {
      test3.value.push('121');
    };

    // 需要什么就导出什么
    // 使用 script setup 的话这里会更简单。
    return {
      test1,
      testA,
      testB,
      testC
    };
  }
};
</script>

• 不管如何去组织代码，目的都是易阅读、易维护为出发点。

不要把 getCurrentInstance 当成2.x的 this 来用

• getCurrentInstance 不是用来代替 2.x 的this的