最近有小伙伴去面试，被面试官灵魂拷问到：
为什么Vue3推荐使用函数风格？ 为什么是不用new而是createXXX风格？ CompositionAPI设计的主要目的是什么？ 你在Vue3项目中用Typescript了吗？（他们项目在用这个组合熟悉ts优先考虑）
小伙伴一时语塞，回家狂补知识，老师们得知此事，必然给大家安排上！
公开课预告
如何快速掌握vue3+ts这套技术组合做开发呢？
最佳方式是找一套社区公认的最佳实践，做上一个项目，这比自己刷文档效率高多了。
我的好朋友，有“东神”之称的张东老师
11月18日晚8点有一个0元公开课《Vue3 + TS最佳实践》。
会带着大家写一个项目，顺带演示Vue3+TS开发的标准姿势，为接下来进阶高级开发做好准备工作，快扫描下方二维码报名吧！
参与抽奖活动赢大礼包
村长给大家准备了5份“开课吧8周年大礼包”，欢迎大家参与抽奖，
参与条件：关注我的公众号“村长学前端”，回复“升职加薪”即可
分享给朋友中奖概率还能翻倍，请认真阅读参与规则哦~
Vue2和原生JS的问题
相信用过vue2 的小伙伴们，都对vue2中几个广受诟病的缺陷深恶痛绝。比如：
1. 使用下标修改数组中的元素值，页面不自动更新
比如，想要实现点击数组中一个元素，就让元素变成小花：
在vue2中，如果这样写：
结果，点击每一项，竟然不变成小花，而且也不报错。这是为什么呢？
2. 为对象中添加新成员，页面也不自动更新。
比如: 想点击按钮，为对象临时添加一个新属性：
但是，在vue2中，这样写：
add2
结果，页面上依然无法自动更新出对象的新属性。这又如何解决呢？
3. 一个.vue文件中代码过多，造成“横跳”现象，给代码调试带来极大障碍，感受极其不舒适。
比如，如果一个页面中包含很多功能。
代码就是这样的：
<template>
<div class="home">
<ul>
<li v-for="(val,key) of lilei" :key="key">
{{key}}:{{val}}
</li>
</ul>
<button @click="add">添加班级</button>
<hr>
<ul>
<li v-for="(val,i) of arr" :key="i" @click="change(i)">
{{val}}
</li>
</ul>
<hr>
<input v-model="str">
<button @click="search">百度一下</button>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
lilei:{
sname:"Li Lei",
sage:11
},
arr:["涛涛","然然","东东"],
str:""
}
},
methods:{
add(){
this.lilei.classname="初一2班";
},
change(i){
this.arr[i]="❀"
},
search(){
console.log(`搜索 ${this.str} 相关的内容...`)
}
}
};
</script>
而我们调试代码时，就不得不在很长的代码中上下不同位置间，不停滚动屏幕：
henggun2这种令人眼花缭乱的，不停上下滚动到不同位置调试代码的方式，被程序员们戏称为“横跳”问题。
其根本原因就是，vue2中采用了名为Option API的编码结构。这种结构，要求必须将所有模型数据集中保存在一个规定位置data(){}中。又要求所有的模型方法必须集中保存在methods:{}中。如下图所示：
OptionAPI
这样，随着一个组件中业务逻辑越来越多，代码就会变得非常冗长，还极其不容易分割。如下图所示：
OptionAPI2
以上三点都是vue2中，最有代表性的广受诟病的缺陷。
Vue3+ TS的优势
另外，JavaScript语言本身也有广受诟病的缺陷——弱类型。在JavaScript语言中，一个变量，先后可以保存不同类型的数据。比如，var a=10本应该是一个保存整数数据的变量。但是，过一会儿，就可以a=“hello”，a摇身一变成了保存字符串数据的变量。这对于大型项目的协作开发来说，简直是不可接受的。
大型项目的协作开发中，强调的就是严格和标准化。比如，你和你的同事商量好，他将来要使用你写的功能时，一定会传给你一个整数。这就是一种契约。既约束你应该基于何种数据类型开发你的功能，又约束了你的同事，应该如何正确使用你的功能。只有协作开发中，你和你的同事都遵守了这份契约，将来的你的功能和你同事的程序才能联合起来运行，程序才能越做越大，才能健壮稳定。
可是，JavaScript语言偏偏是弱类型语言。即使你和你同事口头约定将来他一定会给你整数。但是，如果他疏忽了，不小心给了你一个字符串，甚至数组等其他类型的数据。因为，JavaScript语言本身是不检查变量的数据类型的。所以，这个错误类型的数据依然会大摇大摆的进入你的功能。而这个时候，就极有可能造成你的功能运行错误。
比如，你做了一个自我介绍的组件，其中，要求将来使用你这个组件的人必须传入一个学生对象。并且，要求学生对象至少包含sname(学生姓名 字符串类型)和sage(学生年龄 数字类型)两个属性，你的组件才能正常工作。
Vue2不加TypeScript的代码如下：
intrself
如果你的同事，没有按之前你俩之间的约定传入学生类型的对象，而是传入了其他类型的对象或数据.结果就是，既不报错，执行结果也出不来，如下图所示:
程序中，最难调试的问题之一，就是执行结果不对，但是还不报错的。你连改哪里都不知道。而这就是JavaScript弱类型语言广受诟病的缺陷之一。
事到如今，有些事儿呀，你也该知道了。孩子大了，瞒不住了。
其实，以上这些问题，早已在vue3和typescript中得到了完美解决。所以，vue3+typescript，就成为时下最炙手可热的新技术潮流。身处一线开发岗位的小伙伴们，一定要紧跟技术发展的大潮流。一定要快速掌握前沿的vue3+typescript新技术、新特性和新的方法论，才能不做悲惨的前浪，不被后浪拍在沙滩上。
那么，要想学习vue3+typescript技术，首先要生成vue3+typescript技术的脚手架源代码。具体生成步骤如下所示：
结果，就生成了一套vue3+typescript的脚手架源代码。然后，用visual studio code打开刚刚生成的脚手架文件夹，这里是vue3ts。如下图所示：
其实，开篇所说的前两个问题（用下标修改数组内容和为对象添加新属性），在vue3中已经彻底解决了。比如，我们可以将之前vue2中的代码，直接拷贝vue3脚手架中Home.vue中，直接测试运行，如下图所示：
vue3-1
发现：
1. 即使用下标修改数组内容，页面也能自动更新了
2. 即使动态为对象添加新属性，页面也能自动更新了
同时，vue3中还为了解决Option API的横跳问题，提供了更优的解决方案——Composition API。Composition API允许我们按功能组织数据和方法。打破了data(){}、methods:{}等固定结构的束缚。基本原理如下所示：
这样，我们就有可能把一个小功能所需的数据和方法，集中提取到一个独立的较小的ts文件中保存。这样每个小功能代码量都很少，便于调试。然后，主组件或页面想使用这个小功能的数据和方法时，再重新引用回主组件或页面中。这样，就可以将一个大的.vue文件，拆成多个小的ts文件，每个文件代码行数大大缩短，极其便于调试了。
另外，vue3与TypeScript语言紧密结合，实现了强类型检查！就是说，在vue3+typescript的脚手架中，必须在开始编写程序时，就要严格定义好要传递的数据类型和数据结构。然后，在编码过程中，无论是调用者，还是开发者都要严格遵守数据类型和数据结构的规定。这种规定，不再是人与人之间口头的规定。而是脚手架自带的自动化的类型检查。在编码过程中，一旦发现类型使用错误，就会报错！这就严格规范了程序中的数据类型，极其便于大型项目的协作开发，也保证了项目的健壮性和稳定性。
那么，具体vue3是如何轻松解决前两个问题的呢？在vue3中，如何用最新的composition api优化自己的代码结构呢？在vue3中如何使用TypeScript实现强类型检查呢？
为了有更充裕的时间，详细为你讲述vue3+typescript最佳的开发实践经验，带你快速入门vue3+typescript开发！我向你强烈推荐“东神”0元公开课——《vue3+typescript最佳实践》
