一、安装

1. cdn

<script src="https://unpkg.com/vue@next"></script>

2. npm

$npm install vue@next

3. vue-cli

需要升级到Vue CLI v4.5

 yarn global add @vue/cli@next 
 # OR
 npm install -g @vue/cli@next 

4. vite

使用 vite 体验更快速

#npm
$ npm init vite-app <project-name> 
$ cd <project-name> 
$ npm install 
$ npm run dev 

#yarn
$ yarn create vite-app <project-name> 
$ cd <project-name> 
$ yarn 
$ yarn dev 

补充：vue-cli方法搭建步骤可参考下图：

二、Vue3.0 新特性

1. Composition API

官网：https://v3.vuejs.org/api/composition-api.html
使用Vue2.0的Option API写组件，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而Composition API就是为了解决这个问题而生的

1.1 Dom 节点的挂载方式

DOM节点挂载的方式从vue2.0中 new Vue() 实例的方式变成了Vue3.0中 createApp() 的方法

1.2 setup

• composition api其实是配合着 options选项一起使用的，因为还有name、props、components、setup这些选项。只不过是以前所有的功能都成为了一个一个的hook函数，在使用时需要手动引入，并且需要写在setup选项里面。而setup的存在就是为了让我们能够使用composition api。​
• setup在组件实例创建之前便开始执行，因此在setup选项中没有this。这也意味着，除了props，你将无法访问到组件任何的状态或者方法。​ 以前data里面的数据我们是直接可以绑定到template上面的，而在vue3.0 Composition API中需要在setup里面return出去，那么数据便会被合并到渲染的上下文中去，从而在template中使用。
• setup参数​
  setup(props,context)/setup(props,{attrs,slots,emit})

1.3 reactive

reactive接收一个普通对象然后返回该普通对象的响应式代理

• 普通对象==>返回一个proxy对象，响应式转换是深层的，对影响对象内部所有嵌套的属性
• 用user.name=“new name”来修改值
• 内部基于proxy实现
• 获取数据值的时候直接获取，不需要加.value
• 参数只能传入对象类型

1.4 ref

ref 接受一个内部值并返回一个响应式可变的ref对象

• 任意类型==>返回一个ref对象
• 用num.value=***来修改值
• 获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的
• 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广，setup中定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦
• template中使用ref值不用通过value获取（导出后已默认做了一个解构），js中使用ref必须通过.value获取
• ref获取元素
  
  通过 box.value 获取

1.5 toRef

toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

• Template中直接获取值，js中需要加.value获取数据值
• toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
• 不会触发UI界面的更新

1.6 toRefs

toRefs 用于将响应式对象转换为普通对象，但是其中的每个属性都会指向原始对象相应属性的ref（也就是依然保持响应式）。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。

• 获取数据值的时候需要加.value
• toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
• 作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值

1.7 计算属性 监控属性

computed函数

和vue2.0差不多，在return数据之前，需要对数据做一些操作的话，可以在computed计算属性里面去完成。

watch函数

• 第一个参数可以是一个回调函数（但是当使用reactive包括数据时，必须使用这种方式，如果是ref的话，则可以直接写监听的数据即可不用再写回调函数了）。
• ​第二个参数是一个回调函数。
• ​第三个参数也是一个flush用于决定执行的时间。
  

watchEffect

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据
• 监视数据发生变化时回调
  
  与watch的不同
  1）我们可以从示例代码中看到 watchEffect 不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。
  2）watch 可以获取到新值与旧值（更新前的值），而 watchEffect 是拿不到的。
  3）watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖（与computed同理），而后收集到的依赖发生变化，这个回调才会再次执行，而 watch 不需要，因为他一开始就指定了依赖。

1.8 生命周期

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

2. Teleport

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术
场景：像 modals, toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值，这就是 Teleport 派上用场的地方。
我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它。

3. Fragments

vue3组件中可以拥有多个根

4. Emits Component Option

vue3新增emits选项，需要将组件发送的自定义事件定义在emits选项中。

• 可以避免当自定义事件与原生事件重名时，事件会触发多次的情况，比如：click事件
• 可以更好的指示组件的工作方式
• 对象形式可对事件进行校验
  

5. 自定义渲染器 custom renderer

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。
在vue3中将渲染器的创建函数 createRenderer 方法单独分离出来，允许用户自定义目标渲染平台，以往的版本中目标渲染被局限于浏览器dom平台，而现在可以把 vue 的开发模型扩展到其他平台（Canvas、iOS、Android等等）。

三、Vue3.0 非兼容性变更

1. Global API改为应用程序实例调用

Vue2.0 中有很多全局api可以改变vue的行为，比如Vue.component等。这会导致一些问题：

• Vue2没有app的概念，new Vue() 得到的根实例被作为app，这样的话所有创建的根实例是共享相同的全局配置，这在测试时会污染其他测试用例，导致测试变得很困难。
• 全局配置也导致没有办法在单页面创建不同全局配置的多个app实例。

Vue3.0中使用createApp返回app实例，由它暴露一系列全局api

列举如下：

2. Global and internal API重构为可做摇树优化

Vue2.0中不少global-api是作为静态函数直接挂在构造函数上的，例如Vue.nextTick()，如果我们从未在代码中用过它们，就会形成所谓的dead code，这类global-api造成的dead code无法使用webpack的tree-shaking排除掉。
Vue3中做了相应的变化，将它们抽取成为独立函数，这样打包工具的摇树优化可以将这些dead code排除掉。

受影响的api：

• Vue.nextTick
• Vue.observable(replaced by Vue.reactive)
• Vue.version
• Vue.compile(only in full builds)
• Vue.set(only in compat builds)
• Vue.delete(only in compat builds)

3. v-model 变更

• 用于自定义组件时，v-model prop和事件默认名称更改
  prop：value -> modelValue；
  event：input -> update:modelValue；
• v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替
• 同一个组件上可以使用多个v-model进行双向绑定
• 可以自定义v-model修饰符
  1.不带参数的v-model绑定，修饰符将通过 prop 名称
  modelModifiers 提供给子组件
  2.带参数的 v-model 绑定，修饰符将通过 prop 名称
  arg + “Modifiers“ 提供给子组件
  

4. 渲染函数变更

4.1 渲染函数API变更

此更改不会影响到<template>用户

• h现在全局导入，而非作为参数传递给渲染函数
• 渲染函数参数更改为在有状态组件和函数组件之间更加一致
• vnode现在又一个扁平的prop结构

4.1.1 render函数参数

4.1.2 render函数签名更改

4.1.3 Vnode参数格式

4.2 slot统一

更改了普通slot和作用域slot

• this.$slots现在将slots作为函数公开
• 移除this.$scopedSlots
  

4.3 移除$listeners

$listeners 对象在vue3中已经移除，现在事件监听器是 $attrs 的一部分

• vue2中，可以使用 this.$attrs和this.$listeners 分别访问传递给组件的attribute和事件监听器，结合inheritAttrs: false，开发者可以将这些attribute和监听器应用到其他元素，而不是根元素。
• vue3中，事件监听器现在只是以on为前缀的attribute，这样就成了attrs对象的一部分，listeners被移除了
  

4.4 $attrs包括class和style

现在的 $attr包含所有的 attribute，包括 class 和 style
在vue2中，虚拟dom会对class和style进行特殊处理，所以他们不包括在$attr中，在使用 inheritAttr: false 的时候会产生副作用
$attrs 中的 attribute 不再自动添加到根元素中，而是由开发者决定在哪添加，但是 class 和 style 不属于 $attrs，仍然会应用到组件的根元素。

5. 函数式组件变更

• Vue 3 中函数式组件的性能提升微乎其微（与 Vue 2.x 相比），所以vue3中建议直接使用常规组件
• 如果想创建一个函数式组件，写一个接收 props 和 context 的普通函数就可以了
• 废弃：单文件组件（SFC）中 的 functional 属性被干掉了
• 废弃：通过给 Render 函数传递 { functional: true } 以创建函数式组件的方式也被废弃了
  
  

6. 异步组件变更

• 新增了一个方法：defineAsyncComponent，用来显式地定义异步组件
• component 选项改名：loader
• Loader 函数不再接受 resolve 和 reject 作为参数，并且必须返回一个 Promise
  
  
  

7. data选项变更

• data 组件选项声明不再接收纯 JavaScript object，而需要 function 声明
• 当合并来自 mixin 或 extend 的多个 data 返回值时，现在是浅层次合并的而不是深层次合并的(只合并根级属性)
  
  
  

8. 自定义组件白名单

Vue3中自定义元素检测发生在模板编译时，如果要添加一些vue之外的自定义元素（例如通过 Web Components API定义的自定义元素），需要在编译器选项中设置 isCustomElement 选项。如果组件匹配了这个条件，就不需要本地或全局注册，Vue也不会抛出 unknown custom element 的警告。

• 使用 vue-cli 构建时，模板都会用 vue-loader 预编译，在 vue.config.js 中设置compilerOptions 即可：
  
• 使用 vite 构建时，在 vite.config.js 中配置 vueCompilerOptions 即可：
  
• 如果是采⽤的运⾏时编译版本的vue，可通过全局配置isCustomElement
  

9. is属性变更

vue2中 is 可用在两个场景下：

• 用于动态组件 component 来切换要渲染的组件
• 用于在使用DOM模板时的一些HTML元素的限制，比如 ui 元素里只能出现 li 元素，这样当 ul 里使用自定义组件时浏览器会认为是无效内容，此时可以使用 is 属性
  

Vue3 中 is 只能用在 component 上，上述功能需要使用 v-is 来代替

10. 插槽变更（同4.2）

Vue3中统一普通插槽和作用域插槽到$slots，具体变化如下：

• 插槽均以函数形式暴露
• $scopedSlots移除
  

11. 自定义指令API和组件保持一致

Vue3中指令api和组件保持一致

• created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
• update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
• unbind -> unmounted
  
  

12. transition类名变更

• v–enter -> v-enter-from
• v–leave -> v-leave-from
  

13. watch变更

• 以 .分割的表达式不再被watch和$watch支持，可以使用一个计算函数作为watch和$watch的参数实现
• 新增watchEffect，俗称函数副作用。（见1.7）
  
  
  

14. 被挂载的应用不会替换元素

• 在 Vue 2.x 中，当挂载一个具有 template 的应用时，被渲染的内容会替换我们要挂载的目标元素。
• 在 Vue 3.x 中，被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML
  
  

四、Vue3.0 移除功能

1. keyCode 作为 v-on 修饰符被移除

vue2中可以使⽤keyCode指代某个按键，vue3不再⽀持。

2. $on，$off 和 $once 实例方法已被移除

这3个方法被认为不应该由vue提供，因此被移除了，可以使用其他三方库实现（如Event bus 模式可以被替换为实现了事件触发器接口的外部库mitt、tiny-emitter）。

3. filter移除

Vue3中移除了过滤器，建议用方法调用或计算属性替换。

4. 内联模板attribute移除

5 $children 实例 property移除

子组件实例建议使用$refs访问

6 propsData 选项移除

propsData 选项之前用于在创建 Vue 实例的过程中传入 prop，现在它被移除了。如果想为 Vue 3 应用的根组件传入 prop，请使用 createApp 的第二个参数。

7 $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期

8 全局函数 set 和 delete 以及实例法 $set 和 $delete。基于代理的变化检测不再需要它们了。