前端面试题-3

最新推荐文章于 2023-07-16 16:06:28 发布

珎珎啊

最新推荐文章于 2023-07-16 16:06:28 发布

阅读量326

点赞数

分类专栏：代码前端文章标签： vue

本文链接：https://blog.csdn.net/qq_43363773/article/details/108608358

版权

前端同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

代码

34 篇文章 0 订阅

订阅专栏

1.Vue中v-if与v-show的区别

v-if:直接销毁和重建DOM达到让元素显示和隐藏的效果，是惰性的，如果初始条件为假，则什么也不做。
v-show:v-show指令是通过修改元素的display的css属性让其显示或隐藏，在任何条件下（首次条件是否为真）都被编译

2.v-if 和v-for不能同时使用解决方案

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。
(1).template

(2)计算属性（推荐使用）

在vue component中的methods域里定义一个方法，这个方法中会调用某一个ajax call，在ajax中的this会指向ajax本身，而不再是vue实例本身。

3.vue中的指令和用法

v-if :判断是否隐藏
v-for :数据循环
v-bind :绑定一个属性
.prop 作为一个DOM property绑定而不是作为attribute绑定。
v-model :实现双向绑定
v-show :根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果
v-text :更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
v-html : 更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
v-on 缩写 @
修饰符
.stop 调用event.stopPropagation()
.prevent 调用event.preventDefault()
.capture 添加事件侦听器时使用capture模式
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native 监听组件根元素的原生事件
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 只当点击鼠标右键时触发
.middle 只当点击鼠标中键时触发
.passive 以{ passsive:true } 模式添加侦听器
v-slot 缩写 #
预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
参数：插槽名 (可选，默认值是 default)
限用于

组件 (对于一个单独的带 prop 的默认插槽)
用法：
提供具名插槽或需要接收 prop 的插槽。

4.vuex ；单向数据流

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我自己的理解：我觉得vuex是一个类似全局的数据和数据操作的管理，它提供的数据和数据操作在当前项目作用范围内，为组件所共享。因此我们也可以把它当做一个数据中转站，而不用担心带来数据存储的问题，因为当前任务一旦执行完成，目标数据传入接口，存在数据库中。页面一刷新，vuex中的数据内容就会回复初始的状态。

5.MVVM

MVVM是Model-View-ViewModel的缩写。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

6.MVVM和MVC的区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

7.vue的优点

低耦合：视图（view）可以独立于Model变化和修改，一个viewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

8.组件传参

a.父组件向子组件传参，通过props属性实现
b.子组件向父组件传，通过事件派发
c.非相关组件之间传参，使用事件总线

9.路由

router-link :是用来生成a标签的组件，做页面跳转
router-view :是用来展示路由对应的内容的组件，所有的路由访问地址，访问时对应的内容都在组件范围内显示。

10.路由传参：params传参和query传参

区别：
A.query传参，参数在url中可见，是标准的url传参形式。使用？分割参数和url地址
B.params传参，参数在url默认是不可见的，除非设置了占位符。
C.query传参刷新之后参数还在
D.params传参除非设置了占位符，否则参数不能再刷新之后保存。

11.vuex你了解吗？使用过吗？哪种场景使用？

是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
作用：实现跨组件数据共享，可以在项目中帮我们创建一颗全局状态树。所有的状态数据都存储在里面。
vuex的使用场景：构建一个中大型单页应用，要考虑如何更好地在组件外部管理状态的时候。
单向数据流：数据是单向流动的，view视图通过dispatch派发一个action(行为)，改变state(数据)，数据改变之后视图重新渲染。
vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的dataB、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用C、如果一个状态只在一个组件内使用，是可以不用getters

12.如何让css只在当前组件中起作用

将当前组件的

13.的作用

主要用于保留组件状态或避免重新渲染，缓存不活动的组件实例。
在列表跳转详情页的时候，列表里的数据可以被缓存下来，从详情返回列表的时候就不需要重新加载数据了。

14.3个vue中常用的生命周期钩子函数

生命周期的作用：针对我们的项目需求，在我们控制整个Vue实例的过程中更容易形成好的操作逻辑。
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后，以下三个为常用。
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $e l 属性目前还不可见 m o u n t e d : e l 被新创建的 v m .$ el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive组件激活时调用
路由拦截器
beforeEach,结合meta元属性实现路由地址的权限判断

15.$el

$el 获取当前组件的dom元素，将dom 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例
$refs 获取当前组件中设置了ref属性的标签
$root获取父组件的内容，如果没有父组件，显示自己的内容

16.Vue.nextTick( [callback, context] )：

Vue.nextTick( [callback, context] )：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
// 修改数据
vm.msg = ‘Hello’
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})

17.vue性能优化

源码优化：
(1)代码块优化：（css也可以通过less和sass的自定义css变量来减少重复代码。）
(2)for循环设置key值（高效渲染）
(3)vue路由设置成懒加载：当首屏渲染的时候，能够加快渲染速度。
(4)更加理解vue的生命周期：使用过后的全局变量在组件销毁后重新设置为null，避免造成内存泄漏。
(5)可以使用keep-alive：keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
打包优化：
（1）修改vue.config.js中的配置项
把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。
（2）使用CDN的方式外部加载一些资源
比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
（3）减少图片使用
因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
（4）按需引用
使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

18.vue自定义组件的使用

（1）首先在src目录下创建一个components目录,然后新建一个组件文件，结尾一定得有export default{}导出组件
（2）在需要用的组件页面中import导入
（3）注入到vue的子组件的components属性上面–components:{ }
（4）然后就可以在template视图中使用了

19.VNode是什么？虚拟DOM是什么？

Vue在页面上渲染的节点，及其子节点称为虚拟节点（Virtual Node）,简写为 VNode。虚拟DOM是由Vue组件树建立起来的整个VNode树的称呼。
模块化开发的理解：
虚拟dom不是真正的dom节点，它是一个js对象表述的dom结构，最终会通过渲染在页面中生成真的dom树，vue中的所有节点变化都是针对虚拟dom进行的，当节点改变之后，通过对比最终找到最优的dom更新方案，对页面进行重新渲染展示。虚拟dom可以针对不同的平台生成不同的显示标签，可以非常方便的实现跨平台的迁移。
模块化开发就是封装程序实现细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础是函数。

20.computed和watch的区别

computed能监听v-model的值，只要值发生变化他就会重新去计算，并且必须要有返回值，用return来返回computed当你需要双向的时候，这时候就需要用到get和set了，get的作用是返回当前的值，set监视当前的属性值的变化，当值发生变化时，更新数据。
watch不仅能监听data里边的值，并且还能监听路由，watch的回调函数里边有2个参数，一个新的返回值newval和旧的返回值oldval
cumputed计算属性，一个属性受到多个属性影响的时候使用。比如购物车中的总价和全选。Watch监听，一个属性改变之后会影响到很多数据的变化。比如搜索框。

21.`$`route和`$`router有什么区别

$route是VueRouter，它包含了很多路由跳转的方法，如:to,push,go,replace
$route是一个跳转的路由对象，包含了name,path,query,params等。
22.vue-router的两种模式
hash模式，地址栏中有一个#,它是一个比较常见的一种历史记录形式，大部分浏览器都支持，而且不需要对web服务器做特殊的重定向配置。
history模式，使用了h5中的history接口，我们在使用的时候需要浏览器支持还需要再发布的时候对web服务器做特殊的重定向配置。