vue面试题(一)

• Z时代
• 2024-01-10
• 分类：综合

1=>为什么data是一个函数

每复用一次组件，就会返回一分新的data。
也就说:【每个组件实例创建】一个【私有】的数据空间。各个组件维护各自的数据。
如果单纯的写成对象形式，那么所有组件实例共用了一份data.
就会造成一个发生改变，全部都会发生改变。  
data(){
    return{ }
 }

3=> vue的生命周期 8+2 ok

我们都知道vue常用的8个生命周期，但是这几个生命周期你熟悉吗?
activated keep-alive 专属，组件被激活时调用 [ai k t v ti de], 第一次进入也会触发activated  
deactivated keep-alive 专属，组件被销毁时调用 【di ai k t v ti de】

4=> 怎样理解 Vue 的单项数据流 ok

数据总是从父组件传到子组件，
子组件没有权利修改父组件传过来的数据，[如果你强行更改，vue会有红色的警告，告诉你这个是单向的]
只能请求父组件对原始数据进行修改。
这样会防止从子组件意外改变父组件的状态，
从而导致你的应用的数据流向难以理解。

5=> v-if 和 v-for 为什么不建议一起使用 ok

vue2中先解析v-for然后在解析v-if,[会造成消耗性能]
如果遇到需要同时使用时可以嵌套一层元素  
<template></template>

6 template 的作用

template的作用是模板占位符，可帮助我们包裹元素.
但在循环过程当中，template不会被渲染到页面上
template标签不支持v-show指令，
即v-show="false"对template标签来说不起作用。
template标签支持v-if、v-else-if、v-else、v-for这些指令。

6.1=> vue3 v-for和v-if做了更改

很幸运 vue 3.x 中， v-if 总是优先于 v-for。

07==> Vue的父子组件生命周期钩子函数执行顺序 ok

加载渲染过程
父beforeCreate -> 父created -> 父beforeMount ->
->子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
【你可以理解页面渲染，这样就好理解了】
子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程
父beforeUpdate -> 父updated
销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

8. 虚拟DOM是什么？有什么优缺点？

由于在浏览器中频繁操作DOM代价是很昂贵的。会产生一定性能问题。这就是虚拟Dom的产生原因。
Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。
Virtual DOM本质就是用一个[原生的JS对象]去[描述]一个[DOM节点]，是对真实DOM的一层抽象。
上面这一句话就翻译为代码 就是
<div>
 <p>123</p>
</div>
对应的virtual DOM（伪代码）：
var Vnode = {
 tag: 'div',
 children: [
  { tag: 'p', text: '123' }
 ]
};
优点：
1、保证性能下限：虽然它的性能并不是最优的；
但是比起粗暴的DOM操作，还有不错的性能，
2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好代码逻辑，
框架会【根据虚拟DOM】和【数据双向绑定】，
帮我们自动更新视图，提高我们的开发效率。
3、跨平台：虚拟DOM可以进行更方便地跨平台操作，
缺点：
1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，
但在一些【性能要求极高】的应用中虚拟DOM无法没满足。
2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

明天继续-----------------------------------------------------------------------------------------------------------------------

1=> Vue3.0 和 2.0 的【响应式原理】区别

Vue3.x 改用 Proxy[pu luo k she] 替代 Object.defineProperty[di fai n prɒ pə ti]。
因为 Proxy 可以直接监听对象和数组的变化，
而Object.defineProperty是不可以直接对【数组】进行监听
Vue2 中修改数组的索引和长度无法被监控到。
对象新增的属性无法被Object.defineProperty监听到

2=> Vuex 页面刷新数据丢失怎么解决？

在刷新页面的时候，将vuex中的只存在本地
也可以使用第三方插件。  vuex-persist (pəˈsɪ s t])插件，
它是为 Vuex 持久化储存而生的一个插件。

3 你都做过哪些 Vue 的性能优化？

语法方面:
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
//数据方面
对象层级不要过深，否则性能就会差。
不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
// 加载-缓存
路由懒加载
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用

4 Vue.mixin 的使用场景和原理

在开发的过程中我们会遇见相同或者相似的逻辑代码。
可以通过vue的 mixin 功能抽离公共的业务逻辑，
然后通过impor再组件中引入。通过mixins注册进来。
这样我们就可以使用mixin中共同的业务逻辑
<script>
import { mixinmethods} from "../mixin.js"
    export default {
        // mixins是固定的，里面传入一个数组
        mixins:[mixinmethods]
    }
</script>
如果组件中data数据与混合中的数据重复，会进行合并。使用data中的数据。
【组件中是可以直接使用混合中的数据的，自己理解】
需要注意的是：声明周期不会进行合并
如果你在混合中使用了生命周期，组件中也是用生命周期。
组件和混合中的生命周期都会被执行。

5. nextTick 使用场景和原理

场景:进行tab切换的时候，当显示A组件的时候。
A组件的input自动聚焦。这个时候获取A组件的input实例就会出现undefiend
为什么会出现undefined?
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
原理：
nextTick 将回调延迟到下次 DOM 更新循环之后执行

6、 keep-alive 使用场景和原理

keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性 include/exclude，符合条件的组件或者页面进行缓存。 [include 是页面中的name ]
include的类型可以是字符串，数组，正则。
两个生命周期 activated/deactivated，用来得知当前组件是否处理活跃状态。
keep-alive 运用了 LRU 算法，选择最近【久未使用的组件】予以淘汰。
keep-alive其实还有一个属性max, 最大允许缓存多少个，如果超出最大个数。
会将已缓存组件中最久没有被访问的实例会被销毁掉。
[exs k lu d] exclude 排除

7、Vue.set 方法原理

在两种情况下修改 Vue 是不会触发视图更新的。 
1、给响应式对象新增属性,这个时候是不会跟新视图的
2、直接更改【数组下标】来修改数组的值。
我们可以通过 Vue.set(this.userInfo, 'sex' ,'男') 
或者 this.$forceUpdate() 来解决这个问题
set 原理如下
因为是响应式数据,
我们给对象和数组本身新增了__ob__属性，代表的是 Observer【饿 b zɜ və(r)】 实例。
如对象新增不存在的属性，首先会把新的属性进行响应式跟踪。
当数据发生变化后，watcher【ˈwɑːtʃər]】 去更新视图.
【使用splice方法向数组内添加元素时】该元素会自动被变成响应式的
源码：https://blog.csdn.net/leelxp/article/details/107212555

8 assets 和static【不会打包】的区别

答：相同点：assets【a sai s 】和static两个都是存放静态资源文件，
图片，字体图标，都可以放在这两个文件下。
不相同点：
build的时候会将assets中放置的静态资源文件【会进行】打包压缩上传.
最终会放置在static中跟着index.html一同上传至服务器。
static中放置的静态资源文件就【不会】打包压缩
建议：将项目中样式文件js文件等都可以放置在assets中，
走打包这一流程。减少体积。
而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，
因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
巧计:听读音, assets 有压缩。

明天继续看----------------------------------------------------------------------------------------------

1 .vue的两个核心点

答：数据驱动、组件系统
数据驱动：保证数据和视图的一致性。
组件系统：页面中的所有模块可以看作全部是由[组件树]构成的。

2. vue-router 有哪几种导航钩子?

答：三种，
第一种：是全局导航钩子：
router.beforeEach(to,from,next){}
router.afterEach(to,from,next){} 
作用：跳转前进行判断拦截。 2个
第二种：组件内的钩子   
beforeRouteEnter (to, from, next) { }
beforeRouteLeave(to, from, next){ }
第三种：单独路由独享钩子
beforEnter:(to, form,next) => { 
}

3. $route 和 $router 的区别

答：$router是VueRouter的实例，{可以导航到不同的URL,使用$router.push方法。}
返回上一个历史用$router.go(-1) 或者 $router.back()
$route为当前router跳转对象。里面可以获取当前路由的name,path,parmas等。

4.vue初始化页面闪动问题

有些时候看到类似于{{message}}的字样，
虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先在css里加上
[v-cloak] { [k ləʊ k][掩盖]
	display: none; 
}
如果没有彻底解决问题，则在根元素加上:style="{display: 'block'}"
还有一种方法：使用v-text来解决

5. Vue2中注册在router-link上事件click无效解决方法

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。
在vue3中native被移除了

6. Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：Vue路由在Android机上有问题。
【通过工具查看一下该标签是否被正确解析了,如果没有使用使用一些插件来进行解决】babel问题，

7. vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块

8. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

1.用户体验好、快，内容的改变不需要重新加载整个页面。
2.SPA 相对对服务器压力小；
缺点：
初次加载耗时多：因为要在加载页面的时候将 JavaScript、CSS 统一加载，
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

9 vue常用的修饰符 【没有理解】

.stop等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次

10. Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:
Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
Object.defineProperty 的优势如下:
兼容性好，支持 IE9，
而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，
因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

11 vue的自定义指令

和css样式有关的操作 放在bind函数中
bind: function (el) {},
和js行为有关的操作  可以写在inserted()这个函数中去
inserted: function (el) {  el.focus() },
updated(el) {
	//当v-model跟新的时候，就会执行这个函数  这个函数会执行多次  
},
el->表示被绑定了指令的那个元素，这个el是一个原生的js对象
运用的场景：绑定按钮权限的时候，我就使用了 自定义指令

=明天继续看==

1.v-show 与 v-if 有什么区别？ok+

v-if 是真正的条件渲染，也是惰性的;
如果在初始渲染时条件为假，则什么也不做——
直到[条件第一次变为真]时，才会开始渲染
v-show 不管初始条件是什么，元素总是会被渲染.
并且只是简单地基于 CSS 的 “display” 属性进行切换。
频繁切换使用v-show, 切换较少使用v-if

2.computed 和 watch 的区别和运用的场景？ok

computed： 是计算属性，computed 的值有缓存。
只有它[依赖的属性值]发生改变，computed 的值时才会重新计算。
watch： 更多的是「观察」的作用，类似于某些[数据的监听回调]。
每当监听的数据变化时，都会执行回调，进行后续操作。
场景:
{form表单中的input都必须有有值， 按钮才能够进行点击 我们就可以使用computed  }
当我们需要在数据变化时【执行异步】或【开销较大】的操作时，应该使用 watch

3. v-model 的原理？ok

v-model 在内部为不同的输入元素[使用不同的属性]并[抛出不同]的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

4. vue-router 路由模式有几种？ ok

vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示：
hash: 使用 hash 值来作路由。支持所有浏览器。
history : 有些浏览器不支持
abstract : [ æ bˈstræ k t] 支持所有 JavaScript 运行环境，如 Node.js 服务器端。
如果发现没有浏览器的 API，路由【会自动强制进入】这个模式.

6. 虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括以下 3 部分：
1.用一个[原生的JS对象]去[描述]一个[DOM节点]，是对真实DOM的一层抽象。
2.diff 算法 — 比较两棵虚拟 DOM 树的差异；【dif算法比较两颗树直接的差异】
3.pach 【帕其】算法 — 将两【个虚拟DOM对象的差异】应用到【真正的 DOM 树】。

7、Vue 中的 key 有什么作用？ ok

key 是 Vue中vnode的唯一标记，通过这个key，我们的diff操作可以更准确、更快速。
2.更准确表现在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
(我的理解:通过 sameNode函数对比key值，避免了就地复用的情况，所以会更加的准确)
3.更快速：利用key的唯一性生成map对象，来获取对应节点，比遍历方式更快。

8. key的实际运用场景

1.处理勾选时候的bug。 比如列表中有 【A,B,C】
我们勾选B，向列表中添加D,列表是[D,A,B,C]此时却勾选了A
2.key值应该是唯一的。最后使用id值。
为什么使用id值，而不是index

本文的地址 ：https://juejin.cn/post/6844903918753808398#heading-22

地址来源：https://zhuanlan.zhihu.com/p/92407628

本文的源地址：https://www.cnblogs.com/wenshaochang123/p/14888494.html

本文的源地址：https://www.jianshu.com/p/38f38f61b557

继续=================================================================

1.Vue是什么?(了解就可以)

1.是一套用于构建用户界面的渐进式框架，自底向上逐层应用。
2.vue核心只关注视图层，不仅容易上手，而且方便与第三方库整合。
3.当与现代化的工具以及各种支持类库结合使用时，完全能够为复杂的单页应用提供驱动。

2.Vue的优点 (了解)

1.开发者:只关注视图，简单易学，
2.双向数据绑定，操作数据简单
3.组件化，构建单页面有优势
4.视图数据分离，使用数据更方便
5.虚拟DOM+diff算法，提高页面的渲染速度

3.watch的使用

watch: {
    firstName(newName, oldName) {
      // newName 是新值，oldName旧值
    },
    immediate: true,
} 
immediate: 立即监视， deep : 深度监视 

4.常用的事件修饰符

.stop ==> event.stopPropagation() 阻止事件冒泡
.prevent ==> event.preventDefault() 取消默认事件，不停止传播
.capture ==> 事件捕获
.self ==> 只触发自己范围内的事件， 不包含子元素
.once ==> 只会触发一次

5.你对slot的理解

slot是 vue 内容分发机制，插槽是子组件的一个模板标签。
这个标签由父组件决定，有默认插槽，具名插槽和作用域插槽。
默认：匿名插槽，直接在组件送写slot。一个组件只能有一个匿名
具名：带有名字的插槽，slot name='xxx'可以有多个。
作用域: 可以有名字也可以无，不同点，在子组件渲染时，
可以将子组件内部的数据传递给父组件，父组件根据子组件的数据决定如何渲染

6.Vue模版编译原理

解析阶段：对 template 字符串解析，将标签，指令，属性转为抽象语法树 AST
优化阶段：遍历 AST 找其中的静态节点进行标记，方便在重新渲染的时候进行 diff 比较时 ，跳过一些静态节点
生成阶段：将 AST 转为 render函数字符串

以上是 vue面试题(一) 的全部内容， 来源链接： utcz.com/z/380476.html