记一次前端 vue 相关面试题目和简答案

1. 谈谈你对MVVM开发模式的理解

 MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；

• View：代表UI视图，负责数据的展示；

• ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

       Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。



1.  Vue 有哪些指令？



      v-html、v-show、v-if、v-for等等。



1. webpack打包的优化



   当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。



1.  v-if 和 v-show 有什么区别？



       v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。



1. 简述Vue的响应式原理



       当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。



1. 首屏加载速度慢的问题？



• 将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；

• 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；

• 加一个首屏loading图，提升用户体验；



1. typescript和js的区别



语言层面：JavaScript和TypeScript都是ECMAScript（ECMA-262）的具体实现。

执行环境层面：浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。

时序层面：TypeScript被真正执行前，会通过编译转换生成JavaScript，之后才能被解释执行。

厂商层面：JavaScript由Netscape率先推出，现在主要由各大浏览器厂商实现。而TypeScript is a trademark of Microsoft Corporation，目前由微软进行设计和维护。



1. 父子组建通信（组件内部实现一个双向数据绑定）



  假设有一个输入框组件，用户输入时，同步父组件页面中的数据。

具体思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，



1. vue获取原生dom



在标签上给一个ref属性并赋值，用this.$refs.collectionTag便可以获取单个的dom元素

当然了 用原生的js document.getElementById(""collectionTag);也是可以获取到的



1. Vue中如何监控某个属性值的变化？



比如现在需要监控data中，obj.a 的变化。Vue中监控对象属性的变化你可以这样：

watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true } }

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: { 'obj.a': { handler (newName, oldName) { console.log('obj.a changed') } } }

还有一种方法，可以通过computed 来实现，只需要：

computed: { a1 () { return this.obj.a }}

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。



1. vue响应式对象



Vue不能检测到对象属性的添加或删除，在初始化实例时利用Object.defineProperty 给数据添加了getter和setter，所以属性必须在data对象上存在才能让Vue转换它，目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑：getter做的事情是依赖收集，setter做的事情是派发更新。

还可以使用vm.$set实例方法将响应属性添加到嵌套的对象上



1. react性能优化方案



• 入口起点：使用 entry 配置手动地分离代码。

• 防止重复：使用 SplitChunks 去重和分离 chunk。

• 动态导入：通过模块的内联函数调用来分离代码。



1. 常用的各种前端框架