Vue 3.0 (alpha)，50分钟掌握Vue 3.0（vue-router，vuex）环境搭建及核心知识点

Vue 3.0 注意事项

1. Vue 3.0 目前发布了alpha 版本，可以通过vue@next 版本来安装
2. vue-cli 目前不支持Vue 3.0 的安装，需自行搭建开发环境（不要与vue-cli 3.0 混淆）
3. 如果使用vue-router 及vuex，同样需要安装对应的alpha 版本

vue3.0数据响应式的实现（Proxy）

Proxy是ES6为了操作对象而提供的新API ，Vue 3.0中，使用Proxy代替Object.defineProperty来做数据的响应式。

Proxy作用：代理，拦截用户对目标对象的访问（如常用的get、set、has），可以对用户的访问进行过滤和改写。 Proxy不能直接对引用值属性做深入代理，需要一个节点一个节点的进行创建proxy对象来实现。

Proxy对比Object.defineProperty的优势：

1. Proxy可以直接监听对象而非属性
2. Proxy可以直接监听数组的变化
3. Proxy有13中拦截方法，功能更强大

通过一段代码来理解下Proxy的使用：

image.png

Proxy接收2个参数，需代理的对象与代理操作对象。通过Proxy的拦截，在用户获取对象数据的时候，会首先进入get方法中处理，这里甚至可以改写返回的内容。设置属性值的时候，同样会进入set方法中，set方法最终需要返回操作是否成功的标识。

Reflect

Reflect对象与Proxy对象一样，是ES6为了操作对象而提供的新API ，Reflect不能执行new指令。

Reflect作用：优化Object的一些操作方法以及合理的返回Object操作返回的结果。比如下图中用Reflect.has 函数来判断对象是否有某个属性。

image.png

Proxy 与Reflect 组合使用原理

Proxy拦截用户对目标对象的访问， 实际对数据的操作由Reflect来完成。

image.png

看下面一段代码来加以理解

image.png

在设置对象属性的时候，Reflect.set可以直接返回设置是否成功的结果，这样可以使得代码更加简洁合理。

setup

组件业务逻辑主要在setup 函数中完成。setup 函数会在组件挂载前（ beforeCreate 和 created 生命周期之间）运行一次，类似组件初始化的作用。注意，此时组件还未完成实例化，也就无法在这里用 this 指向当前组件实例。

setup的2个参数：

1. props：在 vue-next 中，props 的类型声明不是必须的。 props是一个reactive对象，不要对它进行解构赋值，这样会破坏props的响应机制，导致后序外部更新props的时候组件无法更新。

2. context： context 对象也是一个 Proxy 对象，本质上代理对象会将访问指向组件的内部实例（如访问组件的 attrs 或者 emit ）

setup的2种返回值：

1. render context：顾名思义，就是模板中可以访问到的各种数据和方法的上下文对象，如下图：

   
   
   

   image.png

2. 模板渲染函数：此时template无效，不用写该部分，如下图：

   
   
   

   image.png

更多内容

以上是关于Vue 3.0 知识点的简单梳理，完整的Vue 3.0 环境搭建，其他核心知识点，vuex，vue-router等完整内容，可以观看我的完整视频教程 Vue3.0（alpha），2020前端必修