初识vue3.x

vue3.x已成为稳定版本，也就意味着vue3.x将比vue2.x更多的在后续的项目中被使用，最近也开始学习vue3.x，感觉好像比别人学的晚了一点，不过没有关系，现在开始学习永远是最好的时间。

看了不少vue3.x的文章，大致都是说的vue3.x与vue2.x的主要区别。官网文档还没时间细看，后续在学习中会逐步发布vue3.x的相关文章，那么先来看看vue3.x与vue2.x的大致明显区别吧

1. vue3.x可以兼容vue2.x的options API写法，也就是vue3.x开发的时候可以和vue2.x一样

2. vue3.x带来了全新的composition API，生命周期大致相同，只是有的名称换了

<script>
export default {
  // props，context是可选参数，props接收父组件传值，context则是接收上下文
  setup(props，context) {
    ...
  }
}
</script>

componsition API就是使用了全新的setup，导致其他的东西使用的时候就需要改变了，setup中也不能使用this了，setup可以接收两个参数，第一个参数props，第二个参数context

3. vue3.x中使用的变量和方法都需要return出去才能被使用

<script>
export default {
  setup() {
    const name = 'myname'；
    return { name };
  }
}
</script>

4. vue3.x中还有全新的语法糖<script setup>

<script setup>
  // 使用这个语法糖使用变量和方法就不需要再return了,直接可以使用
  const name = 'myname';
</script>

5. 响应式数据改变了，使用了setup，对应的响应式数据定义方式也随之改变了，可以看看vue3.x中的ref，reactive，toRef， toRefs的相关文章

6. 使用过vue2.x+Ts的朋友们就不需要再那么繁琐了，vue3.x可以支持Typescript，这部分还没去看，有兴趣的朋友可以自行百度以下

目前总结就这么多了，后续再实践学习中还会陆续发布新的关于vue3.x的文章，有需要的朋友可以给个关注~