Vue2到Vue3框架知识点整理——全（详细）

在学Vue框架之前需要了解一些知识：ES6语法规范、ES6模块化、包管理器、原型、原型链、数组的常用方法、axios、promise;

---

Vue是什么？ 

一套用于构建用户界面的渐进式的javaScript 框架

不得不说，它是有一位中国小伙（由雨溪）开发~，真的很牛！

Vue的特点：

组件化、声明式、虚拟DOM、Diff算法

 Vue的知识点：

1、初识Vue:

大概对Vue实例和模板有个概念：

其次对于语法很好区分的，和其他语言没什么区别，js是一门弱类型语言！

 2.Vue模板语法：

插值语法：一般是用于解析标签体的内容，可以直接读取data中的所有属性；{{}}

指令语法：解析标签（标签属性、标签体内容、绑定事件），指令有很多（v-bind,v-if,v-on,v-model.....）以及指令的简写

 3.Vue的两种绑定方式：

单向和双向（实现数据和页面之间的通信）

 4.Vue中的data和el属性的两种写法

其中的vm.$mount('#root')是一个时间周期函数，后面会有具体的详解；

data用函数式的时候默认this指向的是当前的Vue实例，如果改为用箭头函数，this指向的是windows实例

 5.Vue的启发前身是：MVVM模型

 6.M,V,VM三者关系图

通俗的话来说，数据通过vm实例与页面之间相互通信；

 7.Object.defineProperty 对象定义属性

     在其情况下，该属性不可以被枚举（遍历），不可以被修改和删除；

enumerable:false;//控制属性是否可以被枚举

writable:false;//控制属性是否可以被修改

configurable:false;//控制属性是否可以被删除

//object.keys(对象名）//获取对象的全部属性成一个数组

 我们可以通过加getter,setter来读取 或者修改该属性

样例：

8.数据代理：

定义：通过对象代理对另一个对象中属性的操作（读/写）

样例：

8.1、Vue的数据代理

数据代理图示：

 9.事件的基本使用

 10.事件的修饰符

前三种比较常见

 样例：

 效果就是组织网页跳转，以及弹窗只会展现一次

 值得了解的是只有wheel它需要等待事件回调执行完毕才会执行行为，所以需要用到passive;想scroll就完全不需要，它默认行为立即执行

 11.Vue中常见的按键别名

未提供的按键例如CapsLock，这样的由两个字母组成的名字应该改为caps-lock(短横线命名）

用编码命名不推荐（之后可能会取消这种命名方式）

然后特别注意一下、系统修饰键

 12.Vue的计算属性

样例： 

在不修改数据的情况下，可以简写function(){}默认是get函数 

13.监事属性

样例

 

 13.1.深度监视

 样例

 如果不初始化可以直接简写

 样例2：

 14.计算属性和监视之间的区别

computed不能实现异步操作

 15.绑定样式：字符串写法

//使用v-bind 单项绑定，把样式更新到页面

 //讲一个随机生成函数，向下取整；

 

 //样式绑定：数组写法：样式个数不确定、名字不确定

  //样式绑定：对象写法：样式个数确定、名字确定，但需要动态决定用不用

 //也可以直接绑定style样式

总结：

 16.条件渲染

注意if else if 匹配,只能匹配到最近一个

if 和show的区别，show只会被隐藏，if会被移除

  样例：

17.V-for 循环指令

 在循环遍历过程中，如果没有输入数据，进行排序或删除，使用index,id作为key其实都不影响，但是为什么会影响呢？如下图：

 在以index作为key时，首先原来的数据会产生一个虚拟的dom，然后转化为真实的dom,在更新数据后，也会产生一个虚拟dom，而这个时候利用到diff对比算法，去比较；如果相同则直接复用原来的，相反，生成新的真实dom，这也是开篇说到的重复利用dom节点，那么，如果我以index作为对比，首先I对应，index=1下的，key=0中的名字不同，然后新生成，但是后面的input标签在对比是认为相同的所以直接复用了，进而造成图中，名字与信息错乱的局面，如果以id的话，他直接去匹配到对应的id,不会因为顺序改变了，造成原本id变化

 

 18.虚拟DOM中key的作用以及选择总结：

 19.列表过滤

样例：类似于模糊搜索，输入一个字，找出包含该字的名字

要注意不要更改原来的数组，下面是两种写法

 一种是通过watch,另一种是computed实现

 

 20.数据的更新检测

这里相当于给你封装了一些新的函数，它的名字与原来的名字一样，但是多了一些监视功能

 push.pop,shift,unshift,splice,sort,reverse

 20.1Vue是如何监视对象中的数据呢？

 21.收集表单数据

记得初始化为：‘ ’空串

 22.过滤器

 23.指令集合

 24.cookie 的工作原理：

不同的浏览器不可以获取cookie字段，比如在谷歌登录后，登录火狐并不会有账号登录

但是我们如果知道了，cookie密钥以后，复制到火狐也可以登录进去

所以我们的账号密码会被服务器解析成密钥如果被获取。。。不用多说了吧，当然现在肯定不会让你轻易获取会拦截的

下面图：首先我输入账号密码信息后，请求，会返回一些cooker密钥，然后被存储在cookie上，

当我验证成功后，我登录访问我的其他信息，比例在Git上访问我的仓库这个时候就不需要在重新登录，只需要调用cookie存取的密钥是否相同了，即可跳转

 24.1.v-html指令：

25.V-cloak指令

 26.自定义语法

样例：

局部指令：

全局指令： 

 

 27.生命周期（生命周期（回调）函数，生命周期钩子）

在Vue在关键时刻帮我们调用一些特殊名称的函数，名字不可以改，但是函数的具体内容可以根据需求编写，生命周期函数中的this指向的是vm或者是组件的实例对象（组件的概念后面再讲）

样例：

 27.1生命周期流程图

再调用mounted之前后者之后都有一些其他时期，可以理解为有三对，创建，挂载，销毁；每对包括（创建前beforecreate，创建完毕created这样的；两种状态）后两种十分重要

 在Vue的官网上其实有这样一张示意图代表着整个周期的流程

注意：创建是初始化的是数据，而不是实例，对虚拟DoM操作是无效的，页面不会渲染；最好不要在销毁阶段去修改数据，这里不会再触发了，销毁后VM实例不会在存在，但是原生的DOM事件还可以被调用，依旧有效

 

 

 总结：

 28.模块、组件、模块化、组件化

1. 模块：向外提供特定功能的js程序。一般就是一个js文件，目的是因为js文件很多很复杂，复用js,简化js的编写，可以提高js运行效率

2. 组件：用来实现局部（特定）功能效果的代码集合，因为界面功能很复杂，复用编码，可以简化项目编码，提高运行效率

传统方式编写应用：依赖关系混乱，不好维护，代码复用率不高！

 

组件方式编写应用：容易维护，易复用

 

 组件嵌套

 组件的定义：实现应用中局部功能代码和资源的集合

两个概念：

模块化：当应用中的js都以模块来编写的，那这个应用就是一个模块化应用

组件化：当应用中的功能是多组件的方式来编写的，那这个应用就是一个组件化的应用

 29.非单文件组件、单文件组件

非单文件组件：一个文件中包含n个组件

单文件组件：一个文件中只包含一个组件

样例：

 

29.1：如何使用组件

 一、三大步骤：

1.定义组件(创建组件）

2.注册组件

3.使用组件（写组件标签）

二、如何定义：

使用vue.extend(option)创建，其中options和new Vue(options)时传入的那个options几乎一样，区别：

1.el不要写，最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器

2.data必须写成函数——避免组件被复用，数据存在引用关系

备注：使用template可以配置组件结构。

三、如何注册：

1.局部注册：靠new Vue 的时候传入components 选项

2.全局注册：靠Vue.compontent('组件名',组件)

四、编写组件标签：

<school> </school>

五、注意事项：

30.关于VueCompontent

它是一个构造函数，也会生成一个实例对象vc,每次调用都是全新的

 30.1、VC与Vm的内置关系

VueCompontent.prototype.__proto__===Vue.prototype

让组件实例对象（vc）可以访问到Vue原型上的属性、方法

30.2VC与Vm两者的关系

推荐一个可以自动匹配的标签的插件：Vetur。。。

31.文件组件 结构

 

 可以通过<v+enter实现上面的组件结构

 32.Vue脚手架 ——Vue CLI(command line interface)

 说明：Vue脚手架是Vue官方提供的标准化开发工具（开发平台）安装上Vue官网注意版本匹配问题

 32.1脚手架文件结构

## 补充一下，关于render函数

如果不引入：报错如下

写法

总结

 其中的index页面引入配置图标和标题有了些许变化

32.2 默认配置Vue.config.js

 关闭生产提示：

Vue.config.productionTip=false

 32.3.ref属性

 给元素或子组件注册引用信息

 32.3.props配置：只读

 总结：

 32.4.mixin(混入)

样例： 

  

 32.5插件总结：用于增强Vue

 32.6.scoped样式

简单来说就是每个组件互不干扰

 

33.组件化编码流程

 

推荐一个记笔记的：readme.md type

@install open

 通过一个案例实现：

 

 

33.webStorage(localStorage,sessionStorage)

当然别瞎想，现在肯定没有那么容易获取你的key和value

 34.子给父传递数据：

样例：

 两种写法：v-on,ref

 34.1.自定义事件

样例适用于子与父之间通信

注意回调函数中的箭头函数

35.全局事件（GlobalEventBus）

适用于兄弟组件传信，或者祖孙之间通信，它就像一个公共汽车一样别人管它这上车（存数据），到了点下车（读取数据），太可怜了

 

除了全局事件还有一个消息订阅与发布也是一样的

35.1.消息订阅与发布(publish subscrible)

 35.3. nextTick

在官网中未展示出的三个周期函数，其中一个就是nextTick,可以想到用于聚焦文本框可以使用

 36.Vue封装的过渡动画

引入一个Animate.css样式

 写法：

 37.Vue脚手架配置代理

通过代理可以向服务器请求数据，可以通过代理把不同的host(5000)端口号不同也能向服务器请求数据

 37.1.vueResourese

在调用ajax数据时，不在需要用axios去get

 

  

38.插槽slot

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种通信方式，适用于父组件=》子组件

2.分类：默认插槽、具名插槽、作用域插槽

 

 具体编码

 

 样例效果：

 
39.Vuex 

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件共享状态进行集中式的管理（读/写），也是一种组件的通信方式，且适合用于任意组件间通信。

1.多组件依赖于同一状态（数据）

2.来自不同组件的行为需要变更同一状态（数据）

39.1 全局事件总线和vuex实现多组件共享数据对比图

 39.2vuex示意图(Dispatch/action、commit/Mutation、Mutate/State、render/vc)

 

注意在vue2中，要用vuex的3版本，在vue3,要使用vuex的4版本
39.3.搭建vuex环境

 

 40.mapMutations、mapState、mapGetters、mapActions

 

 

 41.模块化+命名空间namespaced

 读取数据

 42.vue-router

1.引入：

 2.vue-router

理解1：vue的一个插件库，专门用来实现SPA应用

2.1SPA应用：

1.单页Web应用

2.整个应用只有一个完整的页面

3.点击页面中的导航链接不会刷新页面，只会页面的局部更新

4.数据需要通过ajax请求获取

2.2理解2：

路由：

一个路由就是一组映射关系（key-value）,key为路径，value可能是function或者component

路由分类

a)前端路由:  value是component，用于展示页面内容，工作过程：当浏览器的路径改变时，对应的组件就会显示

b)后端路由：value是function,用于处理客户端提交的请求，工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

 放到路由器上的示意图

3.基本使用

4.active-class 实现切换

 

 5.注意事项

存放文件，切换后会被销毁，每个路由都可以通过$route属性存储自己的信息，整个应用只有一个router

 

42.2.路由的query参数

？后传递

​​​​​​​

 2.1，命名路由：简化路由的跳转

 2.2.路由的params参数

使用占位符声明接受params参数

​​​​​​​

 42.3路由的props配置

 1.1.router-link_replace属性

 42.4.编程式路由导航push,replace

 42.5.缓存路由组件

 42.6.activated,deactivated生命周期钩子

这是剩下的最后两个，可以解决切换时定时器不断工作的效果

 42.7.路由守卫

1.1全局守卫

 2.2.独享守卫

3.3.组件守卫

 4.beforeRouteEnter,beforRouteLeave

42.8.路由器的工作模式：hash,history

 43.Vue UI 组件库

 配置：

 Vue3快速上手

 1.性能提升

 2.创建Vue3.0工程

 2.1.创建方式

 通俗来讲就是，你需要什么就给你加载什么，时间会快很多

2.2 界面变化

 

 3.set up_Compostion API

 注意点

 4.ref函数与reactive函数

4.1.响应式

对比

vue2中的响应式原理

 vue3的响应式的原理

总结

4.3.reactiv对比ref

 

5.计算机属性与监视

1.computer函数

 

 2.watch函数

 

6.watchEffect函数

7.生命周期

示意图

 

 对比vue2提供的组件api生命周期钩子

 8.hook函数和to ref

 9.其他Composition API

1.shallowReactive /shallowRef

 2.readonly/ shallowReadonly

 3.toRaw /markRaw

 10.provide和inject

图解

作用：

 样例：

11.响应式数据的判断

 12.Composition API的优势

对比

 13.Fragment和Teleport新组件

 14.Suspense

 

 15.全局API的转移

 调整

 

心得：愿大家付出即有收获，高薪就业

首先这是根据看哔哩哔哩中的尚硅谷的禹神的课边记得笔记，老师讲的很好！值得大家去看，学下来给我得感觉是Vue2更加讲得是原理，写得时候接触得是底层逻辑，虽然在2，3中都有封装（组件化）得思想，但是3中组件化就更加明显了！有一种我先学了c,在学c++得感觉哈哈，可能比喻得不太恰当啦！，学完很爽