马上就到了金三银四的重要时刻了!!今天给大家分享一个度小满的面经。考Vue考的多一些~~~
父组件传输局props给子组件时,子组件只能使用而不能修改,这是为了组件之间能更高地去解耦。比如有一个父组件,传props给10个子组件,如果某一个子组件修改了,那么会影响其他9个子组件跟着刷新,所以不推荐子组件修改props。
v-model实际是:value + @input的语法糖
<input v-model="inputValue" />
<input
:value="inputValue"
@input="inputValue = $event.target.value"
/>
常用于对组件进行二次封装时,比如A -> B -> C,B可以直接将爷爷组件的所有数据或者事件直接传给孙子。
生命周期:
组件销毁时会自动卸载组件本身绑定的事件,但是仅限于组件本身。例如一些定时器、全局对象的事件绑定、eventBus则不会自动解绑,需要手动解绑。
Vue2:
Vue3:
传统的前端开发就像是盖房子时需要自己从零开始,用了框架开发就相当于有人事先给你搭好架子,你只需要添砖加瓦就行了。框架有他自己的一套开发模式和开发流程,只要跟着他的流程走,并利用好其开发模式,做起事来会事半功倍,这也是为什么现在的前端越来越趋于框架开发的原因,毕竟时间就是金钱,节省时间很重要。
Vue2是通过重写了数组原型上的方法来达到对数组的修改的监听,Vue2没有对数组下标做劫持,是出于心梗的考虑,因为通常数组元素都是非常多的,可能成百上千,如果每个元素都进行劫持,则非常耗费性能。
(1) Symbol
是ES6的特性,具体使用场景有:
(2) 迭代
迭代器:Iterator,可迭代对象有Array、Set、Map,想将不可迭代对象变成可迭代对象,可以设置Symbol.iterator属性
const t = {
name: '林三心',
age: 12
}
t[Symbol.iterator] = function () {
let index = 0,
self = this,
keys = Object.keys(this)
return {
next() {
if (index < keys.length) {
return {
value: self[keys[index++]],
done: false
}
} else {
return {
value: undefined,
done: true
}
}
}
}
}
for (let value of t) {
console.log(value)
}
(3) 迭代器和迭代对象
合集:
const heji = (arr1, arr2) => {
return [...new Set(arr1.concat(arr2))]
}
交集:
const jiaoji = (arr1, arr2) => {
const temp = new Set(arr1)
return Array.from(new Set(arr2)).filter(item => {
return temp.has(item)
})
}
差集:
const chaji = (arr1, arr2) => {
const temp1 = new Set(arr1)
const temp2 = new Set(arr2)
const res = []
for (let item of temp1) {
!temp2.has(item) && res.push(item)
}
return res
}
Promise.sx_all = (promises) => {
return new Promise((resolve, reject) => {
const result = []
let count = 0
for (let i = 0; i < promises.length; i++) {
const promise = Promise.resolve(promises[i])
promise.then(res => {
result[i] = res
count++
if (count === promises.length) {
resolve(result)
}
}).catch(err => {
reject(err)
})
}
})
}
.box {
width: 100px;
height: 100px;
background-color: pink;
animation: scale 2s 9999999 alternate;
}
@keyframes scale {
from { transform: scale(0); }
to { transform: scale(1); }
}
}