【九月打卡】第9天 vue全局api的应用和vue3特性学习回顾

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：初识 Vue3.0： 新特性详解

课程讲师：张轩

课程内容：

1. 讲述vue3全局api相对vue2做出了哪些修改；
2. 复习vue3中的两种实例；
3. 讨论composition api的好处；
4. 思考hooks函数编写键盘监听事件；

课程收获：

• vue3全局api修改了哪些方法，有什么优势？
  我们知道vue2挂载到vue原型实例上有很多方法，比如derictive，use，mixin,component等，如果对这些方法进行修改就必须直接修改vue原型上的方法，这对vue来说是很不友好的，所以针对这个问题vue3做出了更改，通过createApp这个方法创建了一个实例，所有需要修改的方法都在这个实例上面更改，而不是直接修改vue实例，避免直接修改原型方法而产生的问题。主要表现在main文件中，具体代码看下面：

	// vue2写法,通过直接修改vue的方法,最后通过new vue的方法挂载app
	import Vue from 'vue';
	import APP from './app.vue';
	// 直接修改vue对象的方法
	Vue.use(/*..*/);
	Vue.directive(/*..*/);
	Vue.component(/*..*/);
	Vue.minxi(/*..*/);
	Vue.prototype.customProperty = () =>{}
	Vue.config.ignoredElements = /^app-/

	new Vue({
		render: h =>h(APP)
	}).$mount('#app')

	// vue3写法：通过createApp 创建一个app实例，
	// 通过在app上面修改，避免像vue2一样直接修改vue对象带来的冲突问题
	import createApp from 'vue';
	import APP from './app.vue';
	const app = createApp(APP);
	// 直接修改app对象的方法
	app.use(/*..*/);
	app.directive(/*..*/);
	app.component(/*..*/);
	app.minxi(/*..*/);
	app.prototype.customProperty = () =>{}
	app.config.ignoredElements = /^app-/

	app.mount('#app');

• 全局api的 treeshaking：
  将原来挂载到vue实例上的方法换成模块的导出导出，这方方便在不适用的时候就不打包从而实现了代码性能优化缩小体积等，如：

	// vue2 nextTick()等方法是放在vue实例上的，只要导入vue就会将他们导入
	import Vue from 'vue';
	vue.nextTick()
	vue.objserve()
	// vue3是拆分成module导入
	import Vue {nextTick， Objserve} from 'vue';
	nextTick(() =>{}) // 直接调用就打包，objserve导入但是没有调用就不打包

• 对vue3的认识
  通过老师这两章课程的学习，对vue3也增加了新的认识理解，下面通过通过表格简单复习一个vue3和vue2的不同之处