web前端 Vue 框架面试120题(六)

面试题 101 . 如何解决Vuex页面刷新数据丢失 ?

参考回答:

F5页面刷新,页面销毁之前的资源,重新请求,因此写在生命周期里的vuex数据是重新初始化,无法获取的,这也就是为什么会打印出空的原因。
解决思路1:
使用Localstorage sessionStorage 或cookie
实际使用时当vuex值变化时,F5刷新页面,vuex数据重置为初始状态,所以还是要用到localStorage,
解决方法2:
插件vuex-persistedstate
vuex-persistedstate默认持久化所有state,可以指定需要持久化的state
面试题 102 . 自定义指定(v-check/v-focus)的方法有哪些?有哪些钩子函数?还有哪些钩子函数参数?

参考回答:

全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、updata(组件内相关更新)
钩子函数的参数:el、binding
面试题 103 . 请说明Vue Watch和Dep的关系 ?

参考回答:

watcher中实例化了dep并向dep.subs中添加了订阅者, dep通过notify遍历了dep.subs通知每个watcher更新。
依赖收集initState时,对computed属性初始化时,触发computed watcher依赖收集
initState时,对侦听属性初始化是,触发user watcher依赖收集
render()的过程, 触发render watcher依赖收集
re-render时,vm.render( )再次执行, 会溢出所有subs中的watcher的订阅, 重新赋值
派发更新
组件对响应的数据进行了修改, 触发setter的逻辑
调用dep.notify( )
遍历所有的subs( Watcher实例 ),调用每一个watcher的update方法
面试题 104 . Vue不使用v-model的时候怎么监听数据变化?

参考回答:

可以使用watch监听数据的变化
面试题 105 . 怎么定义vue-router的动态路由以及如何获取传过来的动态参数?

参考回答:

在router目录下的index.js文件中,对path属性加上/:id
使用router对象的params id
Vue中,如何用watch去监听router变化
当路由发生变化的时候,在watch中写具体的业务逻辑let vm = new Vue({
el:"#app",
data:{},
router,
watch:{
$router(to,from){
console.log(to.path);
}
}
})
面试题 106 . 如何让 CSS 值在当前的组件中起作用?

参考回答:

在 vue 文件中的 style 标签上,有一个特殊的属性:scoped。当一个 style 标签拥有 scoped 属性时,它的 CSS 样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了 scoped,相当于实现了样式的模块化。scoped 的实现原理vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现的。PostCSS 给一个组件中的所有 DOM 添加了一个独一无二的动态属性,然后,给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 DOM,这种做法使得样式只作用于含有该属性的 DOM,即组件内部 DOM。
面试题 107 . 请简述构建 vue-cli 工程都用到了哪些技术?他们的作用分别是什么?

参考回答:

vue.js:vue-cli 工程的核心,主要特点是双向数据绑定和组件系统。
vue-router:vue 官方推荐使用的路由框架。
vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护 vue 组件间共用的一些 变量 和 方法。
axios(或者 fetch、ajax):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。
vux等:一个专为vue设计的移动端UI组件库。
webpack:模块加载和vue-cli工程打包器。
eslint:代码规范工具
vue-cli 工程常用的 npm 命令有哪些?
下载 node_modules 资源包的命令:npm install
启动 vue-cli 开发环境的 npm命令:npm run dev
vue-cli 生成 生产环境部署资源 的 npm命令:npm run build
用于查看 vue-cli 生产环境部署资源文件大小的 npm命令:npm run build --report
面试题 108 . 简述Vue SSR 的实现原理 ?

参考回答:

app.js 作为客户端与服务端的公用入口,导出 Vue 根实例,供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还需要进行路由匹配与数据预获取。
webpack 为客服端打包一个 ClientBundle,为服务端打包一个 ServerBundle。
服务器接收请求时,会根据 url,加载相应组件,获取和解析异步数据,创建一个读取 Server Bundle 的 BundleRenderer,然后生成 html 发送给客户端。
客户端混合,客户端收到从服务端传来的 DOM 与自己的生成的 DOM 进行对比,把不相同的 DOM 激活,使其可以能够响应后续变化,这个过程称为客户端激活(也就是转换为单页应用)。为确保混合成功,客户 端与服务器端需要共享同一套数据。在服务端,可以在渲染之前获取数据,填充到 store 里,这样,在客户端挂载到 DOM 之前,可以直接从 store 里取数据。首屏的动态数据通过 window._INITIAL_STATE_ 发送到客户端
VueSSR 的原理,主要就是通过 vue-server-renderer 把 Vue 的组件输出成一个完整 HTML,输出到客户端,到达客户端后重新展开为一个单页应用。
面试题 109 . 简述Vue 的 computed 的实现原理 ?

参考回答:

1、每个computed属性都会生成对应的Watcher实例,watcher拥有value属性和get方法,computed的getter函数会在get方法中调用,并返回赋值给value。初始设置dirty和lazy为true,当lazy为true时不会立即执行get方法,而是会在读取computed值时执行;2、将computed属性添加到组件实例上,通过get、set进行属性值的获取或设置,并且重新定义getter方法;3、页面初始化时,会读取computed属性值,触发重新定义的getter,由于观察者的dirty值为true,将会调用原始的getter函数,当getter方法读取data数据时会触发原始的get方法(数据劫持中的get方法),将computed对应的watcher添加到data依赖收集器(dep)中。观察者的get方法执行完后,更新观察者的value,并将dirty置为false,表示value值已更新,之后执行观察者的depend方法,将上层观察者也添加到getter函数中data的依赖收集器(dep)中,最后返回computed的value值;4、当更改了computed属性getter函数依赖的data值时,将会触发之前dep收集的watcher,依次调用watcher的update方法,先调用computed的观察者的update方法,由于lazy为true,会将dirty先设置为true,表示computed属性getter函数依赖data发生变化,但不调用观察者的get方法更新value值。这时调用包含更新页面方法的观察者的update方法,在更新页面时会读取computed属性值,触发重新定义的getter函数,由于dirty为true,调用该观察者的get方法,更新value并返回,完成页面渲染;
面试题 110 . Vue 如何快速定位那个组件出现性能问题的 ?

参考回答:

⽤ timeline ⼯具。 通过 timeline 来查看每个函数的调⽤时常,定位出哪个函数的问题,从⽽能判断哪个组件出了问题。
面试题 111 . 请说明scoped 是如何实现样式穿透的?

参考回答:

首先说一下什么场景下需要 scoped 样式穿透。
在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透 scoped。
有三种常用的方法来实现样式穿透。
方法一
使用 ::v-deep 操作符( >>> 的别名)
如果希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>> 操作符:上述代码将会编译成:
.a[data-v-f3f3eg9] .b {
/* ... */
}
后面的类名没有 data 属性,所以能选到子组件里面的类名。
有些像 Sass 之类的预处理器无法正确解析 >>>,所以需要使用 ::v-deep 操作符来代替。
方法二
定义一个含有 scoped 属性的 style 标签之外,再定义一个不含有 scoped 属性的 style 标签,即在一个 vue 组件中定义一个全局的 style 标签,一个含有作用域的 style 标签:此时,我们只需要将修改第三方样式的 css 写在第一个 style 中即可。
方法三
上面的方法一需要单独书写一个不含有 scoped 属性的 style 标签,可能会造成全局样式的污染。
更推荐的方式是在组件的外层 DOM 上添加唯一的 class 来区分不同组件,在书写样式时就可以正常针对针对这部分 DOM 书写样式。
面试题 112 . Vue.extend 和 Vue.component 的区别是什么?

参考回答:

Vue.extend 用于创建一个基于 Vue 构造函数的“子类”,其参数应为一个包含组件选项的对象。
Vue.component 用来注册全局组件。
面试题 113 . 移动端如何实现一个比较友好的 header 组件 ?

参考回答:

Header 一般分为左、中、右三个部分,分为三个区域来设计,中间为主标题,每个页面的标题肯定不同,所以可以通过 vue props的方式做成可配置对外进行暴露,左侧大部分页面可能都是回退按钮,但是样式和内容不尽相同,右侧一般都是具有功能性的操作按钮,所以左右两侧可以通过 vue slot 插槽的方式对外暴露以实现多样化,同时也可以提供 default slot 默认插槽来统一页面风格
面试题 114 . Vue 为什么没有类似于 React 中 shouldComponentUpdate 的生命周期?

参考回答:

根本原因是 Vue 与 React 的变化侦测方式有所不同React 是 pull 的方式侦测变化,当 React 知道发生变化后,会使用 Virtual Dom Diff 进行差异检测,但是很多组件实际上是肯定不会发生变化的,这个时候需要用 shouldComponentUpdate 进行手动操作来减少 diff,从而提高程序整体的性能。Vue 是 pull+push 的方式侦测变化的,在一开始就知道那个组件发生了变化,因此在 push 的阶段并不需要手动控制 diff,而组件内部采用的 diff 方式实际上是可以引入类似于 shouldComponentUpdate 相关生命周期的,但是通常合理大小的组件不会有过量的 diff,手动优化的价值有限,因此目前 Vue 并没有考虑引入 shouldComponentUpdate 这种手动优化的生命周期
面试题 115 . Vue 的数据为什么频繁变化但只会更新一次?

参考回答:

这是因为 vue 的 DOM 更新是一个异步操作,在数据更新后会首先被 set 钩子监听到,但是不会马上执行 DOM 更新,而是在下一轮循环中执行更新。具体实现是 vue 中实现了一个 queue 队列用于存放本次事件循环中的所有 watcher 更新,并且同一个 watcher 的更新只会被推入队列一次,并在本轮事件循环的微任务执行结束后执行此更新(UI Render 阶段),这就是 DOM 只会更新一次的原因。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,vue 刷新队列并执行实际 (已去重的) 工作。vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替
面试题 116 . 如何监听 pushstate 和 replacestate 的变化呢?

参考回答:

History.replaceState 和 pushState 不会触发 popstate 事件,所以我们可以通过在方法中创建一个新的全局事件来实现 pushstate 和 replacestate 变化的监听。具体做法为:var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');这样就创建了 2 个全新的事件,事件名为 pushState 和 replaceState,我们就可以在全局监听
window.addEventListener('replaceState', function(e) {
console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
console.log('THEY DID IT AGAIN! pushState 2222222');
});
这样就可以监听到 pushState 和 replaceState 行为。
面试题 117 . Vue 组件中写 name 选项有哪些好处 ?

参考回答:

可以通过名字找到对应的组件( 递归组件:组件自身调用自身 )
可以通过 name 属性实现缓存功能(keep-alive)
可以通过 name 来识别组件(跨级组件通信时非常重要)
使用 vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的
面试题 118 . Vue中子组件可以直接改变父组件的数据么,说明原因 ?

参考回答:

所有的 prop 都使得其父子之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器控制台中发出警告。
const props = defineProps(['foo'])
// ❌ 下面行为会被警告, props是只读的!
props.foo = 'bar'
实际开发过程中有两个场景会想要修改一个属性:
这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data,并将这个 prop 用作其初始值:
const props = defineProps(['initialCounter'])
const counter = ref(props.initialCounter)
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
const props = defineProps(['size'])
// prop变化,计算属性自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())
实践中如果确实想要改变父组件属性应该emit一个事件让父组件去做这个变更。注意虽然我们不能直接修改一个传入的对象或者数组类型的prop,但是我们还是能够直接改内嵌的对象或属性。
面试题 119 . Vue过渡动画实现的方式有哪些?

参考回答:

1.使用vue的transition标签结合css样式完成动画
2.利用animate.css结合transition实现动画
3.利用 vue中的钩子函数实现动画
面试题 120 . 动态给vue的data添加一个新的属性时会发生什么?怎样解决?

参考回答:

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如果想要使添加的值做到响应式,应当使用$set()来添加对象。
面试题 121 . Vue watch怎么深度监听对象变化 ?

参考回答:

deep设置为true 就可以监听到对象的变化let vm=new Vue({el:"#first",data:{msg:{name:'北京'}},watch:{msg:{handler (newMsg,oldMsg){console.log(newMsg);},immediate:true,deep:true}}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决Oracle SQL语句性能问题——正确使用Hint(Hint概念、场景及具体语法)

10.5. 正确使用Hint 10.5.1. Hint概念及场景 调优SQL语句时,Oracle提供了很多可用的Hint。首先,你应该获取和分析SQL语句的执行计划,看能否通过改写SQL语句或其他方法来进行调整和优化,而不是直接使用Hint方法进行优化,最好在其他方法都确定无效或不合理之后再考虑使用H…

HTTPS 的加密过程 详解

HTTP 由于是明文传输,所以安全上存在以下三个风险: 窃听风险,比如通信链路上可以获取通信内容。篡改风险,比如通信内容被篡改。冒充风险,比如冒充网站。 HTTPS 在 HTTP 与 TCP 层之间加入了 SSL/TLS 协议&#xff0c…

概率论原理精解【4】

文章目录 度量空间概述理论基础定义特点高级概念广泛应用 性质例子应用 柯西数列柯西数列的定义柯西数列的例子 参考文献 度量空间 概述 设 f : R n → R m , f ˙ ( x ) 在 { x : ∣ x − x 0 ∣ < r } 内连续&#xff0c;则当 ∣ t ∣ < r 时&#xff0c; f:R^n\righ…

Spring Cloud LoadBalanced

负载均衡(Load Balance&#xff0c;简称 LB) 是⾼并发, ⾼可⽤系统必不可少的关键组件. 当服务流量增⼤时, 通常会采⽤增加机器的⽅式进⾏扩容, 负载均衡就是⽤来在多个机器或者其他资源中, 按照⼀定的规则合理分配负载. 负载均衡的⼀些实现 就像是eureka中对请求进行轮询的…

Java对象创建过程的解析

Java对象创建过程的解析 1. 类的加载与连接2. 内存分配2.1 分配方式2.2 本地线程缓冲分配&#xff08;TLAB&#xff09; 3. 初始化内存4. 设置对象头 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 对象的创建是一个涉及多个步骤的复杂过程…

Qt:26.Qt项目:贪吃蛇游戏

一、项目功能演示&#xff1a; 开始界面可以点击进入游戏。 点击进入游戏之后&#xff0c;切换到选项界面&#xff0c;该界面可以选择游戏难度&#xff0c;回退&#xff0c;以及查询最近一次游戏得分。 游戏具体界面如下。贴图啥的可以自己换&#xff0c;本人审美不咋行&#x…

[SUCTF 2019]EasySQL1

这是一个简单的SQL注入题&#xff0c;但是因为我的SQL基础约等于0&#xff0c;所以做起来很难。 首先试试引号是否被过滤 可以看到单引号、双引号都被过滤了&#xff0c;试试其他的盲注都不行&#xff0c;基本上可以确定不能用这种方法。 在测试的过程中发现&#xff0c;输入…

RICHTEK立锜科技 WIFI 7电源参考设计

什么是WIFI 7? WiFi 7&#xff08;Wi-Fi 7&#xff09;是下一代Wi-Fi标准&#xff0c;对应的是IEEE 802.11将发布新的修订标准IEEE 802.11be –极高吞吐量EHT&#xff08;Extremely High Throughput &#xff09;。Wi-Fi 7是在Wi-Fi 6的基础上引入了320MHz带宽、4096-QAM、Mu…

oceanbase架构、功能模块、数据存储、特性、sql流转层等概念详解

一、架构图 OceanBase 数据库采用无共享&#xff08;Shared-Nothing&#xff09;分布式集群架构&#xff0c;各个节点之间完全对等&#xff0c;每个节点都有自己的 SQL 引擎、存储引擎、事务引擎&#xff0c;运行在普通 PC 服务器组成的集群之上&#xff0c;具备高可扩展性、高…

cephrgw元数据和数据布局

提示&#xff1a;每个rados object有如下几个组成部分&#xff0c;分别是omap&#xff08;omapheader、omapkey、omapval&#xff09;、xattr、data&#xff0c;相关的CLI command rados getomapheader {radosobjectname} -p {poolname} [--namespace{ns}] rados listomapkeys…

Eureka基本概念

Eureka基本概念 Eureka基本概念 一、服务消费者如何获取服务提供者的信息&#xff1f; 不管是消费服务者还是消费提供者&#xff0c;都是服务&#xff0c;服务启动之后会注册到eureka的注册中心去&#xff0c;当服务消费者请求调用某个服务的时候&#xff0c;会根据eureka注册…

【LabVIEW作业篇 - 4】:属性节点赋值和直接节点赋值的区别体现

文章目录 属性节点赋值和直接节点赋值的区别体现 属性节点赋值和直接节点赋值的区别体现 创建5个圆形指示灯&#xff0c;然后循环点亮&#xff0c;先给圆形指示灯赋值假变量&#xff0c;然后再进行循环。 运行结果&#xff0c;观察结果&#xff0c;发现刚开始运行时&#xff0…

引领小模型潮流!OpenAI发布功能强大且成本低的GPT-4o mini

GPT-4o mini的成本比GPT-3.5 Turbo低了超过60%&#xff0c;其聊天表现优于Google的Gemini Flash和Anthropic的Claude Haiku。该模型从周四开始对ChatGPT的免费用户、ChatGPT Plus用户和团队订阅用户开放&#xff0c;并将在下周向企业用户开放。OpenAI计划未来将图像、视频和音频…

Vue 自定义组件编写 案例实战

index.vue <template><div><el-button type"primary" click"showDialog">添加邮递配置</el-button><el-dialog :title"dialogTitle" :visible.sync"dialogVisible" width"800px" :before-clos…

【Leetcode】一、排序

文章目录 1、选择排序2、冒泡排序3、插入排序 1、选择排序 给定数组arr&#xff0c;其长度为n。实现思路&#xff1a; 遍历数组&#xff0c;从0 ~ n - 1&#xff0c;找到最小的&#xff0c;找到后&#xff0c;和数组的第一个元素互换位置继续新一轮遍历&#xff0c;从1 ~ n -…

路网双线合并单线——ArcGIS 解决方法

路网双线合并成单线是一个在地图制作、交通规划以及GIS分析中常见的需求。双线路网定义&#xff1a;具有不同流向、不同平面结构的道路。此外&#xff0c;车道数较多的道路&#xff08;例如&#xff0c;双黄实线车道数大于4的道路&#xff09;也可以视为双线路网&#xff0c;本…

扩容升级丨极海正式推出G32A1465系列汽车通用MCU,驱动智驾再进阶

继2023年推出G32A系列汽车通用平台首发产品G32A1445系列后&#xff0c;极海宣布正式推出G32A1465系列全新汽车通用MCU&#xff0c;以满足日益增长的智能驾驶应用需求。作为升级迭代产品&#xff0c;G32A1465专为应用范围不断扩大的高运算要求而设计&#xff0c;集成丰富的通信接…

数据结构(5.2_3)——二叉树的存储结构

二叉树的顺序存储 #define MAXLEN 255struct TreeNode {ElemType value;//结点中的数据元素bool isEmpty;//结点是否为空 };void main() {TreeNode t[MaxSize]; } 定义一个长度为MaxSize的数组t&#xff0c;按照从上至下、从左至右的顺序依次存储完全二叉树中的各个结点 几个…

前端组件化探索与实践:Vue自定义暂无数据组件的开发与应用

摘要 随着前端开发技术的不断进步&#xff0c;组件化开发已成为提升开发效率、降低维护成本的关键手段。本文旨在通过介绍一款Vue自定义暂无数据组件的开发与实践&#xff0c;深入探讨前端组件化开发的重要性、优势及其在实际项目中的应用。 一、引言 在前端开发中&#xff0…

七天打造一套量化交易系统-Day0-量化投资发展历程

七天打造一套量化交易系统-Day0-量化投资发展历程 1、本间宗久&#xff08;1724-1803&#xff09;2、朱尔斯雷格纳特 Jules Regnault&#xff08;1834—1894&#xff09;3、拉尔夫纳尔逊艾略特&#xff08;1871-1948&#xff09;4、爱德华索普(Edward O. Thorp)&#xff08;193…