【九月打卡】第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的不同之处

vue2.0	vue3.0
minxin：mixin导入 可能导致数据来源 不清晰，命名不规范， 方法被重写等问题	hooks函数：单纯的 逻辑抽出，用方法封装 导出导入，变量来源清晰， 方法用途明确，因为方法 可以简单在任何文件 导入使用
new vue() 创建vue 实例挂载，通过vue 修改原型方法	createapp()创建 app实例，通过在app上 修改方法，避免直接修改 全局的vue对象
工厂函数	suspense异步组件
—	teleport瞬移组件位置
通过vue导入vue方法	通过单独模块导入vue方 法，提升treeshaking