Vue复习笔记

最新推荐文章于 2026-06-15 18:45:04 发布

原创最新推荐文章于 2026-06-15 18:45:04 发布 · 249 阅读

本内容遵循CC 4.0 BY-SA版权协议

Vue.js是一个用于构建交互式Web界面的库，强调数据绑定和组件化。它提供了MVVM模式的视图模型层和双向数据绑定，简化DOM操作。文章还介绍了Vue的生命周期钩子、事件处理、数组侦听、模板字符串等特性，并讨论了JavaScript中的闭包和ES6新特性。

Vue简介

1.Vue.js是用于构建交互式的 Web 界面的库。

2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。

3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。

4.Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。

5.内核生成：Es6和--->类和继承。

6.Model：js对象。

View：html视图。

通过事件驱动去监听视图的变化，方法和指令，监听视图对象的方法。

双向绑定（v-model）；

DOM事件：JS

7.Css\js\html\-->js类，模式：MVC模式（虚拟DOM），单向数据流，js的角度封装。

8.vue是单独拿出来，MVVM模式（分开的，用事件去监听DOM），双向数据流，采用指令(标记中的一个属性)。

闭包以及闭包的三个作用

闭包(closure):闭包是一种代码形式，内部函数访问外部函数的局部变量

在JS中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥

闭包的三个作用：

作用1：解决变量污染问题，让变量被函数保护起来

作用2：可以延长变量的生命周期

作用3：提供了有限的访问权限

键值对

ES6新特性：

const和let变量，模板字面量，结构，增强的对象字面量，for...of循环，展开运算符(...)，剩余参数（可变参数），ES6箭头函数，类的支持，字符串模板，iterator，generator，模块，Symbols等等。

ES6语法：任何一个对象的成员，要么是数据成员，要么是函数成员。但无论是函数成员还是数据成员，在本质上都是一个 “ 键-值 ” 对，“ 键 ” 是这个成员的名字，“ 值 ”是这个成员的内容。对于函数成员来说，“ 键 ” 是函数的名字，“ 值 ” 是函数的地址。

01:什么是键值对?

键值对('key = value')

顾名思义,每一个键会对应一个值。

02:举个例子看看?

a:身份证号和你本人是绑定的关系。每一个身份证号(键)都会对应一个小可爱(值)。

b:我们在登录微信或者游戏时，需要输入手机号验证身份。系统会向该手机号发送一条验证短信。

这里的手机号码(键),对应的接收用户就是值。

03:每个键对应响应的值,当按下响应的键时,就会输出响应的结果。

04:键:就是存的值的编号。

值:就是要存放的数据。

MvvM简介：

MvvM是Model-View-viewModel的缩写，是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，这就是数据双向绑定。

模板字符串

它以“ ` ” 符号开头和结尾，代替了普通字符串开头和结尾的单引号或双引号。在这种模板字符串中可以方便的插入变量。

ES6

 let hello = ' 欢迎来自 ${ this.city } 的 ${ this.name } ! ' ;



ES5

let hello =  " 欢迎来自 " + this.city + " 的 " + this.name " ! " ;

在上面案例中的两个语句分别是ES6和ES5写法，两个语句表达的是一个意思，但是ES6写法明显更方便容易理解。另外使用模板字符串的优点是，可以跨行，直接产生多行文本。如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能获得。

生命周期钩子

Vue.js会自动维护每个Vue实例的生命周期，就是说，每一个Vue实例都会经历一系列的从创建到销毁的过程。例如，在创建实例对象，编译模板，将实例挂载到页面上以及最终进行销毁等。在这个过程中，Vue实例会在不同阶段的时间点向外部暴露出各自的回调函数，这些回调函数又称为“ 钩子函数 ” ，开发人员可以在这些不同阶段的钩子函数中定义业务逻辑。

一些常用的钩子函数

beforeCreate() — 在实例创建之前调用

created() — 在实例创建之后调用，此时尚未开始DOM编译

brforeMount() — 在挂载开始之前调用

mounted() — 在实例被挂载后调用，这时页面的相关DOM节点已被新创建的vm.$el 替换。它相当于JavaScript中的 window.onload() 方法。

beforeUpdate() — 每次页面中有元素需要更新时，在更新前就会调用beforeUpdate() 钩子函数。

updated() — 每次页面中有元素需要更新时，在更新完之后就会调用

beforeDestroy() — 在销毁实例前调用，此时实例仍然有效

destroyed() — 在实例被销毁后调用

数组侦听

侦听器的基本作用是在数据模型中的某个属性发生变化的时候进行拦截，从而执行指定的处理逻辑。我们通常会在两种场景中用到侦听器，1. 拦截操作 2. 耗时操作。

对数组进行侦听，数组是引用类型，因此存在比较复杂的侦听规则。从理论上来说，修改一个数组的内容，比如修改数组中的某个元素的值，或者给数组增加新元素等，都不会修改数组本身的地址（引用），因此也不会被侦听到。为此，Vue.js对数组做了特殊处理，使得使用标准的数组操作方法对数组所做的修改，都可以被侦听到。

下列被侦听到的标准方法修改数组

push() — 尾部添加

   pop() — 尾部删除

   unshift() — 头部添加

   shift() — 头部删除

   splice() — 删除，添加，替换

   sort() — 排序

   reverse() — 逆序

使用了push(）等标准的数组操作方法，就可以被侦听到。

彻底替换一个新数组，可以被侦听到。

如果直接修改数组的元素，那么无法被侦听到，解决方法是使用$set() 方法修改元素的内容，只有这样才能被侦听到。

数组增删改查代码示例

事件对象属性

“ 事件 ” 是发生在HTML元素上的某些特定的事，它的目的是使页面具有某些行为，执行某些“ 动作 ”。在一个网页中，通常已经预定好了很多事件，开发人员可以编写相应的“ 事件处理程序 ” 来响应相应的事件，事件可以是浏览器行为，也可以是用户行为。

事件对象，浏览器中的事件都是以对象的形式存在的，在标准的DOM中，规定事件对象必须作为唯一的参数传给事件处理函数，不同的事件对应的事件属性也不一样。

事件对象中常见的属性

 altKey — Boolean — 读写 — 按下Alt键则为true，否则为false

   button — Integer   — 读写 — 鼠标事件，值对应按下的鼠标键

   cancelable — Boolean — 只读 — 是否可以取消事件的默认行为

   stopProPagetion() — Function — N/A — 阻止事件向上冒泡

   clienX — Integer  — 只读 — 鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏，滚动条等

   clienY — Integer  — 只读 — 鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏，滚动条等

   ctrIKey — Boolean — 只读 — 按下Ctrl键为true，否则为false

   relatedTatget — Eiement — 只读 — 鼠标正在进入/离开元素

   charCode — Integer — 只读 — 按下按键的Unicode值

   keyCode  — Integer — 读写 — 按下按键时为0，其余情况下为按下按键的数字代号

   detail — Integer — 只读 — 鼠标按键的单击次数

   preventDefault() — Function — N/A — 阻止事件的默认行为

   screenX — Integer — 只读 — 鼠标相对于屏幕的水平坐标

   screenY — Integer — 只读 — 鼠标相对于屏幕的垂直坐标

   shiftKey — Boolean — 只读 — 按下Shift键为true，否则为false

   target — Element — 只读 — 引起事件的元素/对象

   type — String — 只读 — 事件的名称

浏览器支持的事件种类非常多，可以分为好几类，每一类里面又有很多事件。

事件类别

用户界面事件 —— 涉及与BOM交互的通用浏览器事件

焦点事件 —— 在元素获得或失去焦点时触发的事件

鼠标事件 —— 使用鼠标在页面上执行某些操作时触发的事件

滚轮事件 —— 使用鼠标滚轮时触发的事件

输入事件 —— 向文档中输入文本时触发的事件

键盘事件 —— 使用键盘在页面上执行某些操作时触发的事件

输入法事件 —— 使用某些输入法时触发的事件

事件修饰符

标准的DOM事件对象中包括了 preventDefault()，stopPropagation()等方法，用于取消事件的默认行为或阻止事件的传播（继续冒泡）等，Vue.js为v-on指令提供了 “ 事件修饰符 ” ，通过它们可以声明而非命令的方法实现功能。

事件修饰符分为五种

.self — 作用是，仅当一个事件的目标（event.target）是当前元素自身时，才会触发处理函数，就是说，内部子元素变化触发这个事件

.stop — 会自动调用stopPropagation() 方法，从而阻止事件的继续传播

.capture — 作用是，改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式

.once — 是指触发一次事件。如果给外层div增加.once事件修饰符，那么每次刷新页面以后，只有第一次单击时才会弹出提示框

.prevent — 添加后，程序会自动调用event.preventDefault() 方法，从而取消事件触发的默认行为

在使用事件修饰符时，需要记住两点

1. 独立使用事件修饰符，在某些情况下，也可以仅仅使用某个事件修饰符，而不绑定具体的事件处理方法。

2. 串联使用事件修饰符，对于一次绑定，可以同时设置多个修饰符，只需要把它们依次串联在一起就可以了，这称为修饰符的“ 串联 ”。

函数中的this

在函数中使用this:

不管函数怎么定义,不管函数在哪定义,只看函数的调用(箭头函数除外)

普通函数(直接调用/全局调用):this指向window

全局作用域

在代码中任意地方都能访问到的对象拥有全局作用域

(即在全局作用域中定义的变量可以在任何地方使用)

全局作用域在页面打开时创建,在页面关闭时销毁。

三种情况的代码示例

作用域

作用域是运行时代码中某些特定部分中变量,函数和对象的可访问性

换句话说，作用域决定了代码中变量和其他资源的可见性

v-show和v-if

v-show和v-if都可以用来控制标签的隐藏和显示

<标签 v-show='布尔值'></标签>

<标签 v-if='布尔值'></标签>

布尔值为true，就显示;布尔值为false，就隐藏

【v-show】

1.本质是标签display设置为none，控制隐藏，只基于css进行切换

2.有更高的初始渲染消耗

3.更适合频繁切换的情况

【v-if】

动态的向DOM树内添加或者删除DOM元素

有更高的切换消耗

适合运行条件很少改变的情况

需要注意的是：当它们处于同一节点时，v-for 的优先级比 v-if 高。 v-for 每次迭代时都会执行一次 v-if ，这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。如果希望有条件的跳过循环的执行，那么应该将v-if 置于外层元素上。

this

什么是this?

this是一个使用在作用域内部(块级作用域、函数作用域、全局作用域)的关键字。

this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用.总指回调用它的对象。

(全局很少使用,大部分在函数内部使用。)

【this指向】

根据运行时的不同，this指向的对象有所区别。

在绝大多数情况下,函数的调用方式决定了this的值。

浏览器环境/全局环境下使用this:this指向window对象。

Math对象

内置对象:属于object对象，由js作者提前写好的对象，里面存储了一些属性和方法，直接拿来使用即可

相当于手机内置应用,如短信、电话。一买来就自带，直接使用

Math:数学对象

Date:日期对象

Function:函数对象

RegExp:正则表达式

Array:数组对象

String:string对象

Boolean:boolean对象

Number:number对象

Map对象

Map对象用来保存键值对

在Map对象中任何值(对象或者原始值)都可以作为一个键(任何数据类型)或一个值

【基本Map方法】

new Map():创建新的Map对象

set(():为Map对象中的键设置值

get():获取Map对象中键的值

keys():返回Map对象中键的数组

values():返回Map对象中值的数组

entries(():返回Map对象中键/值对的数组

【Map()属性】

Map.size:返回Map中元素的数量

数组迭代方法

filter

1.filter应用场景:用于筛选数组中满足条件的元素，返回筛选后的新数组

2.语法:

a.数组.filter(function(value,index,arr){

return 筛选条件

3.注意点:

a.回调函数执行次数 == 数组长度

b.filter函数返回的新数组长度 !=原数组长度

findIndex

1.数组findIndex方法:

a.作用:获取符合条件的第一个元素位置(下标)。

b.语法:arr.findIndex((item,index) => {return true/false})

返回值:符合则返回元素下标，不符合则返回-1。

c.应用场景:适合于数组中元素为对象·类型，比传统for循环要高效

forEach

应用场景:用于遍历数组，相当于for循环另一种写法。

语法:数组.forEach(function(value,index,arr){// 算法 })

forEach必须提供一个参数

value:每次遍历到的数组元素

index:每次遍历到的数组的下标

arr:数组

forEach

注意点:

回调函数执行次数 == 数组长度(数组中有多少元素，回调函数就会执行几次)

b.forEach函数没有返回值

回调函数不需要return(就算手动ruturn，也不会结束循环)

filter方法和forEach方法的参数完全相同。

filter主要是根据条件进行筛选,满足条件的值会被return返回，需要一个变量接收

Map

map:遍历每一个元素，并对每一个元素做响应处理，返回一个新数组

注意点：回调函数执行次数 == 数组长度：数组中有几个元素，回调就会执行几次

函数返回的新数组长度 == 原数组长度

回调函数如果不return，新数组中每一个元素都变成了undefined

语法：(元素,下标) => {return 新元素}

reduce

数组reduce方法:

作用:遍历数组元素,为每个数组执行一次回调函数。

语法: arr.reduce((sum,value)=>{ return sum + value })

返回值:最终sum值

应用场景:数组求和/平均数/最大值/最小值

注意点:最好给一个初始值，避免空数组报错

sum:初始值,默认为数组第一个元素。

value: 数组的每一个元素,默认为数组第二个元素

every

应用场景：判断数组中是否所有元素都满足条件

//注意点：every函数返回一个布尔类型值

//需求：判断数组中没有负数

some

应用场景:用于判断数组中是否存在满足条件的元素

注意点:

a.回调函数执行次数 != 数组长度

b.some函数返回一个布尔类型值

c.回调函数返回布尔类型值用于结束遍历

return true; 遍历结束，且some函数返回值为true。

return false; 遍历继续，且some函数返回值为true。

需求:判断数组中有没有负数

V-for中key属性的作用

key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。不仅仅在数组生成组件上，其他地方也可以使用key，主要是 react利用key来区分组件的，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。

key属性还有另外一种使用方法，即强制替换元素，从而可以触发组件的生命周期钩子或者触发过渡。因为当key改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。

key属性可以用来提升v-for渲染的效率，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去

在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识

给key赋值的内容不能是可变的

1. 在写v-for的时候，都需要给元素加上一个key属性

2. key的主要作用就是用来提高渲染性能的！

3.key属性可以避免数据混乱的情况出现（如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）

部分示例