谈谈你对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中监听多个变量值的变化