Vue3.0 尝鲜

前言

源码在这里
相关文档(不知道是不是官方的🤭)
希望能帮到你们

安装

方式1(使用Vite安装)

1. npm i -g create-vite-app

2. npx create-vite-app XXXXX(项目名称)

   方式2(使用Vue-cli安装)

3. vue create vue3-app-vue-cli

推荐使用Vite，比webpack快上好几倍

this指向的变化

Vue2.0 this直接指向组件实例 Vue3.0 this指向组件代理对象，代理对象在指向组件实例

让我们看看在methods中3.0打印的this

通过该图，可以很明显的看出3.0和2.0的区别

compostion Api(组合API)

这个是Vue3.0的重点
如果组件很复杂，会造成这种情况
代码结构冗余，不符合高内聚低耦合原则，在大型项目里面会造成维护困难，但是在3.0中解决了这个问题，为什么说解决了这个问题呢？
请看下图

这就是compostionApi厉害的地方，代码高内聚低耦合，甚至可以把每一块功能块单独封装成函数返回

hooks

与 2.x 版本相对应的生命周期钩子

setup

setup方法接受2个参数。

1. 第一个参数是 props ,它在 setup 内部也是响应式的（注意不要对 props 直接使用解构赋值，这样会破坏响应式，但是可以使用 toRefs来实现安全的解构
   
2. 第二个参数是 context ，它是一个普通的对象（不是响应式的）并且暴露出3个组件属性。1. arrts 2.emit 3.slots
   
3. 可以使用
   

   该API在在所有生命周期钩子函数之前调用(由于 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，也就是说将在这两个钩子中编写的任何代码都应该直接在 setup 中编写 在setup中，this是undefined，不再是组件实例了 在setup中可以使用所有生命周期钩子函数

setup函数需要返回一个对象，返回的所有东西附着在组件实例中

响应式系统

众所周知，Vue2.x 是通过 Object.defineProperty结合订阅/发布模式实现的。 而 Vue3.0 则是采用 ES6 的 Proxy 代理来拦截对目标对象的访问。

创建响应式数据

ref

ref方法接受一个原始值参数, 同时返回响应式的ref对象，原始值存在该对象的value属性中

当一个ref参数在渲染上下文中被访问时，无需使用ref.value来进行访问，会自动解套，如下图

reactive

reactive方法接收一个普通对象作为参数，然后返回该普通对象的响应式代理，等同于2.0的Vue.observable()已创建一个响应式属性

监听

watchEffect方法

该方法传入一个函数，watchEffect方法可以监听依赖，挂载时会立刻调用一次，如果依赖性更新时，会继续调用

watch 方法

等同于2.0的watch方法，只不过写法不同(具体的你们可以查阅下文档)

生命周期

生命周期没有太大的改变，由于创建实例的方法改变了，因此有一些细微的差别。

值得注意的是：在 Vue2.x 中，销毁实例的两个钩子是 beforeDestory 以及 destoryed，而在 Vue3.0 中这两个钩子的名字变更为 beforeUnmount 和 unmounted。