Vue.js——Vue 3 你了解了吗？

前言

    随着Vue作者尤雨溪在今年10月份开源了Vue 3的pre-alpha版本，也过了有一段时间了。而作为一个前端小白的我，了解的比较晚。所以，今天就来大致讲一下Vue 3即将带来的重大改变。

摇钱树

    在Vue 2x版本中，项目的打包会将一些你并不会用到的API也打包到你的项目中，这样无疑会增加项目的体积，并且，你并没有用到这个API，但是打包后是包含这个API的，很明显这不符合使用逻辑。那么为什么Vue 2x会导致这个问题呢？
    在Vue 2x中Vue实例的导出是一个对象，而Vue在打包的过程中并不能检测哪个API你是没有使用的，所以也就导致了打包时的不友好。而在Vue 3中，你的API的使用将不是简单的通过导入Vue实例来使用这个API，每个全局API将会以exports的形式单独导出，即在Vue 3中使用会是下面这样的:

	import { nextTick } from 'Vue'

	nextTick(res => {
		console.log(res)
	})

    这样在打包的时候，就可以监测到你用到了哪些API，而哪些API你不会使用到，对于不会使用到的API，打包时会移除这些API，这样一来你的项目的包中只会有你用到的API，而不会有你没用到的，项目的体积会很大地减少，而这就是摇钱树的作用和由来。

基于Proxy的响应

    在Vue 2x中Vue的响应是基于Object.defineProperty，但是这个会存在着诸多限制，例如在Vue 2x中，Vue不能跟踪对象属性的添加和删除，所以在Vue 2x中就有了Vue.set 和 Vue.delete这样的API。而在Vue 3中已经不再采用这种定义的方式，改用ES6中提供的Proxy这个API实现数据响应的功能。所以，在Vue 3中只需要下面的方式新定义属性就可以实现响应：

	this.Student[name] = 'wujingchang'

新的组件渲染模式

    在Vue 2x中Vue的组件渲染是父组件重新渲染，会导致子组件也重新渲染，即使子组件没发生任何改变。而，这种渲染的模式，无疑是很消耗性能的。所以，在Vue 3中针对这个问题，重新定义了渲染的模式，在重新渲染时不会重新渲染没有发生改变的组件，只会重新渲染发生改变的组件。

Composition API

    在Vue 3.0中摈弃了2x中使用options创建组件的方式，改用Composition Api。那什么是Composition API，下面可以看一个例子：

	<template>
			<button @click="increment">
				Count is : {{ state.count }}， double is：{{ state.double }}
			</button>
	</template>
	<script>
		setup() {
			const state = reactive({
				count: 0,
				double: computed(() => state.count * 2)	
			})

			function increment() {
				state.count++
			}

			return {
				state,
				increment
			}
		}
	</script>

    简单地说就是以函数式的创建组件，而不是通过传入options，因为在一定的场景中，options式的组件会变得可读性非常差，如果存在很多data，那么你的methods将会在离data很远的地方！所以出于这种原因，Vue 3.0改用了Composition API的形式创建组件

结尾

    Vue 3发生最大的变化的就是以上几个方面，当然可能也存在遗漏，欢迎大家补充。