routes: [
{
path: ‘/xxx’,
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]
组件内路由钩子
-
beforeRouteEnter(to, from, next):跳转路由渲染组件时触发
-
beforeRouteUpdate(to, from, next):跳转路由且组件被复用时触发
-
beforeRouteLeave(to, from, next):跳转路由且离开组件时触发
10、使用过哪些Vue的内部指令呢?
-
v-text
:元素的textContent -
v-html
:元素的innerHTML -
v-show
:通过样式display改变显隐 -
v-if
:通过操作DOM改变显隐 -
v-else
:配合v-if -
v-else-id
:配合v-else -
v-for
:循环渲染 -
v-on
:绑定事件,缩写@ -
v-bind
:绑定变量,缩写: -
v-model
:双向绑定 -
v-slot
:插槽 -
v-once
:只渲染一次 -
v-pre
:跳过元素编译 -
v-cloak
:隐藏双括号,有值再显示
11、组件之间的传值方式有哪些?
-
父传子,子组件通过
props
接收 -
子传父,子组件使用
$emit
对父组件进行传值 -
父子之间通过
$parent
和$chidren
获取实例进而通信 -
通过
vuex
进行状态管理 -
通过
eventBus
进行跨组件值传递 -
provide
和inject
,官方不建议使用 -
$ref
获取实例,进而传值 -
路由传值
-
localStorage、sessionStorage
12、如何设置动态class,动态style?
-
动态class对象:
<div :class="{ 'is-active': true, 'red': isRed }"></div>
-
动态class数组:
<div :class="['is-active', isRed ? 'red' : '' ]"></div>
-
动态style对象:
<div :style="{ color: textColor, fontSize: '18px' }"></div>
-
动态style数组:`
13、v-if和v-show有何区别?
-
v-if
:通过操作DOM来控制显隐,适用于偶尔显隐的情况 -
v-show
:通过改变样式display属性控制显隐,适用于频繁显隐的情况
14、computed和watch有何区别?
-
computed
:依赖多个变量计算出一个变量,且具有缓存机制,依赖值不变的情况下,会复用计算值。computed
中不能进行异步操作 -
watch
:通常监听一个变量的变化,而去做一些事,可异步操作 -
简单记就是:一般情况下
computed
的多对一,watch
一对多
15、Vue的生命周期?
-
beforeCreate
:实例Vue,未初始化和响应式数据 -
created
:已初始化和响应式数据,可访问数据 -
beforeMount
:render调用,虚拟DOM生成,未转真实DOM -
mounted
:真实DOM挂载完成 -
beforeUpdate
:数据更新,新虚拟DOM生成 -
updated
:新旧虚拟DOM进行对比,打补丁,然后进行真实DOM更新 -
beforeDestroy
:实例销毁前,仍可访问数据 -
destroy
:实例销毁,子实例销毁,指令解绑,解绑本实例的事件 -
activated
:keep-alive所缓存组件激活时调用 -
deactivated
:keep-alive所缓存组件停用时调用 -
errorCaptured
:子孙组件的错误捕获,此函数可返回false阻止继续向上传播
16、为什么v-if和v-for不建议用在同一标签?
v-for
优先级高于v-if
,每项都通过v-for
渲染出来后再去通过v-if
判断显隐
17、 vuex的有哪些属性?用处是什么?
-
state
:定义初始状态 -
getter
:从store从取数据 -
mutation
:更改store中状态,只能同步操作 -
action
:用于提交mutation,而不直接更改状态,可异步操作 -
module
:store的模块拆分
18、不需要响应式的数据应该怎么处理?
-
定义在data的return之外
-
使用Object.freeze进行数据冻结
19、watch有哪些属性,分别有什么用?
-
immediate:初次加载时立即执行
-
deep:是否进行深度监听
-
handler:监听的回调函数
20、父子组件生命周期顺序?
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
21、对象新属性无法更新视图,删除属性无法更新视图,为什么?怎么办?
-
原因:Object.defineProperty没有对对象的新属性进行劫持
-
解决:
-
新增属性:
Vue.set(target, key, value)
-
删除属性:
Vue.delete(target, key)
22、直接arr[index] = xxx无法更新视图怎么办?为什么?怎么办?
-
原因:Vue出于性能考虑没有对数组下标进行劫持,而是通过改写数组原型方法
-
解决:
-
splice:arr.splice(index, 1, value)
-
Vue.set(target, index, value)
23、插槽的使用以及原理?
普通插槽 普通插槽slot
会被当做子元素进行解析,最终会被解析成一个_t
函数,他接收的第一个参数为插槽的名称,默认是default
,也就是_t('default')
,执行此函数进行最终元素的渲染,如果是具名插槽,则传对应的插槽名 作用域插槽 插槽会被封装成一个函数放置在scopeSlotes
对象中,解析时_t
第二个参数接收子组件的数据,并进行渲染
24、为什么不建议用index做key,为什么不建议用随机数做key?
list: [
{ name: ‘阿敏’, id: ‘123’ },
{ name: ‘阿红’, id: ‘124’ },
{ name: ‘阿花’, id: ‘125’ }
]
渲染为
现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ })
渲染为
新旧对比
可以看出,如果用index做key的话,其实是更新了原有的三项,并新增了阿花,虽然达到了渲染目的,但是损耗性能
现在我们使用id来做key,渲染为
现在我执行 list.unshift({ name: ‘阿林’, id: ‘122’ }),渲染为
新旧对比
可以看出,原有的三项都不变,只是新增了阿林这个人,这才是最理想的结果
用index
和用随机数
都是同理,随机数
每次都在变;
25、自定义指令的钩子函数?
这里只说Vue2的
-
bind
:指令绑定到指定元素时调用,只调用一次 -
inserted
:指定元素插入父节点时调用 -
update
:所在组件的 VNode 更新时调用 -
componnetUpdated
:所在组件以及其子组件 VNode 全部更新后调用 -
unbind
:只调用一次,指令与元素解绑时调用
26、说说nextTick的用处?
修改数据时不能马上得到最新的DOM信息,所以需要使用nextTick,在nectTick回调中可以获取最新DOM信息
27、为什么nextTick优先是微任务?
优先是Promise.then
方法,是个微任务,这样可以避免多一次队列,进而少一次UI渲染,节省性能
28、Vue的SSR是什么?有什么好处?
SSR全称Server Side Render
-
有利于SEO:由于是在服务端,将数据填充进HTML之后再推送到浏览器,所以有利于SEO的爬取
-
首屏渲染快
29、Vue响应式是怎么实现的?
-
1、劫持:通过
Object.defineProperty
对对象进行递归劫持属性的get、set
-
2、观察者模式:使用
watcher
进行观察数据使用的地方 -
3、发布订阅模式:使用
dep
收集watcher
,数据更改时,通过notify
方法通知dep
里的watcher
去进行相应的更新 -
4、数组:数组没有使用劫持的模式,而是通过重写数组原型上的方法,来实现数组的响应式
30、为什么只对对象劫持,而要对数组进行方法重写?
数组的元素大概率是成百上千的,所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写,实现数组的响应式
31、Vue.set方法的原理?
Vue.set(target, key, value)
-
第一步:判断target是数组的话,则调用target.splice(key, 1, value)
-
第二步:判断target是对象的话,再判断传入的key是否已存在target中
-
是:直接target[key] = value
-
否:调用defineReactive(target, key, val)进行响应式处理
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.ob
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}
32、Vue.delete方法的原理?
Vue.delete(target, key)
-
第一步:判断target是否为数组,是的话调用target.splice(key, 1)
-
第二步:判断target是对象的话,调用delete关键字删除属性,并调用__ob__.dep.notify进行更新通知
export default function del (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.ob
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}
33、Vue的computed和watch的原理?
34、Vue的模板编译原理?
35、nextTick的原理?
维护一个数组,每次调用时讲回调函数压入这个数组,然后优先选择微任务,在微任务回调中去执行数组中的所有回调,同时维护一个布尔值,确保每一次队列进行一次执行数组所有回调
let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
pending = false; //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacksi;
}
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== “undefined”) {
// 如果支持promise
const p = Promise.resolve();
timerFunc = () => {
p.then(flushCallbacks);
};
} else if (typeof MutationObserver !== “undefined”) {
// MutationObserver 主要是监听dom变化 也是一个异步方法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
8719168)]
[外链图片转存中…(img-8sqnkfmq-1712498719169)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-Of74kLgU-1712498719169)]
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-HwlSoe1j-1712498719169)]