vue面试题

原创已于 2022-02-28 17:53:20 修改 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-23 00:25:00 首次发布

vue 专栏收录该内容

20 篇文章

订阅专栏

1、Vue生命周期

// 概念

在这里插入图片描述

2、computed和watch的区别

计算属性是计算属性，
侦听器watch是侦听器watch，想在某个数据变化时做一些事情，比如调用一个方法。（watch更多的是看中过程我们可以在这期间做一些事情。如果不是这点好处的话，我们完全可以定义一个方法然后在请求结果中实现逻辑）

总结：
1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的

2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

**区别：**
// 计算属性computed : 
1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：
1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　immediate：组件加载立即触发回调函数执行，
　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

computed:计算属性的高级：

在computed 中的属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。下面我们通过计算属性的 getter/setter 方法来实现对属性数据的显示和监视，即双向绑定。

computed: {
    fullName: {
        get() { //读取当前属性值的回调，根据相关的数据计算并返回当前属性的值
            return this.firstName + ' ' + this.lastName
        },
        set(val) { // 当属性值发生改变时回调，更新相关的属性数据，val就是fullName的最新属性值
            const names = val ? val.split(' ') : [];
            this.firstName = names[0]
            this.lastName = names[1]
        }
    }
}

watch

可以监听的数据来源：data，props，computed 内的数据。

1,立即执行(immediate和handler)
第一种用法watch有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
2,深度监听(deep）
当需要监听复杂数据类型(对象)的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

总结：
*当依赖的值变化时，在watch中，是可以做一些复杂的操作的，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。*

3、自定义指令

// // 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

4、vue首页加载过慢，导致白屏

（https://blog.youkuaiyun.com/weixin_43915587/article/details/93165250）

（1）给个loading动画挡一下
（2）考虑对于页面的组件做异步加载
（4）webpack打包优化，减小打包文件体积大小
（3）vuejs路由的懒加载策略（https://blog.csdn.net/xm1037782843/article/details/88225104）
（5）配置vue-cli，利用webpack插件完成模板预加载
（6）考虑服务器渲染首屏骨架页面，或者更复杂的服务器渲染策略ssr，官方有文档

5、多个组件合并打包成一个单独的文件

优点：

1、一方面可以减少代码块的数量
2、另一方面，如果合并打包的这些组件在不同地方多次重复使用，由于 Vue
的缓存机制，可以加快后续组件的加载速度。
3、并且如果这些通用组件长时间不会变化（如 UI相关的组件），
打包生成的文件也长期不会变化，可以充分利用浏览器的缓存功能，实现前端加载速度的优化。
（转载：https://www.cnblogs.com/vivaxiaonan/p/9884459.html）

步骤：
1、在其 src/components 目录下创建一个 CommonComponents 目录，在该目录中创建 ComponentA、ComponentB、ComponentC 这三个组件。
同时在 CommonComponents 目录下创建 index.js，其内容如下：
exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')
2、异步加载 CommonComponents 目录下的 index.js，
require(['component/CommonComponents'], function (CommonComponents) { CommonComponentscomponent/CommonComponents 模块加载成功时，这里的回调函数中的 CommonComponents 参数将会是一个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。})

6、vue多页面和单页面区别

多页应用：
1、首屏时间快
首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。
2、为什么搜索引擎优化效果好（SEO）
搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。
3、切换慢
每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

单页应用：
1、页面切换快
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。
2、缺点：首屏时间慢，SEO差
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容

7、微信小程序的双向绑定原理

在原生小程序开发中，数据流是单向的，无法双向绑定

但是可以通过“bindinput”、“bindblur” 等，这些属性绑定一个方法，使用 event.detail.value 就可以获取组件的最新值。比如：
this.setData({
userName: event.detail.value
})

8、mvvm和mvc的区别

1.MVVM 是 Model-View-ViewModel 的缩写，MVC是Model-View-Controller的缩写

View层是界面，Model层是业务逻辑，Controller层用来调度View层和Model层，ViewModel和Controller可以理解为Model和View的处理器。
mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

9、使用uni-app开发小程序，比直接原生开发小程序好在哪里

https://blog.youkuaiyun.com/hbcui1984/article/details/102783208?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4.pc_relevant_default&utm_relevant_index=9