Vue面试题总结

Cola-blog

已于 2023-09-06 11:15:09 修改

阅读量49

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-04-25 11:19:28 首次发布

本文链接：https://blog.csdn.net/lx6091543wwwcctv/article/details/130195866

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

Vue.js是一种响应式框架，通过虚拟DOM实现高效更新。计算属性computed用于缓存依赖，watch用于监听数据变化。在数据变更时，Vue会自动更新视图，避免直接DOM操作。key属性优化数组元素更新，watcher的脏数据标记实现缓存机制。Vue的生命周期钩子和v-if/v-show控制条件渲染，$set用于解决动态属性绑定问题。

摘要由CSDN通过智能技术生成

谈谈对VUE的响应式编程的理解。
vue.js属于响应式编程。当改变View中的数据时，Model中的数据也跟着改变；当改变Model中的数据时，View中的数据也随之改变。这样可避免直接操作DOM，降低DOM操作的复杂性。
虚拟DOM作用
在js/jQuery直接对DOM元素进行操作时，不管是对元素样式的修改，还是对页面某些布局进行动态调整。都会造成页面的重新渲染，从而影响网站的性能。VUE在内存中生成与真是DOM对应的虚拟DOM，当页面发生变化时，通过新的虚拟DOM与旧的虚拟DOM进行对比，就会很快找出差异点，只渲染变化的部分，从而实现高效运行。
key的作用
key是每个元素绑定唯一的key，优势是提高修改元素的效率
如果没有key，array修改一个元素，会先删除，再重新插入，有key就可以在原有基础上修改。
computed与watch区别

功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

如果监听对象是数组，字典，如果不加deep，是无法监听到对象内部属性的变化的。

使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.

computed由set和get方法组成，在set方法里面不要去直接改变计算属性，否则会导致死循环。要想改变计算属性的指，一定是通过改变他的依赖值。

1）.计算属性走缓存的机制如何实现：

-首先，计算属性多次被使用时且依赖的data中的属性没发生修改时，计算属性会走缓存机制。

-用脏数据标记（dirty）实现缓存机制。dirty是watcher的属性：dirty为true->读取计算属性时会重新计算；dirty为false->读取计算属性会走缓存。

2）.当页面p的计算属性中的c属性依赖data中的a属性时，计算属性的更新步骤：

-因为c依赖于a，所以a可以收集到c的watcher。

-当a发生修改时，把watcher的dirty设置为true。

-a还会收集页面p的watcher，a会通知p进行更新，因为dirty为true，所以页面p会重新计算c。

-c更新完成后，将dirty设置为false。

Vue的父子组件生命周期钩子函数执行顺序？

<!-- 加载渲染过程 -->
 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 
<!-- 子组件更新过程 -->
 父beforeUpdate -> 子beforeUpdate -> 子updaed -> 父updated
<!-- 销毁过程 -->
父beforeDestroy -> 子beforeDestroy -> 子destroyed ->父destroyed

双向绑定 v-model
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

以下情况Vue的双向绑定会失效（由于JavaScript的限制，Vue2不能检测对象属性的添加或删除）：
1、改变数组的长度时
2、改变数组中的属性时
3、通过索引值修改数组时
4、动态给对象添加属性时

凡是发现双向绑定失效，则是可能Vue2无法监听到，因此可以使用$set方法去绑定。

使用方法：
1.修改数组

this.$set(Array, index, newValue)

2.修改对象

this.$set(Object, key, value)

v-if和v-show区别
v-if 创建和删除 visibility:hidden 会造成重绘不频繁切换使用
v-show display 会造成回流和重绘频繁切换使用
display:none会产生回流与重绘，visibility:hidden 和 opacity:0 只会产生重绘。
Vue 中动态引入图片为什么要是 require？
因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。
因为动态的添加的src编译过后的地址，与图片资源编译过后的资源地址不一致，导致无法正确的引入资源
为什么加上require能正确的引入资源
因为通过require方法拿到的文件地址，是资源文件编译过后的文件地址（dist下生成的文件或base64文件），因此可以找对应的文件，从而成功引入资源。