『引言』

🌟2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王），开发周期长达两年多。

『vue3优势』

3比2要快将近两倍。
3加入了TS以及对PWA的支持。
3没有beforeCreate、created，用setup代替。
单独功能可以抽离，比如watch、component。
没有眼花缭乱的this。
强大的proxy实现响应式。
响应式方面，性能得到了很大的提升、不用初始化的时候就递归遍历属性。
3的组合式API可以和2的optionAPI同时存在。
代码更利于维护和封装。

『项目创建』

『vue-cli创建』

🌟选择 vue3.0 生成项目即可。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create <project-name>
## 启动
cd <project-name>
npm run serve

『使用vite创建』

🌟通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

『vscode插件说明』

vue2中需要安装插件vetur，可以实现组件高亮。但是vue3的一些语法在vetur中报错。
vue3中需要安装插件volar，提供了更加强大的功能。
所以，使用功能vue3，需要禁用或卸载vetur插件，安装volar插件。

『vue3.0 响应式原理』

🌟vue2.x 通过 Object.defineProperty()实现的响应式原理存在以下问题。

新增和删除属性, 监听不到变化，从而不是响应式数据，页面也不会改变。
直接通过下标修改数组，同样也监听不到, 界面不会自动更新。

『proxy 简介』

🌟Proxy 可以理解成，在目标对象之前设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。

🌟因此提供了一种机制，可以对外界的访问进行过滤和改写，接收两个参数。

🌟var proxy = new Proxy(target, handler); target 参数表示所要拦截的目标对象，handler 参数也是一个对象，用来定制拦截行为。

new Proxy(data, { 
    // 拦截读取属性值
    get (target, prop) { 
    return Reflect.get(target, prop) 
    },
    // 拦截设置属性值或添加新属性 
    set (target, prop, value) { 
    return Reflect.set(target, prop, value) 
    }, 
    // 拦截删除属性 
    deleteProperty (target, prop) { 
    return Reflect.deleteProperty(target, prop) 
    }
}) 
proxy.name = 'wnxx'

『生命周期』

生命周期.png

🌟通过上面官网生命周期图可以看出Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但是有2个钩子发生了改变 beforeDestroy改名为beforeUnmount（卸载前）、destroyed改名为unmounted（卸载）。

🌟它们不同的是，vue3中是有了el模板之后才会去初始化，而vue2中是先created之后再去找模板。

『总结』

今天了解了这么多关于vue3的相关介绍，相信一定对vue3产生了兴趣，接下来会深入学习vue3具体的相关知识点及使用方法等等。💪Fighting💪。

「Vue3学习篇」-简介