coderwhy_Vue3+TypeScript

【公开课】coderwhy_Vue3+TypeScript.mp4

Vue3+TypeScript
王红元 coderwhy

ke.qq.com/course/3453141?tuin 1635c7de

《TypeScript数据结构与算法》《React技术栈权威指南》作者腾讯AI高校训练营多所985、211名牌大学特聘讲师。丰富的软件开发和教学经验，带领团队开发出众多公司大型项目和软件系统。
全面负责国内知名视频直播软件<新浪秀场>项目架构和各端的设计和开发。
澳大利亚《智慧养老系统》研发负责人、CTO。

口找后端的工作：优先推荐Java、其次推荐Go、再次推荐Node（JavaScript），可能不推荐PHP、C#；

口找前端的工作：优先推荐JavaScript（TypeScript）、其次Flutter、再次Android（Java、Kotlin）、iOS（OC、Swift）；

也有很多的其他方向：游戏开发、人工智能、算法工程师等等；

带领团队开发欧洲社交软件得心App。

codenwhy Vue3带来的变化（源码）在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
口它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
源码通过monorepo的形式来管理源代码：
□Mono：单个
Repo：repository仓库
主要是将许多项目的代码存储在同一个repository中；这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管王而且模块划分的更加清晰，可维护性、可扩展性更强；源码使用TypeScript来进行重写：
口在Vue2.x的时候，Vue使用Flow来进行类型检测；口在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；

coderwhy Vue3带来的变化（性能）使用Proxy进行数据劫持
口在Vue2.x的时候，Vue3是使用Object.defineProperty来劫持数据的getter和setter方法的；口这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；所以在Vue2.x的时候，不得不提供一些特殊的API，比如$set或$delete，事实上都是一些hack方法，也增加了开发者学习新的API的成本；而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到；删除了一些不必要的API：口移除了实例上的$on，$off 和$once；口移除了一些特性：如filter、内联模板等；

coderwhy Vue3带来的变化（新的API）由Options API到Composition API：口在Vue2.x的时候，我们会通过Options API来描述组件对象；Options API包括data、props、methods、computed、生命周期等等这些选项；存在比较大的问题是多个逻辑可能是在不同的地方：
比如created中会使用某一个method来修改data的数据，代码的内聚性非常差；Composition API可以将 相关联的代码 放到同一处进行处理，而不需要在多个Options之间寻找；Hooks函数增加代码的复用性：
口在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑；口但是有一个很大的缺陷就是mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题；口在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的；口具体的好处，会在后续的课程中演练和讲解（包括原理）；

coderwhy JavaScript是一门优秀的语言吗？
JavaScript是一门优秀的编程语言吗？
口每个人可能观点并不完全一致，但是从很多角度来看，JavaScript是一门非常优秀的编程语言。
而且，可以说在很长一段时间内这个语言不会被代替，并且会在更多的领域被大家广泛使用。
著名的Atwood定律：
Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律。
any application that can be written in JavaScript，will eventually be written in JavaScript.
任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现。
口其实我们已经看到了，至少目前JavaScript在浏览器端依然无可替代，并且在服务端（Nodejs）也在备广泛的应用。
口甚至在桌面端（Electron）、移动端（React Native、Weex）；所以，从很多的角度都能看出来JavaScript是一门非常优秀的编程语言。

coderwhy JavaScript存在缺陷吗？
优秀的JavaScript没有缺点吗？
口其实上由于各种历史因素，JavaScript语言本身存在很多的缺点；口比如ESS以及之前的使用的var关键字关于作用域的问题；口比如最初JavaScript设计的数组类型并不是连续的内存空间；比如直到今天JavaScript也没有加入类型检测这一机制；JavaScript正在慢慢变好
口不可否认的是，JavaScript正在慢慢变得越来越好，无论是从底层设计还是应用层面。
口ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便。
口但是知道今天，JavaScript在类型检测上依然是毫无进展（为什么类型检测如此重要，我后面会聊到）。

coderwhy前端开发人员的类型缺失？为什么一定要有类型检测呢？
口首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好。
口能在写代码的时候发现错误，就不要在代码编译时再发现；能在代码编译期间发现错误，就不要在代码运行期间再发现；口能在开发阶段发现错误，就不要在测试期间发现错误，能在测试期间发现错误，就不要在上线后发现错误。

coderwhy TypeScript带来的类型思维
在之后的JavaScript社区中出现了一系列的类型约束方案：
12014年，Facebook推出了flow来对JavaScript进行类型检查；同年，Microsoft微软也推出了TypeScript1.0版本；他们都致力于为JavaScript提供类型检查；而在所有的方案中，无疑TypeScript是最优秀的，也是目前使用最广泛的：
Vue3.x已经全线转向TypeScript，几乎所有的代码都使用TypeScript进行了重构；而Angular在很早期就使用TypeScript进行了项目重构，并且项目也需要使用TypeScript来进行开发；包括React使用最多的组件库Ant Design也是全面使用的TypeScript；目前很多的公司项目都是使用Vue+TypeScript、React+TypeScript、Angular+TypeScript；包括最新的Vue3中也提供了更好的对TypeScript的支持；

Vue项目通常需要掌握哪些技术栈？
Vue3全家桶
1
Vue3核心语法
Vue-Router路由Vuex状态管理
4
TypeScript实际项目中使用TypeScript Vue3组件库
2
AntDesignVueElement-Plus
5其他技术栈
可视化库
Webpack，Vite Axios等网络请求库Less、Sass等CSS预处理器ECharts
3
Three.js G2、L7等

如何学习Vue3+TypeScript？
官方文档看书学习
如何抓住重点；如何进行实战练习；更多作为查阅的手册；书的质量必须很高；必须动手进行练习；遇到问题如何解决？
开源项目视频课程
非常好的学习手段；需要具备一定的学习能力，需要一定的基础；比较适合大多数人；讲课人本身的能力；视频质量要高、听得懂、学得会；

coderwhy课程的内容
课程核心内容：
Vue3核心知识深入解析；Vue-Router4.x、Vuex4.x、2.Composition API等详细解析；基于Webpack5、Vite2分别搭建Vue3项目；TypeScript基础、高级语法解析、应用、实战；Vue3、Vue-Router、Vuex、Hooks、Element-Plus、ECharts、TypeScript、Axios、Less的后台管理系统项目实战；项目实战中的高级组件拆分、封装，项目架构设计等；Vue3项目的打包、优化、自动化部署等；Vue3相关的原理、源码解读等；
----1一

1.邂逅Vue3和Vue3开发体验.mp4

و
coderwhy Vue3带来的变化（源码）源码通过monorepo的形式来管理源代码：Mono：单个
1Repo：repository仓库
口主要是将许多项目的代码存储在同一个repository中；口这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；而且模块划分的更加清晰，可维护性、可扩展性更强；源码使用TypeScript来进行重写：
口在Vue2.x的时候，Vue使用Flow来进行类型检测；口在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；

coderwhy方式一：CDN引入
什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）
口它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器；口更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；口来提供高性能、可扩展性及低成本的网络内容传递给用户；

oderwhy声明式和命令式
原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
口命令式编程和声明式编程；口命令式编程关注的是"how to do"，声明式编程关注的是"what to do"，由框架（机器）完成"how"的过程；

coderwhy MVVM模型
MVC和MVVM都是一种软件的体系结构
口MVC是Model-Vue-Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；OMVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；d

通常情况下，我们也经常称Vue是一个MVVM的框架。
aVue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

coderwhy data属性
data属性是传入一个函数，并且该函数需要返回一个对象：
在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；在Vue3.x的时候，比如传入一个函数，否则就会直接在浏览器中报错；data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
口所以我们在template中通过{（counter）}访问counter，可以从对象中获取到数据；口所以我们修改counter的值时，template中的{{counter））也会发生改变；

coderwhy methods属性
methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
口这些方法可以被绑定到 template 模板中；口在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：

对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：口问题一：为什么不能使用箭头函数（官方文档有给出解释）？
口问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）
注意
注意，不应该使用箭头函数来定义 method 函数（例如 plus：（）→ this.a++）。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向组件实例，this.a 将是undefined。

coderwhy其他属性
当然，这里还可以定义很多其他的属性，我们会在后续进行讲解：口比如props，computed、watch，emits，setup等等；口也包括很多的生命周期函数；不用着急，我们会一个个学习它们的。

vuejs / vue-next

v3.0.11

https://github.com/vuejs/core/tree/v3.0.11

2.Vue3基础语法（⼀）.mp4

Vue基础-模板语法

mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRITA

definpro bindvalue

vue-template-compiler

snippet-generator.app

coderwhy模板语法
1503 × 728
React的开发模式：
React使用的jsx，所以对应的代码都是编写的类似于js的一种语法；之后通过Babel将jsx编译成 React.createElement 函数调用；Vue也支持jsx的开发模式（后续有时间也会讲到）：
口但是大多数情况下，使用基于HTML的模板语法；在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起；在底层的实现中，Vue将模板编译成虚拟DOM渲染函数，这个我会在后续给大家讲到；所以，对于学习Vue来说，学习模板语法是非常重要的。

coderwhy v-bind的绑定属性
前端讲的一系列指令，主要是将值插入到模板内容中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性；口比如动态绑定img元素的src属性；绑定属性我们使用v-bind：口缩写：：
口预期：any（with argument）| Object（without argument）
口参数：attrOrProp（optional）
修饰符：
.camel-将kebab-case attribute名转换为camelCase用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

coderwhy绑定style介绍
我们可以利用v-bind:style来绑定一些CSS内联样式：
口这次因为某些样式我们需要根据数据动态来决定；比如某段文字的颜色，大小等等；CSS property 名可以用驼峰式（camelCase）或短横线分隔（kebab-case，记得用引号括起来）来命名；绑定class有两种方式：
口对象语法口数组语法

LE coderwhyv-on绑定事件
前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。
在前端开发中，我们需要经常和用户进行各种各样的交互：
口这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等口在Vue中如何监听事件呢？使用v-on指令。

" v-on="{click: btn1Click, mousemove: mouseMove}"> @

PLO PowerPoint片政-10ve3生新-病有招LE coderwhyv-on的修饰符
1188 × 751
v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理：.stop-调用event.stopPropagation prevent-调用 event.preventDefault（）.
capture-添加事件侦听器时使用capture模式。
self-只当事件是从侦听器绑定的元素本身触发时才触发回调。{keyAlias）-仅当事件是从特定键触发时才触发回调。
.once-只触发一次回调。
left-只当点击鼠标左键时触发。
right-只当点击鼠标右键时触发。.middle-只当点击鼠标中键时触发。
passive-{passive：true}模i添加侦听器

3.Vue3基础语法（⼆）.mp4

coderwhy没有key的过程如下
我们会发现上面的diff算法效率并不高：口c和d来说它们事实上并不需要有任何的改动；口但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增
カ00倍

Vue源码对于key的判断

coderwhy条件渲染
在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。
Vue提供了下面的指令来进行条件判断：
v-if v-else v-else-if v-show

v-if的渲染原理：
Ov-if是惰性的；口当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；口当条件为true时，才会真正渲染条件块中的内容；

coderwhy template元素
因为v-if是一个指令，所以必须将其添加到一个元素上：
口但是如果我们希望切换的是多个元素呢？
口此时我们渲染div，但是我们并不希望div这种元素被渲染；口这个时候，我们可以选择使用template；template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：
口有点类似于小程序中的block