web前端全栈0基础到精通（祺）vue 02

一、localStorage 和 sessionStorage的区别
相同点：
都可以实现存储。
它们的大小都是5MB左右。
它们的存储方式都必须以字符串进行存储！！！！
它们的语法都是相同。存值： localStorage/sessionStorage.setItem('key','value') 
取值： localStorage/sessionStorage.getItem('key')
移除（某一项） localStorage/sessionStorage.removeItem('key')
不同点：
localStorage 是永久性存储，即使你关闭浏览器，它依然存在。
sessionStorage 是会话存储，关闭当前浏览器tab就消失
使用场景：
购物车（未登录的状态），登录存储状态，记住密码等等很多功能

二、localStorage 和 sessionStorage以及cookie的区别

三、谁可以实现跨页面存储
localStorage可以实现跨页面存储

二、表单

2.1 登录

2.2注册

---

三、动态样式

3.1 动态样式之class

• 第一种方式变量

直接赋值变量

哈哈哈

data:{
	属性名:'类名'
}

• 第二种方式数组（两个类名选择一个）

哈哈哈

• 第三种方式 多条件判断（1~n个类名）

多条件判断(显示1~N个)
哈哈哈

3.2 动态样式之style

视图


//逻辑
data:{
	变量名:{
	"font-size":"XXpx",
	color:"red",
	backgroundColor:'green'
	}
}

---

四、事件

学习事件的流程

如何创建事件=> 事件的传参=>事件如何获取事件源=> 事件的传播=>不同框架或者库中都有哪些用法

---

五、修饰符

5.1常用的事件修饰符

.prevent 阻止默认事件
.stop 阻止冒泡事件
.capture 事件捕获
.self 触发自己
.once 只触发䘣

5.2常用的表单修饰符

.enter .13
.left .37
.....

5.3常用的键盘修饰符

.lazy
.number
.trim

---

六、生命周期

6.1概念

从出生到死亡的一个过程。
软件是有生命周期的。
vue也是有生命周期的
它的生命周期就是，从创建到销毁的过程
它的生命周期是由八大生命周期函数所组成

6.2生命周期的八大函数（也可以叫钩子函数，内置）

创建之前  beforeCreate(){}
创建		created(){}
挂载之前  beforeMount(){}
挂载		mounted(){}
更新之前  beforeUpdate(){}
更新		updated(){}
销毁之前 beforeDestroy(){}
销毁	destroyed(){}

6.3页面加载的过程中触发了哪几个生命周期函数

触发了前四个生命周期函数
创建之前  beforeCreate(){}
创建		created(){}
挂载之前  beforeMount(){}
挂载		mounted(){}

6.4如何理解生命周期图示

首先vue实例化，这个时候没有el元素没有数据，只有一些内置的事件以及生命周期。
生命周期走到创建之前，这个时候没有el元素也没有数据data.
生命周期走到创建完成，这个时候依然没有el元素但是出现数据data.
当生命周期执行到挂载完成之前，进行了大量的逻辑判断。第一、先判断是否含有el元素。如果没有，去判断是否调用了$mount()这个方法，如果都没有生命周期结束，如果有一个，生命周期继续执行。这时候我们要判断是否含有template这个属性。如果没有，直接执行外部html (outerHTML)。如果有，优先执行template属性的内容。template属性优先级高于外部html。但是如果有render()这个函数方法，它的优先级最高要高于其他两个
生命周期走到挂载的时候。真实的视图（真实的DOM）渲染完成
当数据发生变化，触发了更新之前和更新。虚拟的DOM发生变化，视图发生了重新渲染
一般，我们很少销毁一个实例（因为一个项目只有一个实例）
如果你要触发销毁函数，必须调用销毁方法。调用$destroy()这个函数。你会触发销毁之前和销毁

6.5我们经常用的生命周期函数都有哪些

mounted(){}
updated(){}

6.6哪一个生命周期函数你用的最多并且调用大量异步操作

有一部分人会在created(){}调用大量的接口。

mounted(){} 挂载，我们会在挂载中调用大量的接口

---

面试题

vue中检测不到数组或者对象发生改变，如何解决？

(1)vm.arr.splice(index, 1, newValue)

(2)vm.$set(vm.arr, index, newValue)

(3)Vue.set(vm.arr, index, newValue)

vue更新数组时触发视图更新的方法

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

vue中 key 值的作用？

在v-for时使用，标识组件的唯一性，更好的区分组件，高效的更新虚拟DOM

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：
对象语法：

data: { isActive: true, hasError: false } 数组语法：

data: { activeClass: 'active', errorClass: 'text-danger' } Style 也可以通过对象语法和数组语法进行动态绑定： 对象语法：

data: { activeColor: 'red', fontSize: 30 } 数组语法：

data: { styleColor: { color: 'red' }, styleSize:{ fontSize:'23px' } }

Vue中常用的修饰符有哪些？并简要说明它们的作用。

Stop：阻止冒泡；
prevent：阻止默认事件；
once：只执行一次；
capture：将事件流设为捕获方式；
self：直对自身触发事件； enter：回车键；Up:上； down：下；left:左；right：右；

谈谈你对 Vue 生命周期的理解？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1wjGYKx3-1619676026007)(D:\2020IT培训事业部Web全栈面授就业班214班(1207班次)]\day02\图示\生命周期.png)

（1）生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）各个生命周期的作用
生命周期的描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el还不可用beforeMount在挂载开始之前被调用：相关的render函数首次被调用mountedel被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

在哪个生命周期内调用异步请求？

命周期的描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el还不可用beforeMount在挂载开始之前被调用：相关的render函数首次被调用mountedel被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。（本人常放置到mounted中可以操作dom,当然也可以放到created中）