vue3.0新特性

Vue3带来了什么

1、性能的提升

• 打包大小减少40%
• 初次渲染快55%，更新渲染快133%
• 内存减少54%

2、源码的升级

• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现 和 tree-shaking

3、更好的支持TypeScript
4、新的特性

• Compostions Api (组合Api)

  • setup配置
  • ref 和 reactive
  • watch 和 watchEffect
  • provide 和 inject

• 新的内置组件

  • Fragment
  • Teleport
  • Suspense

• 其他

  • 新的生命周期钩子
  • data选项应始终被声明为一个函数
  • 移除keyCode支持作为 v-on 的修饰符

vue3的工程结构

main.js 中

// 引入的不再是vue构造函数,引入的是一个名为createApp 的工厂函数，
// 构造函数一般首字母大写，通过new关键字去调用。 工厂函数的特点无需使用new关键字调用，首字母可以小写
import {createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象 app(类似于之前vue2中的vm,但app比vm更轻)
const app = createApp(App);
app.mount('#app')

// vue2中写法如下，vue3中不兼容vue2的写法
/* const vm = new Vue({
	render:h =>h(App)
})
vm.$mount("#app") */

在vue页面中

• Vue3组件中的模板结构可以没有根标签

vue3 与 vue 区别

1、双向绑定

2.0现有限制：

• 无法检测到新的属性添加/删除
• 无法监听数组的变化
• 需要深度遍历，浪费内存

3.0优化：

• 使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。Proxy默认可以支持数组
• 允许框架拦截对象上的操作
• 多层对象嵌套，使用懒代理

2、虚拟DOM

2.0 VDOM性能瓶颈：
* 虽然vue能够保证触发更新的组件最小化，但单个组件部分变化需要遍历该组件的整个vdom树
* 传统vdom性能跟模版大小正相关，跟动态节点的数量无关
3.0优化工作
在 vue 3.0 中重新推翻后重写了虚拟 DOM 的实现，官方宣称渲染速度最快可以翻倍。更多编译时的优化以减少运行时的开销

3、Tree-Shaking

2.0现有限制： 并不是每个人都使用框架的所有功能，但仍需下载/解析相应代码
3.0优化：将大多数全局API和内部组件移至ES模块导出，tree-shaking更友好

Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）。
Tree-shaking 是 DCE 的一种新的实现，Javascript同传统的编程语言不同的是，javascript绝大多数情况需要通过网络进行加载，然后执行，加载的文件大小越小，整体执行时间更短，所以去除无用代码以减少文件体积，对javascript来说更有意义。
Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注宇消除没有用到的代码。下面详细介绍一下DCE和Tree-shaking。

4、Composition API

API.

使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的

• state更名为reactive
  reactive等价于 Vue 2.x 的Vue.observable()，用于获取一个对象的响应性代理对象

    const obj = reactive({ count: 0 });

• value更名为ref，并提供isRef和toRefs

const unwrapped = isRef(foo) ? foo.value : foo;

• watch可作用于单一函数

2，Object.defineProperty -> Proxy

Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy，在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象一直在变，可优化性降低，proxy不需要对原始对象做太多操作。

setup script 语法题提供了三个新Api

defineProps 用来接收父组件传来的值props。

defineEmits 用来声明触发的事件表。

useContext 用来获取组件上下文context。

monorepo结构介绍.

vue3.0源码的github地址.