【记录】Vue2学习汇总 1 / 4-CSDN博客

本文链接：https://blog.csdn.net/sdirws/article/details/130903405

本文总结了Vue2中的关键知识点，包括计算属性的工作原理与使用注意事项，watch的深度监视特性，数据监测的Vue.set方法，自定义指令的定义与使用流程，以及组件的生命周期和使用步骤。同时，提到了模板语法、数据绑定、事件处理等基础内容。

摘要由CSDN通过智能技术生成

前言 : 大纲 1 / 4

教程：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

把Vue学习分为四个阶段，分别记录个人觉得重要的知识点

1 / 4 Vue2基础：Vue基础知识结构中的重点，及部分基础内容

2 / 4 Vue2学习 : 暂无
3 / 4 Vue2学习 : 暂无
4 / 4 Vue3基础 : 暂无

一、重点知识点

计算属性 computed

原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

执行：(1).初次读取时执行一次 (2).依赖的数据发生改变时会被调用执行
如果计算属性要被修改，那必须写 set 函数去响应修改，且set中要引起计算时依赖的数据发生改变

注意：complete依赖于最终返回值，且无法执行异步操作

官网中vue的set方法： “ 向响应式对象中添加一个property，并确保这个新的property也是响应式的，且触发视图更新 ”

监视属性 watch

原理：调用handler方法，其中可以设置多种参数

写法： (1). new Vue时传入watch配置 (2). 通过vm.$watch监视

深度监视：默认不监测对象内部值的改变（一层），配置deep:true可以监测对象内部值改变（多层）。

注意：watch可以进行异步操作

watch: {
	isHot: {
		immediate:true, //初始化时handler调用一次
		deep:true, //深度监视
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	},
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}
}

数据监测

vue会监视data中所有层次的数据

1、监视对象中的数据： 通过setter实现（是数据对象）

注意：对象中后追加的属性默认不做响应式处理，如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

特别注意： Vue.set() 和 vm. $set() 不能给 vm 或 vm的根数据对象(data等) 添加属性！！！

2、监测数组中的数据： 通过包裹数组更新元素的方法

原理：(1). 调用原生对应的方法对数组进行更新 (2). 重新解析模板，进而更新页面

注意：在Vue修改数组中的某个元素要使用这些API才能实现响应式：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.1、数组使用API调用响应式原理

原型链：构造函数里的显示原型与隐式原型

例：数组中的push方法来自于Arrays中原型对象的push，但vue给继承来的隐式push做了一层封装，所以vue中数组调用的是vue封装（封装，而非重写）过的push，因此vue可以检测/监听到对应的改变，从而实现响应

自定义指令 v - fbind

设置并使用流程如下

1、定义语法：局部指令与全局指令

//局部指令
new Vue({								new Vue({
	directives:{指令名:配置对象}    或  		directives{指令名:回调函数}
}) 										})

//全局指令
```javascript 
Vue.directive(指令名,配置对象)  或   Vue.directive(指令名,回调函数)

2、配置对象中常用的3个回调(钩子函数)：
(1). bind：指令与元素成功绑定时调用
(2). inserted：指令所在元素被插入页面时调用
(3). update：指令所在模板结构被重新解析时调用
普通调用中只用到1. 3，因此如果需要详细运用，需要在代码中directives指令块部分详写回调函数

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

<span v-big="n"></span>  //span双标签
<input type="text" v-fbind:value="n">  //input单标签

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

//定义局部指令
new Vue({
	data:{ n:1 },
	//...
	directives:{
		//big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
		big(element,binding){
			console.log('big',this) //注意此处的this是window
		},
		//简写形式，以fbind命名的函数
		fbind:{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}
	}
})

生命周期

主要：before之前与 ed完毕 - 创建create，挂载mount，更新update，销毁destroy
注意：生命周期函数中的this指向是 vm 或组件实例对象

1、常用生命周期钩子：
mounted挂载完毕: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

2、beforeCreate 和 created：
beforeCreate指的是创建数据检测、数据代理之前
beforeCreate之前生命周期、事件、数据处理还未开始，创建这俩之后，调用created钩子

3、beforeDestroy 和 destroyed：
(1). 销毁后借助Vue开发者工具看不到任何信息
(2). 销毁后自定义事件会失效，但原生DOM事件依然有效
(3). 一般不在beforeDestroy操作数据。因为即便操作数据，也不会再触发更新流程。数据依旧可以访问 / 修改，但vue不会引发任何响应
也就是会出现以下情况：已修改数据，但是vue没有响应更新，所以页面上的数据也没有更新

生命周期流程图

组件 Component

组件中有四大块内容

一、Vue中使用组件的三步骤：

1.1 定义组件 / 创建组件

使用 Vue.extend(options) 创建，其中options和new Vue(options)时传入的options有区别，区别如下：

el不要写，为什么？
：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数，为什么？
：避免组件被复用时，数据存在引用关系

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

//第一步：创建student组件
const student = Vue.extend({
	template:`
		//...
	`,
	data(){
		return { //... }
	}
})

1.2 注册组件
局部注册：靠 new Vue 的时候传入 components 选项
全局注册：靠 Vue.component ( ‘组件名’ , 组件 )

//第二步：注册组件（全局注册）
Vue.component('hello',hello)
	
//第二步：注册组件（局部注册）
new Vue({
	el:'#root',
	//...
	// 这里就是局部注册
	components:{
		school,
		student
	}
})

1.3 使用组件
编写组件标签

<student> </student>

1.4 组件文件的作用
App.vue 汇总所有的组件
main.js 创建vue实例
index.html 将最后的结果呈现出来，其中包含导入的 < App></ App>

href = “<%= BASE_URL %>” 代表public下的路径，可以理解为 ./ …/ 之类的路径标识

二、几个注意点：

关于组件名：

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

关于组件标签：

写法：
第一种写法：< school> </ school>
第二种写法：< school />
备注：不用使用脚手架时，会导致后续组件不能渲染。

简写方式：
const school = Vue.extend(options) 可简写为：const school = options

三、关于VueComponent：

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

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

特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

组件配置中this指向：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】

new Vue(options)配置中this指向：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】

四、内置关系：

VueComponent.prototype.__proto__ === Vue.prototype

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

Tips：
显示原型属性 Demo.prototype ，只有函数拥有显示原型属性
隐式原型属性 d.__proto__ ，实例对象身上只有隐式原型，没有显示原型
prototype 和 __proto__本质是指针，指向原型对象

关键字：原型链、原型链继承
这样写是直接通过隐式原型属性直接去原型对象上找x，而d.x是先在自己本身找x，找不到再通过隐式原型属性接触到原型对象，在原型对象找x，所以两种写法都一样，这就是原型链。

原理：vc是Vue缔造出的VueComponent函数，VueComponent函数的prototype显示原型属性指向缔造者原型对象，VueComponent实例对象的__proto__隐式原型属性指向缔造者原型对象，此处缔造者为Vue原型对象（缔造者也可以理解为父类）。Vue原型对象的__proto__隐式原型属性指向Object原型对象，Object原型对象中的__proto__为null（Object无父类）

所以就存在有school.prototype.__proto__ = vm.__proto__

内置关系

二、基础知识点

语法

1、插值语法： 用于解析标签体内容
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

2、指令语法： 用于解析标签（包括：标签属性、标签体内容、绑定事件…）
v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

el 与 template

el：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标

template：是字符串模板，作为vue实例的标识使用；该模板会替换挂载的元素，挂载元素的内容会被忽略，若模板包含多个顶级元素，或者包含普通文本，实例将会变成一个片段实例

额外：在脚手架中使用render代替template完成对页面模板的创建

数据绑定 v-bind / v-model

1、单向绑定(v-bind)： 数据只能从data流向页面。

2、双向绑定(v-model)： 数据不仅能从data流向页面，还可以从页面流向data
双向绑定一般应用在表单类元素上，因为v-model默认收集的是value值

事件绑定与事件修饰符 v-on

1、事件绑定： 使用v-on:xxx 或 @xxx 绑定事件
methods中配置的函数(function)，this的指向是vm 或组件实例对象；箭头函数的this不是vm

2、事件修饰符（自行记忆，不记得百度）
prevent 阻止默认事件、stop 阻止事件冒泡、once 事件只触发一次、capture 使用事件的捕获模式

self 只有event.target是当前操作的元素时才触发事件、passive 默认立即执行，无需等待事件回调执行完毕

绑定样式 class style

1、class样式： class=“xxx” xxx可以是字符串、对象、数组
绑定单个样式：(1) 字符串：类名不确定，动态获取
绑定多个样式：(1) 对象：个数不确定，名字不确定 (2) 数组：个数确定，名字确定，但不确定用不用

2、style样式：
:style = “{fontSize: xxx}” 其中xxx是动态值
:style = “[a,b]” 其中a、b是样式对象(对象)

<div class="basic" :class="classObj">{{name}}</div>  //.basic是已确定的样式
<div class="basic" :style="styleObj">{{name}}</div>

data:{
	//...
	classArr:['atguigu1','atguigu2','样式名'],
	classObj:{ atguigu1:false, atguigu2:false },
	styleObj:{ fontSize: '40px', color:'red' },
	styleObj2:{ backgroundColor:'orange' },
	styleArr:[ { fontSize: '40px', color:'blue' },{ backgroundColor:'gray'} ]
},