不要用vue2的思维写vue3

开始 

• 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: [],
      
    });

    
    const testA = () => {

    }

    

    
    const testB = () => {

    }

    

    
    const testC = () => {

    }

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

• 其实可以这样写

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

export default {
  name: 'test',
  setup() {
    const test1 = ref('');
    
    const testA = () => {
      test1.value = 'xxxx';
    };

    

    const test2 = reactive({ a: '1212' });
    
    const testB = () => {
      test2.a = 'xxxx';
      
    };

    
    

    
    const test3 = ref([]);
    
    const testC = () => {
      test3.value.push('121');
    };

    
    
    return {
      test1,
      testA,
      testB,
      testC
    };
  }
};
</script>

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

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

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

• 虽然官网文档已经做出的警告说明，但是很多人依然会如下这么写

• 是真的不必如此

<script>
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
  name: 'test',
  props: {
    obj1: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  setup(props, { emit, slot }) {
    
    
    const route = useRoute();
    
    const router = useRouter();

    
    const store = useStore();
    const testObj = computed(() => store.state.testObj);

    
    const a = props.obj1;

    
    emit('xxxx', { a: 1 });

    
    slot.default && slot.default();
    
    
    
    const pDomRef = ref()
    
    
    pDomRef.value.xxx
    
    
    
    return {
      route,
      router,
      testObj,
      pDomRef
    };
  }
};
</script>

关于学习vue3 

• 如果会vue2 那么vue3上手难度并不算大，仔细读一遍官网跟着例子敲一敲，动手实践一下，基本上就算入门了。剩下的就是在不断的实践中进步了。

• 看视频 or 看文档，作者最初看了一些vue3的教学视频当然是看完文档后，最后收获并不算多大部分都是文档中的东西，不过是添加了一些自己的理解。这个每个人情况不同不能一概而论。

• 当你入门以后就可以看一些项目代码了，来实践了，没有项目怎么办？vue-devui[2] 能收获多少就看自己了。

• 看完文档也有了一定的实践，那么就买一本 《vuejs设计与实现》来读。站内的一些关于vue3实现的文章其实就是书里的内容。

写在后边

• 上边这两个都是作者最初开始写的时候犯的错误，问题不大，但也是问题。

• 欢迎各位大佬友好留言交流。

来自-唐诗，欢迎大家关注！

在线整理的确实很好，对文章进行了一个汇总整理，在线备战面试、刷题指南，拿走不谢，要学会站在别人的肩膀上提升自己点击这里-->

最后:

 如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。