Vue常见的面试题

傷城~ 2022-11-27 06:59 290阅读 0赞

### 目录 ###

*   *   *  谈谈你对MVVM开发模式的理解
         *  对于组件通信你了解多少，你是怎么实现组件间通信的
         *  如何处理单页应用首屏加载慢、白屏时间长的问题（单页应用首屏加载时间长应该如何优化）
         *  从输入网址到网页渲染完成经过了哪些流程
         *  修改了数据，但视图没有更新，有哪些可能的原因？如何处理？
         *  vue如何监听数据变化

### 谈谈你对MVVM开发模式的理解 ###

MVVM模式包括3部分

*  Model：即数据模型，data
 *  View：即视图，负责对数据的展示，template
 *  ViewModel（VM）：负责监听Model、View中的数据变化，自动更新Model、View

Model、View没有直接交互，而是通过ViewModel关联。MVVM模式实现了Model、View间的⾃动同步，开发者只需要专注与维护内存数据，不需要手动修改dom，这体现了vue核心之一的数据驱动。

### 对于组件通信你了解多少，你是怎么实现组件间通信的 ###

*  ⽗传⼦⽤ props传递数据
 *  ⼦传⽗⽤$emit传递数据
 *  ⾮⽗⼦组件之间，可以用⼀个空的Vue对象作为bus中央事件总线，来传递数据
 *  vuex可以实现各种组件之间的数据传递，但略微繁琐，一般用于大型项目

### 如何处理单页应用首屏加载慢、白屏时间长的问题（单页应用首屏加载时间长应该如何优化） ###

*  在index.html中通过<script>标签引⼊公用的js库，减小打包出来的js⽂件体积，让浏览器并行下载资源⽂件，提⾼下载速度
 *  使用路由懒加载
 *  使用图片懒加载
 *  首页加一个骨架图
 *  尽量⽤CSS Sprites或字体图标代替图片来做图标

### 从输入网址到网页渲染完成经过了哪些流程 ###

*  浏览器请求dns服务器进⾏域名解析，获取web服务器的ip地址
 *  浏览器与web服务器建⽴tcp连接，并发送http请求
 *  web服务器解析、处理http请求，并返回以响应的形式返回数据给浏览器
 *  如果用返回的数据更新了内存变量，浏览器会自动更新对应的视图；如果返回的是html文档，浏览器会根据html文档⽣成dom树、样式树，合成渲染树，解析js，渲染⻚⾯后显示出来

### 修改了数据，但视图没有更新，有哪些可能的原因？如何处理？ ###

**情况一**

该属性不是在创建Vue对象时添加的，而是在创建Vue对象之后添加的，创建Vue对象时未声明该属性，没有被Vue转换为响应式属性，也就不会触发视图更新。

解决方式：使⽤Vue的$set()方法给对象添加新属性

//如果不是在<script>标签中使用，去掉this
    this.$set(对象，"属性名",属性值)

**情况二**

Vue对象的属性太多，管理的变量太多，管理不过来，没有及时刷新到视图。

这种情况可能会随机出现在不同的属性上，随着属性的增加，出现频率也会增加，最好的方式是重构，尽量减少Vue管理的变量。

此处介绍一个临时的解决方式，治标不治本。

1、Vue对象中定义一个辅助变量、辅助方法

flushHelper: 0,

//修改辅助变量的值
    flush(){ 
        this.flushHelper++;
    },

2、之前未刷新到视图的Vue属性值改变时，修改辅助变量的值，提醒Vue更新视图

<radio-group v-model="sharedbyLimit" @on-change="flush">
        <radio label="0">不限制</radio>
        <radio label="1">每天</radio>
        <radio label="2">整场活动</radio>
        
        <p style="display: none">{
       {flushHelper}}</p>
    </radio-group>

### vue如何监听数据变化 ###

1、使用watch监听简单类型数据的变化  
   
2、使用watch的深度监听来监听复杂数据类型（数组、对象）数据的变化  
   
3、使用计算属性computed中监听多个变量值的变化