大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心
马上就到了金三银四
的重要时刻了!!今天给大家分享一个度小满的面经。考Vue考的多一些~~~
父组件传输局props
给子组件时,子组件只能使用而不能修改,这是为了组件之间能更高地去解耦。比如有一个父组件,传props
给10个子组件,如果某一个子组件修改了,那么会影响其他9个子组件跟着刷新,所以不推荐子组件修改props
props
$emit
事件对父组件进行传值$parent
和$children
进行获取实例数据$attrs
和$listener
进行传值$refs
获取组件实例,进而获取数据Vuex
进行状态管理eventBus
进行跨组件传值,进而传递数据(发布订阅模式)provide
和inject
,官方不建议localStorage
v-model
实际是:value + @input
的语法糖
<input v-model="inputValue" />
<input
:value="inputValue"
@input="inputValue = $event.target.value"
/>
$attrs
和 $listener
有了解吗?常用于对组件进行二次封装时,比如A -> B -> C
,B可以直接将爷爷组件的所有数据或者事件直接传给孙子
生命周期:
beforeVCreated
:实例了Vue但是还没有进行数据初始化与响应式处理created
:数据已经被初始化和响应式处理,这里可以访问和修改数据beforeMount
:render函数在这里调用,生成虚拟DOM,但是还没转真实DOM并替代到elmounted
:真实DOM挂载完毕beforeUpdated
:数据更新后,新的虚拟DOM生成,但还没更旧虚拟DOM对比打补丁update
:新旧虚拟DOM对比打补丁后,进行真实DOM的更新activated
:被keep-alive缓存的组件被激活时调用deactivated
:被keep-alive缓存的组件停用时调用beforeDestroy
:实例销毁之前调用,在这一步,依然可以访问数据destroyed
:实例销毁后调用。Vue实例的所有指令都被解绑,实例的监听器被移除,所有子实例也都被销毁errorCaptured
:捕获子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。组件销毁时会自动卸载组件本身绑定的事件,但是仅限于组件本身。例如一些定时器、全局对象的事件绑定、eventBus
则不会自动解绑,需要手动解绑。
bind
:指令绑定到指定元素时触发,只触发一次inserted
:指定元素插入到DOM时触发,只触发一次update
:VNode更新时触发,会触发多次unbind
:指令解绑时触发,只触发一次created
:指定元素的attribute或事件监听器被应用之前被调用beforeMount
:指令绑定到指定元素上触发mounted
:指定元素被挂载时触发beforeUpdate
:在更新包含组件的VNode之前触发updated
:在包含组件的VNode及其VNode更新后调用beforeUnMount
:在卸载指定元素的父组件之前触发unmounted
:指令解绑时触发传统的前端开发就像是盖房子时需要自己从零开始,用了框架开发就相当于有人事先给你搭好架子,你只需要添砖加瓦就行了。框架有他自己的一套开发模式和开发流程,只要跟着他的流程走,并利用好其开发模式,做起事来会事半功倍,这也是为什么现在的前端越来越趋于框架开发的原因,毕竟时间就是金钱,节省时间很重要。
Vue.set
,对象删除属性时需要使用Vue.delete
才能触发更新splice、push
等等Vue2是通过重写了数组原型上的方法来达到对数组的修改的监听,Vue2没有对数组下标做劫持,是出于心梗的考虑,因为通常数组元素都是非常多的,可能成百上千,如果每个元素都进行劫持,则非常耗费性能。
是ES6的特性,具体使用场景有:
迭代器: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)
}
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)
})
}
})
}
animation
需配合@keyframe
,而transition
不需要animation
可以出发多次,transition
只能触发一次animation
可以设置多个帧,而transition
只有两帧.box {
width: 100px;
height: 100px;
background-color: pink;
animation: scale 2s 9999999 alternate;
}
@keyframes scale {
from { transform: scale(0); }
to { transform: scale(1); }
}
}
摘取:https://juejin.cn/post/7036581158670303240
答案:林三心
点个【赞】和【在看】是对林三心最大的鼓励,林三心会非常开心的~~~
关注公众号【前端之神】,回复【加群】,即可获得加入【千人前端学习大群】的方式