【公开课】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
coderwhy v-show和v-if的区别
首先，在用法上的区别：
v-show是不支持template；v-show不可以和v-else一起使用；其次，本质的区别：
1v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换；v-if当条件为false时，其对应的元素压根不会被渲染到DOM中；开发中如何进行选择呢？
口如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；口如果不会频繁的发生切换，那么使用v-if；
coderwhy v-for基本使用
v-for的基本格式是"item in数组"：口数组通常是来自data或者prop，也可以是其他方式；口item是我们给每项元素起的一个别名，这个别名可以自定来定义；
coderwhy数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push（）
pop（）
shift（）
unshift（）
splice（）
sort（）
reverse（）
coderwhy v-for中的key是什么作用？
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。
这个key属性有什么作用呢？我们先来看一下官方的解释：
口key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算口而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；官方的解释对于初学者来说并不好理解，比如下面的问题：
ロ什么是新旧nodes，什么是VNode？口没有key的时候，如何尝试修改和复用的？口有key的时候，如何基于key重新排列的？
我们先来解释一下VNode的概念：
口因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解HTML元素创建出来的VNode；OVNode的全称是Virtual Node，也就是虚拟节点；
-HU口事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；DVNode的本质是一个JavaScript的对象；
vdom virutal dom多个vnode形成的树结构
你也可以用 of替代in作为分隔符，因为它更接近JavaScript迭代器的语法：
1
diff算法
coderwhy有key的diff算法如下（二）第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：BVNode列表
abCd made by coderwhy patchpatch新增
patchpatch新VNode列表
abd第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：
IBVNode列表
abd patchpatch移除c patch新VNode列表
abd made by coderwhy
coderwhy没有key的过程如下
我们会发现上面的diff算法效率并不高：
口c和d来说它们事实上并不需要有任何的改动；
<template
-
口但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行
-
4.Vue3基础语法（三）.mp4
coderwhy复杂data的处理方式
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；口比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；在模板中放入太多的逻辑会让模板过重和难以维护；口并且如果多个地方都使用到，那么会有大量重复的代码；PowerPoint 幻灯片放映-[04_Vue3的 Options-API]
coderwhy认识计算属性computed什么是计算属性呢？
官方并没有给出直接的概念解释；而是说：对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；口计算属性将被混入到组件实例中。所有 getter 和 setter 的 this 上下文自动地绑定为组件实例计算属性的用法：
口选项：computed口类型：{[key：string]：Function |{get：Function，set：Function}}coderwhy实现思路一：模板语法
思路一的实现：模板语法
口缺点一：模板中存在大量的复杂逻辑，不便于维护（模板中表达式的初衷是用于简单的计算）；口缺点二：当有多次一样的逻辑时，存在重复的代码；口缺点三：多次使用的时候，很多运算也需要多次执行，没有缓存；coderwhy计算属性 vs methods在上面的实现思路中，我们会发现计算属性和methods的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。
watch支持异步...
腾
coderwhy认识侦听器watch什么是侦听器呢？
口开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；当数据变化时，template会自动进行更新来显示最新的数据；口但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；
1119 x302侦听器的用法如下：口选项：watch口类型：{[key：string]：string Function Object Array）
questioncoderwhy侦听器watch的其他方式（二）
另外一个是Vue3文档中没有提到的，但是Vue2文档中有提到的是侦听对象的属性：obj.name
5.Vue3组件化开发（⼀）.mp4
git init git commit 监听....
Vue3的表单和开发模式
王红元 coderwhy
V-model
注册组件
webpack全局监听...
coderwhy v-model的基本使用
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：
口比如用户在登录、注册时需要提交账号密码；口比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：
口v-model指令可以在表单input，textarea以及select元素上创建双向数据绑定；口它会根据控件类型自动选取正确的方法来更新元素；口尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；coderwhy v-model的原理 官方有说到，v-model的原理其实是背后有两个操作：v-bind绑定value属性的值；v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；html <input v-model="searchText" 等价于：html 1 <input：value="searchText"@input="searchText = Sevent.target.value"/>not deep copy
coderwhy v-model的值绑定
目前我们在前面的案例中大部分的值都是在template中固定好的：比如gender的两个输入框值male，female；比如hobbies的三个输入框值basketball，football，tennis；在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来进行值的绑定，这个过程就是值绑定。
口这里不再给出具体的做法，因为还是v-bind的使用过程。coderwhy v-model修饰符-trim如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：
coderwhy人处理问题的方式
人面对复杂问题的处理方式：
任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
但是，我们人有一种天生的能力，就是将问题进行拆解。
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
这是你搞得定的
一堆小东西
这是你搞不定的
一大堆东西
和你能搞得定的
一个关系网
知乎@coderwhycoderwhy认识组件化开发
1264 x 695组件化也是类似的思想：
口如果我们将一个页面中所有的处理逻辑全部放在一起 处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；口但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；口如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目1；coderwhy Vue的组件化
组件化是Vue、React、Angular的核心思想，也是我们后续课程的重点（包括以后实战项目）：
口前面我们的createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件；口组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用；口任何用都会被抽象成一颗组件树；coderwhy组件的名称
শ
今天讲
半
喝口水
在通过app.component注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：
热
好的老
方式一：使用kebab-case（短横线分割符）当使用 kebab-case（短横线分隔命名）定义一个组件时，你也必须在引用这个自定义元素时使用 ke例如；Yo白建时
app.component（'my-component-name'，f em两个水
方式二：使用PascalCase（驼峰标识符）口当使用PascalCase（首字母大写命名）定义一个组件时，你在引用这个自定义元素时两种命名法都可就是说和 都是可接受的； XPL PowerPoint 幻灯片放映-[05_Vue3-41LE coderwhy单文件的特点
在这个组件中我们可以获得非常多的特性：
代码的高亮；ES6、CommonJS的模块化能力；组件作用域的CSS；可以使用预处理器来构建更加丰富的组件，比如TypeScript、Babel、Less、Sass等；coderwhy如何支持SFC如果我们想要使用这一的SFC的.vue文件，比较常见的是两种方式：
口方式一：使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件；口方式二：自己使用webpack或rollup或vite这类打包工具，对其进行打包处理；我们最终，无论是后期我们做项目，还是在公司进行开发，通常都会采用Vue CLI的方式来完成。
但是在学习阶段，为了让大家理解Vue CLI打包项目的过程，我会接下来穿插讲解一部分webpack的知识，帮助大家更好的理解Vue CLI的原理以及其打包的过程。coderwhy Webpack的使用前提
webpack的官方文档是https://webpack.js.org/
webpack的中文官方文档是https://webpack.docschina.org/
DOCUMENTATION：文档详情，也是我们最关注的
Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境口所以我们需要先安装Node.js，并且同时会安装npm；口我当前电脑上的node版本是v14.15.5，npm版本是6.14.11（你也可以使用nvm或者n来管理Node版本）；口Node官方网站：https://nodejs.org/6.Vue3组件化开发（⼆）.mp4
coderwhy认识webpack事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：口比如开发过程中我们需要通过模块化的方式来开发；比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass，less等方式来编写css样式代码；口比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；口等等…...
比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：
口这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue，React，Angular；口但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；口事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less TypeScript、打包优化等的；coderwhy Webpack到底是什么呢？我们先来看一下官方的解释：
webpack is a static module bundler for modern JavaScript applications.
webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；我们来对上面的解释进行拆解：
打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具1静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；lerwhy Vue项目加载的文件有哪些呢？
JavaScript的包：将ES6转换成ES5的语法；TypeScript的处理，将其转换成JavaScript；Css的处理：
□CSS文件模块的加载、提取；Less、Sass等预处理器的处理；资源文件img，font：口图片img文件的加载；字体font文件的加载；HTML资源的处理：
口打包HTML资源文件；coderwhy Webpack的使用前提
webpack的官方文档是https://webpack.js.org/
webpack的中文官方文档是https://webpack.docschina.org/
DOCUMENTATION：文档详情，也是我们最关注的
Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境所以我们需要先安装Node.js，并且同时会安装npm；口我当前电脑上的node版本是v14.15.5，npm版本是6.14.11（你也可以使用nvm或者n来管理Node版本）；口Node官方网站：https://nodejs.org/coderwhy Webpack的安装
webpack的安装目前分为两个：webpack，webpack-cli那么它们是什么关系呢？
执行webpack命令，会执行node_modules下的.bin目录下的webpack；webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）npx webpack --entry ./src/main.js --output-path ./build
coderwhy Webpack的依赖图
webpack到底是如何对我们的项目进行打包的呢？
口事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如js文件、css文件、图片、体等）；math.jš
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；coderwhy css-loader的使用
上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？
口loader 可以用于对模块的源代码进行转换；口我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；口在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；oderwhy认识style-loader我们已经可以通过css-loader来加载css文件了
口但是你会发现这个css在我们的代码中并没有生效（页面没有效果）。
这是为什么呢？
口因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；口如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；coderwhy认识PostCSS工具
什么是PostCSS呢？
口PostCSS是一个通过JavaScript来转换样式的工具；口这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；口但是实现这些功能，我们需要借助于PostCSS对应的插件；如何使用PostCSS呢？主要就是两个步骤：
口第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；口第二步：选择可以添加你需要的PostCSS相关的插件；coderwhy插件autoprefixer因为我们需要添加前缀，所以要安装autoprefixer：npm install autoprefixer-D直接使用使用postcss工具，并且制定使用autoprefixer npx postcss--use autoprefixer-o end.css./src/css/style.css
7.Webpack5搭建Vue环境.mp4
Webpack打包其他资源
:"file-loader"
coderwhy文件的命名规则
有时候我们处理后的文件名称按照一定的规则进行显示：
比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：https://webpack.js.org/loaders/file-loader/#placeholders我们可以在文档中查阅自己需要的placeholder；我们这里介绍几个最常用的placeholder：
[ext]：处理文件的扩展名；[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash：]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；oderwhy url-loader
1url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。1511 × 538
oderwhy认识asset module type我们当前使用的webpack版本是webpack5：在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader、url-loader、file-loader在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；webpack5 不yao一些loader
type: "asset/resource"
type: "asset" 分类分+
require("clean-webpack-plugin");
8.Vite2搭建Vue环境.mp4
Babel和devServer
coderwhy为什么需要babel？
事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：
口开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；口所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；那么，Babel到底是什么呢？
Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；口包括：语法转换、源代码转换等；coderwhy Babel命令行使用
babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。
如果我们希望在命令行尝试使用babel，需要安装如下库：口@babel/core：babel的核心代码，必须安装；
@babel/cli：可以让我们在命令行使用babel；coderwhy Babel的预设preset但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：口后面我们再具体来讲预设代表的含义；安装@babel/preset-env预设：
coderwhy Babel的底层原理
babel是如何做到将我们的一段代码（ES6、TypeScript，React）转成另外一段代码（ES5）的呢？
从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
就是编译器，事实上我们可以将babel看成就是一个编译器。
Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；Babel也拥有编译器的工作流程：
口解析阶段（Parsing）转换阶段（Transformation）口生成阶段（Code Generation）https://github.com/jamiebuilds/the-super-tiny-compiler
oderwhy Babel的配置文件
像之前一样，我们可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写：babel.config.json（或者.js，.cjs，.mjs）文件；
.babelrcjson（或者.babelrc，js，.cjs，.mjs）文件；rc-> runtime compiler它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）；口.babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；口babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐；
coderwhy Vue打包后不同版本解析
vue（.runtime）.global（.prod）.js：通过浏览器中的 <script src="."> 直接使用；我们之前通过CDN引入和下载的Vue版本就是这个版本；会暴露一个全局的Vue来使用；vue（.runtime）.esm-browser（.prod）.js：口用于通过原生ES模块导入使用（在浏览器中通过<script type="module">来使用）59X738
oderwhy运行时+编译器 vs 仅运行时
在Vue的开发过程中我们有三种方式来编写DOM元素：
方式一：template模板的方式（之前经常使用的方式）；方式二：render函数的方式，使用h函数来编写渲染的内容；方式三：通过.vue文件中的template来编写模板；它们的模板分别是如何处理的呢？
方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；方式一和方式三的template都需要有特定的代码来对其进行解析：
方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；方式一种的template我们必须要通过源码中一部分代码来进行编译；coderwhy VSCode对SFC文件的支持
在前面我们提到过，真实开发中多数情况下我们都是使用SFC（single-file components（单文件组件））.们先说一下VSCode对SFC的支持：插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件；插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件）；
npm install @vue/compiler-sfc
9.Vite3新增语法特性（一）.mp4
derwhy webpack-dev-server上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：口当然，目前我们可以在VSCode中使用live-server来完成这样的功能；口但是，我们希望在不使用live-server的情况下，可以具备live reloading（实时重新加载）的功能；
oderwhy框架的HMR有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet相关的API呢？
口比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？
事实上社区已经针对这些有很成熟的解决方案了；比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用react-
refresh）；接下来我们来演示一下Vue实现一下HMR功能。coderwhy HMR的原理
那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）
express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；Socket长连接
即时通信
（微信、聊天、送礼物、进场）-> 心跳包
Http连接-> 短连接
客户端发送http请求和服务器建立连接->服务器做出相应->断开连接
coderwhy HMR的原理
那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.S express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；HMR Socket Server，是一个socket的长连接：
长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（up通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块辶oderwhy hotOnly，host配置
host设置主机地址：
口默认值是localhost；口如果希望其他地方也可以访问，可以设置为0.0.0.0；localhost 和 0.0.0.0 的区别：
localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1；口127.0.0.1：回环地址（Loop Back Address），表达的意思其实是我们主机自己发出去的包，直接被自己接收；正常的数据库包经常 应用层-传输层-网络层-数据链路层-物理层；而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的；比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的；口0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序；比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的coderwhy changeOrigin的解析
这个 changeOrigin官方说的非常模糊，通过查看源码我发现其实是要修改代理请求中的headers中的host属性：
口因为我们真实的请求，其实是需要通过http://localhost：8888来请求的；口但是因为使用了代码，默认情况下它的值时http://localhost：8000；口如果我们需要修改，那么可以将changeOrigin设置为true即可；coderwhy resolve模块解析
resolve用于设置模块如何被解析：
口在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；webpack 使用 enhanced-resolve 来解析文件路径；10.Vite3新增语法特性（⼆）.mp4
VueCLI和Vite
王红元coderwhy1537841
coderwhy Vue CLI脚手架什么是Vue脚手架？
口我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低；所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架；脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架Vue的脚手架就是Vue CLI：CLI是Command-Line Interface，翻译为命令行界面；我们可以通过CLI选择项目的配置和创建出我们的项目；Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置；Vue CLI 安装和使用coderwhy安装Vue CLI（目前最新的版本是v4.5.13）coderwhy@why ~ % n口我们是进行全局安装，这样在任何时候都可npm install @vue/cli -g
升级Vue CLI：口如果是比较旧的版本，可以通过下面的命令来升级npm update @vue/cli -g通过Vue的命令来创建项目Vue create 项目的名称
认识VitecoderwhyWebpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：口比如rollup、parcel、gulp、vite等等什么是vite呢？官方的定位：下一代前端开发与构建工具；如何定义下一代开发和构建工具呢？TypeScript.Vue文件等口我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、等；口所以我们必须通过构建工具来对代码进行转换编译，类似的工具有webpack、rollup、parcel ;口但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多；口构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来；口所以也有这样的说法：天下苦webpack久矣；
Vite的构造coderwhy1522它主要由两部分组成：口一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；口一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；目前是否要大力学习vite ？ vite的未来是怎么样的？口我个人非常看好vite的未来，也希望它可以有更好的发展；口但是，目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行构建；口vite的整个社区插件等支持也还不够完善；口包括vue脚手架本身，目前也还没有打算迁移到vite，而依然使用webpack(虽然后期一定是有这个打算的）口所以vite看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少；
Vite对TypeScript的支持coderwhyvite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译：口只需要直接导入即可；如果我们查看浏览器中的请求，会发现请求的依然是ts的代码：口这是因为vite中的服务器Connect会对我们的请求进行转发；口获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；注意：在vite2中，已经不再使用Koa了，而是使用Connect来搭建的服务器由于大多数逻辑应该通过插件钩子而不是中间件来完成，因此对中间件的需求大大减少。内部服务器应用现在是一个很好的旧版的connect 实例，而不是Koa。
ESBuild解析coderwhyESBuild的特点：口超快的构建速度，并且不需要缓存；口支持ES6和CommonJS的模块化；口支持ES6的Tree Shaking;口支持Go、JavaScript的API;口支持TypeScript、JSX等语法编译；口支持SourceMap;口支持代码压缩；口支持扩展其他插件；
ESBuild为什么这么快呢？口使用Go语言编写的，可以直接转换成机器代码，而无需经过字节码；
Vite脚手架工具coderwhy075 × 744在开发中，我们不可能所有的项目都使用vite从零去搭建，比如一个react项目口这个时候vite还给我们提供了对应的脚手架工具；所以Vite实际上是有两个工具的：Vue口vite：相当于是一个构件工具，类似于webpack、rollup；口@vitejs/create-app：类似vue-cli、create-react-app;如果使用脚手架工具呢？npm init @vitejs/app上面的做法相当于省略了安装脚手架的过程：npm install @vitejs/create-app -gcreate-app
npm install @vitejs/create-app -go
create-appnpm create vite@latest
11.Vue3实现过渡动画.mp4
父组件传递给子组件coderwhy1345 × 442在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：口这个时候我们可以通过props来完成组件之间的通信；什么是Props呢?div class id styleHelloWorld props口Props是你可以在组件上注册一些自定义的attribute口父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；
{{title}}
PowerPoint幻灯片欣职-vue3组件化开发禁用Attribute继承和多根节点coderwhy如果我们不希望组件的根元素继承attribute，可以在组件中设置 inheritAttrs:false：口禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素；口我们可以通过$attrs来访问所有的非props的attribute;我是NotPropAttribue组件
多个根节点的attribute口多个根节点的attribute如果没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上：12.Vue3其他语法补充.mp4
非父子组件的通信coderwhy在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。这里我们主要讲两种方式：口Provide/Inject ;口Mitt全局事件总线；
1277 × 732Provide和InjectcoderwhyProvide/Inject用于非父子组件之间共享数据：口比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容；口在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，就会非常的麻烦；对于这种情况下，我们可以使用 Provide 和 Inject：口无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者；口父组件有一个provide选项来提供数据；口子组件有一个inject 选项来开始使用这些数据；
认识插槽Slotcoderwhy在开发中，我们会经常封装一个个可复用的组件：口前面我们会通过props传递给组件一些数据，让组件来进行展示；口但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；口比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；口我们应该让使用者可以决定某一块区域到底存放什么内容和元素；
13.网络请求axios使用和封装.mp4
PowerPoint幻灯片放映-[13_Vue3组件化开发(动态组件的实现coderwhy1143 x 721动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：<button v-for="tab in tabs":key="tab'":class="{active: currentTab === tab}"@click="tabClick(tab)">{{tab}}
app.component这个currentTab的值需要是什么内容呢？口可以是通过component函数注册的组件；口在一个组件对象的components对象中注册的组件； keep-alive属性coderwhykeep-alive有一些属性：口include-string|RegExp|Array。只有名称匹配的组件会被缓存；口exclude-string|RegExp|Array。任何名称匹配的组件都不会被缓存；口max-number|string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；include 和 exclude prop 允许组件有条件地缓存：口二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；]匹配首先检查组件自身的 name选项；
$parent和$rootcoderwhy我们可以通过$parent来访问父元素。HelloWorld.vue的实现：口这里我们也可以通过$root来实现，因为App是我们的根组件；NavBar.vuevisitParent(){console.log(this.$parent.message);console.log(this.$root.message);注意：在Vue3中已经移除了$children的属性，所以不可以使用了。
认识生命周期oderwhy什么是生命周期呢？口每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；口在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）；口但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数；
■生命周期函数：口生命周期函数是一些钩子函数，在某个时间会被Vue源码内部进行回调；口通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；口那么我们就可以在该生命周期中编写属于自己的逻辑代码了；
14.Element-Plus组件库的使⽤.mp4
Vue3过渡&动画实现
PowerPoint 幻灯片放映-[14 Vue3实现动画]认识动画coderwhy在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：口React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group ;口Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；
Transition组件的原理coderwhy我们会发现，Vue自动给h2元素添加了动画，这是什么原因呢？当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：口1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除CSS类名；口2.如果transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；口3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；
认识animate.csscoderwhy如果我们手动一个个来编写这些动画，那么效率是比较低的，所以在开发中我们可能会引用一些第三方库的动画库比如animate.css。什么是animate.css呢?口 Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Greatfor emphasis, home pages, sliders, and attention-guiding hints.口Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导非常有用；如何使用Animate库呢？口第一步：需要安装animate.css库；口第二步：导入animate.css库的样式；口第三步：使用animation动画或者animate提供的类；
认识gsap库coderwhy某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。什么是gsap呢?口 GSAP是The GreenSock Animation Platform(GreenSock动画平台）的缩写;口它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；
认识列表的过渡coderwhy1452 × 703目前为止，过渡动画我们只要是针对单个元素或者组件的：口要么是单个节点；口要么是同一时间渲染多个节点中的一个；那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？口这个时候我们要使用k<transition-group组件来完成；使用
有如下的特点：口默认情况下，它不会渲染一个元素的包裹器但是你可以指定一个元素并以tagpattribute 进行渲染；口过渡模式不可用，因为我们不再相互切换特有的元素；口内部元素总是需要提供唯一的 key attribute 值；口CSS过渡的类将会应用在内部的元素中，而不是这个组/容器本身； 合成API(–)
Options API的弊端coderwhy在Vue2中，我们编写组件的方式是Options APr：口Options API的一大特点就是在对应的属性中编写对应的功能模块；口比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；但是这种代码有一个很大的弊端：口当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；口当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；口尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；
15.ECharts可视化库的使⽤.mp4
*/// setup函数有哪些参数?// setup函数有什么样的返回值// setup(props, context) {setup(props, {attrs, slots, emit}) {
setup不可以使用this1201 × 596官方关于this有这样一段描述（这段描述是我给官方提交了PR之后的一段描述）：口表达的含义是this并没有指向当前组件实例；口并且在setup被调用之前，data、computed、methods等都没有被解析;口所以无法在setup中获取this；WARNING！因为它不会找到组件实例。在setup中你应该避免使用this，setup 的调用发生主在被解析之前所以它们无法在setup中被获property、取。ted property 求 methodscompu
认识readonlycoderwhy我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？口Vue3为我们提供了readonly的方法；口readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）；
16.vue-router4.x的使用（一）.mp4
在开发中常见的readonlv方法会传入三个类型的参数：口类型一：普通对象；口类型二：reactive返回的对象；口类型三：ref的对象；
Reactive判断的APIoderwhy× 380isProxy口检查对象是否是由reactive或readonly创建的proxy。isReactive…口检查对象是否是由 reactive创建的响应式代理：口如果该代理是readonly建的，但包裹了由reactive创建的另一个代理，它也会返回true;
isReadonly口 检查对象是否是由 readonly 创建的只读代理。
toRaw口 返回 reactive 或readonly代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。shallowReactive口创建一个响应式代理，它跟踪其自身property的响应性，但不执行嵌套对象的深层响应式转换（深层还是原生对象）。
ref其他的APIcoderwhyunref如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：口如果参数是一个ref，则返回内部值，否则返回参数本身；口这是val=isRef(val)?val.value：val的语法糖函数；isRef口判断值是否是一个ref对象。shallowRef口创建一个浅层的ref对象；triggerRef口手动触发和 shallowRef 相关联的副作用：
customRefcoderwhy创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制：口它需要一个工厂函数，该函数接受track和trigger 函数作为参数；口并且应该返回一个带有get 和 set的对象；
watchEffect清除副作用coderwhy什么是清除副作用呢？口比如在开发中我们需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，我们停止了侦听器，或者侦听器侦听函数被再次执行了。口那么上一次的网络请求应该被取消掉，这个时候我们就可以清除上一次的副作用；
Inject函数coderwhy在后代组件中可以通过 inject来注入需要的属性和对应的值：口可以通过inject 来注入需要的内容；口inject可以传入两个参数：√要inject的property的name;√默认值；
17.vuex4.x的使⽤（⼆）.mp4
生命周期钩子coderwhy我们前面说过 setup 可以用来替代 data、methods、computed、watch等等这些选项，也可以替代生命后期钩子。那么setup中如何使用生命周期函数呢？口可以使用直接导入的onX函数注册生命周期钩子；选项式 APIHook inside setuponMounted(() =>{Not neededbeforeCreateconsole.log("onMounted")}）Not neededcreatedbeforeMountonBeforeMountonUpdated(() =>{onMountedmountedconsole. log('onUpdate')beforeupdateonBeforeupdate})updatedonUpdatedonUnmounted(() =>{onBeforeunmountbeforeunmountconsole.log('onUnmounted')}）onunmountedunmountedonActivatedactivateddeactivatedonDeactivated
认识h函数1555 × 767Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数，它比模板更接近编译器；口前面我们讲解过VNode种VDOM口Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）；口事实上，我们之前编写的template中的HTML最终也是使用渲染函数生成对应的VNode;口那么，如果你想充分的利用javaScript的编程能力，我们可以自己来编写createVNode函数，生成对应的"templateVNode ;哈哈哈VNode哈哈哈
import {h} from 'vue' 相当react-crateElment
18.vuex4.x的使⽤（三）.mp4
认识自定义指令coderwhy在Vue的模板语法中我们学习过各种各样的指令：v-show也允许我们来自定义自己的指令。v-model等等，除了使用这些指令之夕v-foIVue口注意：在Vue中，代码的复用和抽象主要还是通过组件；口通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；
自定义指令分为两种：口自定义局部指令：组件中通过directives 选项只能在当前组件中使用；口自定义全局指令：app的directive方法，可以在任意组件中被使用；
指令的生命周期coderwhy一个指令定义的对象，Vue提供了如下的几个钩子函数：created：在绑定元素的attribute 或事件监听器被应用之前调用；beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；mounted：在绑定元素的父组件被挂载后调用；beforeUpdate：在更新包含组件的 VNode之前调用；
指令的生命周期coderwhy一个指令定义的对象，Vue提供了如下的几个钩子函数：created：在绑定元素的attribute 或事件监听器被应用之前调用；beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；mounted：在绑定元素的父组件被挂载后调用；beforeUpdate：在更新包含组件的 VNode 之前调用；updated：在包含组件的VNode及其子组件的VNode更新后调用；beforeUnmount：在卸载绑定元素的父组件之前调用；unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；
认识Teleportoderwhy在组件化开发中，我们封装一个组件A，在另外一个组件B中使用：口那么组件A中template的元素，会被挂载到组件B中template的某个位置；口最终我们的应用程序会形成一颗DOM树结构；
认识Teleportcoderwhy在组件化开发中，我们封装一个组件A，在另外一个组件B中使用：口那么组件A中template的元素，会被挂载到组件B中template的某个位置；口最终我们的应用程序会形成一颗DOM树结构；但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置：口比如移动到body元素上，或者我们有其他的div#app之外的元素上；口这个时候我们就可以通过teleport来完成；Teleport是什么呢?口它是一个Vue提供的内置组件，类似于react的Portals；口 teleport翻译过来是心灵传输、远距离运输的意思；√它有两个属性：〉to：指定将其中的内容移动到的目标元素，可以使用选择器；>disabled：是否禁用teleport的功能;
认识Vue插件coderwhy通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：口对象类型：一个对象，但是必须包含一个install的函数，该函数会在安装插件时执行；口函数类型：一个function，这个函数会在安装插件时自动执行；
app.use(plugin)
Vue3源码学习
Mini-Vue Vue架构
虚拟DOM的优势erwhy目前框架都会引入虚拟DOM来对真实的DOM进行抽象，这样做有很多的好处：首先是可以对真实的元素节点进行抽象，抽象成VNode（虚拟节点），这样方便后续口因为对于直接操作DOM来说是有很多的限制的，比如diff、clone等等，但是使用些，就变得非常的简单；口我们可以使用JavaScript来表达非常多的逻辑，而对于DOM本身来说是非常不方其次是方便实现跨平台，包括你可以将VNode节点渲染成任意你想要的节点口如渲染在canvas、WebGL、SSR、Native(iOS、Android)上;口并且Vue允许你开发属于自己的渲染器（renderer）在其他的平台上渲染；
三大核心系统coderwhy事实上
Vue的源码包含三大核心：
口 Compiler模块：编译模板系统；
口Runtime模块：也可以称之为Renderer模块，真正渲染的模块；
口 Reactivity模块：响应式系统；
实现Mini-Vueoderwhy这里我们实现一个简洁版的Mini-Vue框架，该Vue包括三个模块：渲染系统模块；口可响应式系统模块；口应用程序入口模块；
07_LEARN_VUE_SOURCE
https://github.com/Zt2tzzt/vue3-demo-v0
https://github.com/sean-lgt/vue3-study-codewhy
mini-vue // 应用程序入口 index.js function createApp(rootComponent) { return { mount(selector) { const container = document.querySelector(selector) let isMounted = false; //是否已经挂载 let oldVNode = null; // 旧的虚拟node // 增加监听 事件订阅 watchEffect(function() { if (!isMounted) { oldVNode = rootComponent.render() mount(oldVNode, container) isMounted = true } else { //已经有了 则需要进行比对 const newVNode = rootComponent.render() patch(oldVNode, newVNode) oldVNode = newVNode } }) } } } // reactive.sj // depend on 依赖 class Dep { constructor() { //构造器 // 初始化subscribers 订阅者，数据结构是 Set，成员的值都是唯一的，防止重复 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set // https://es6.ruanyifeng.com/#docs/set-map this.subscribers = new Set() } // 增加订阅 depend() { if (activeEffect) { this.subscribers.add(activeEffect) } } //发布、通知订阅者 notify() { this.subscribers.forEach(effect => { effect() }) } } let activeEffect = null //当前激活事件 // 事件监听 function watchEffect(effect) { activeEffect = effect effect(); //初始化时立即调用一次 activeEffect = null //清空 } // Map({key:value}) key 是一个字符串 // WeakMap(key(对象):value) key是一个对象，弱引用 // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map const targetMap = new WeakMap() // 获取依赖 function getDep(target, key) { //1.根据对象（target）取出对应的Map对象 let depsMap = targetMap.get(target) if (!depsMap) { // 如果为空，则创建 depsMap = new Map() targetMap.set(target, depsMap) } //2.取出具体的dep对象 let dep = depsMap.get(key) if (!dep) { dep = new Dep() depsMap.set(key, dep) } return dep } // VUE3 对数据进行劫持 Proxy // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy function reactive(raw) { return new Proxy(raw, { get(target, key) { const dep = getDep(target, key) dep.depend() //订阅 return target[key] }, set(target, key, newValue) { const dep = getDep(target, key) target[key] = newValue dep.notify() //通知 } }) } // VUE2 对数据进行劫持 使用 Object.defineProperty 进行getter和setter 操作 // raw 原始数据 function reactiveVue2(raw) { Object.keys(raw).forEach(key => { const dep = getDep(raw, key) let value = raw[key] Object.defineProperty(raw, key, { //getter 操作 get() { dep.depend() //增加订阅依赖 return value }, // setter操作 set(newValue) { if (value !== newValue) { // 如果发生更改，则通知发生通知给相关的订阅者 value = newValue dep.notify() } } }) }) return raw; } // TODO:测试代码 // const info = reactive({ // counter: 100, // name: 'why' // }) // // 增加订阅 // watchEffect(function() { // console.log(' 标签：TypeScript,使用,webpack,Vue,Vue3,组件,coderwhy,我们 From： https://www.cnblogs.com/KooTeam/p/18636851