VUE3.0与2.0使用感受

vue3.0更新很久了，最近用到了，结合自己的使用vue2.0的经历，官方文档，以及几位大神的博客，说一下使用中的改变，水平有限，不对的地方欢迎指正，会持续更新
先说一个vue3的缺点，我发现vue3无法使用vue devtools
这个网址里包括文档，实例，生态，很全：https://vue3js.cn/

一、创建一个vue3的项目

使用vue官方脚手架创建项目，根据需要选择项目需要的配置，就可以获得一个vue3的项目了。安装vue3官方文档：https://v3.vuejs.org/guide/installation.html

创建成功后，和vue2一样，安装npm install，启动npm run serve，启动成功后的页面：这样看跟vue2也没太大差别，再去看看代码

二、setup

最直观的改变，是生命周期中多了个setup。从文章中看，setup是替换了之前生命周期中的create和oncreate。而且内部多出了之前钩子函数的一些变形。于是我做了几个实验。

实验一：用setup声明组件的数据和data有什么区别，代码如下：

编译报错了：说我重复定义了name和age两个字段，然后我分别在data和setup中返回这两个字段，页面都能正常显示。所以对于组件内部数据的定义，看目前的效果，写在哪都一样。另外，setup可以接收父组件传来的参数props，所以既然更新了，以后组件内部数据就用他吧。
实验二：setup中多了很多生命周期的变形函数是干啥的，文章说是在对应生命周期函数执行后执行，我试了一下：

至少目前为止，并没有像文章中说的那样，有这个函数，检查了我的vue是3.0.0,可能还没做这一块吧，所以对应的生命周期就用vue2的就好，试了一下全部支持。

三、vue3支持碎片fragment

这一点也算是以前的一个痛点吧，就是之前的组件模板，所有的标签必须有一个根标签，大多数使用div包裹，不然会报错。这样就导致组件嵌套多了，dom里都是div，虽然不是什么错，但是还是很别扭，这次终于改了，组件里想怎么写怎么写。不用受之前的限制。左边是3.0右边是2.0，对开发没什么大影响。

四、proxy代理

vue3.0这个是真的解决了开发中的大问题，vue2.0的时候，给对象新增属性，或者删除属性，无法触发页面更新，所以一定要在 初始化的时候，给将要用到的属性一个默认的初始值。而且对于数组的长度改变等也没有监听，新手开发起来，莫名其妙的数据变了，dom不跟着改变。
这次把这些问题全部解决了，以后再也不用担心初始值的问题，数组值改变的问题。具体proxy代理和之前的区别，请查看Object.defineProperty和proxy的区别。

五、关于打包

1、vue3.0的打包更快了，包更小了。没研究怎么实现的，不过是好事。
2、之前vue2.0习惯根据自己的项目写webpack.config.js重写打包。现在没有这个了，我配置了这个文件，没有执行，但是可以在vue.config.js中配置，目前用的不多，暂时够用，具体vue.config.js的配置，官方文档中也有。

刚刚开始使用3.0，从一个码农的角度说出了我的使用感受不同的地方，不对的地方，欢迎指正。