这里先放一个vue

Vue常⻅⾯试题:

Vue基础

Vue (读⾳ /vjuː/，类似于 view) 是⼀套⽤于构建⽤户界⾯的渐进式 JavaScript框架。

全称是Vue.js或者Vuejs；

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了⼀套声明式的、组件化的编程模型；

帮助你⾼效地开发⽤户界⾯，⽆论任务是简单还是复杂；

Vue.js 的特点:

易⽤： Vuejs是⼀个渐进式的框架，相⽐于其它框架，它更简单，易学，上⼿快。

灵活：（渐进式）不断繁荣的⽣态系统，可以在⼀个库和⼀套完整框架之间⾃如伸缩。

⾼效： 20kB min+gzip 运⾏⼤⼩；超快虚拟 DOM；最省⼼的优化。

双向绑定：开发效率⾼。

基于组件的代码共享

Web项⽬⼯程化，增加可读性、可维护性

什么是 MVVM?:

MVC和MVVM都是⼀种软件的体系结构

MVC是Model – View –Controller的简称，是在前期被使⽤⾮常框架的架构模式，⽐如iOS、前端；

MVVM是Model-View-ViewModel的简称，是⽬前⾮常流⾏的架构模式；

通常情况下，我们也经常称Vue是⼀个MVVM的框架。

Vue官⽅其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

说说你对 SPA 单⻚⾯的理解，它的优缺点分别是什么?:

SPA（ single-page application ）仅在 Web ⻚⾯初始化时加载相应的 HTML、JavaScript 和 CSS。⼀旦

⻚⾯加载完成，SPA 不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转；取⽽代之的是利⽤路由机制实

现 HTML 内容的变换，UI 与⽤户的交互，避免⻚⾯的重新加载。

优点：

⽤户体验好、快，内容的改变不需要重新加载整个⻚⾯，避免了不必要的跳转和重复渲染；
基于上⾯⼀点，SPA 相对对服务器压⼒⼩；
前后端职责分离，架构清晰，前端进⾏交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单⻚ Web 应⽤功能及显示效果，需要在加载⻚⾯的时候将 JavaScript、
CSS 统⼀加载，部分⻚⾯按需加载；
前进后退路由管理：由于单⻚应⽤在⼀个⻚⾯中显示所有的内容，所以不能使⽤浏览器的前进后退

功能，所有的⻚⾯切换需要⾃⼰建⽴堆栈管理；

SEO 难度较⼤：由于所有的内容都在⼀个⻚⾯中动态替换显示，所以在 SEO 上其有着天然的弱

势。

v-show 与 v-if 有什么区别?:

⾸先，在⽤法上的区别：
v-show是不⽀持template；
v-show不可以和v-else⼀起使⽤；
###其次，本质的区别：
v-show元素⽆论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display 属性来进⾏切换；
v-if当条件为false时，其对应的原⽣压根不会被渲染到DOM中；
- 开发中如何进⾏选择呢？
- 如果我们的原⽣需要在显示和隐藏之间频繁的切换，那么使⽤v-show；
- 如果不会频繁的发⽣切换，那么使⽤v-if

数组中的哪些⽅法会触发视图的更新？

Vue 将被侦听的数组的变更⽅法进⾏了包裹，所以它们也将会触发视图更新，这些被包裹过的⽅法包

括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

上⾯的⽅法会直接修改原来的数组，所以它们会触发视图更新。其它数组的⽅法:

但是某些⽅法不会替换原来的数组，⽽是会⽣成新的数组，⽐如 fifilter()、concat() 和 slice()，使⽤

这些⽅法将不会触发视图更新

Vue中v-for的key 有什么作⽤？

在使⽤v-for进⾏列表渲染时，我们通常会给元素或者组件绑定⼀个key属性。

这个key属性有什么作⽤呢？

key属性主要⽤在Vue的虚拟DOM算法，在新旧nodes对⽐时辨识VNodes。
如果不使⽤key，Vue会使⽤⼀种最⼤限度减少动态元素并且尽可能的尝试就地修改/复⽤相同类型 

元素的算法 

使⽤key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。 

key 是 VNode 的唯⼀标记，通过这个 key， diffff 操作可以更准确、更快速的达到复⽤节点，更新视图的 

⽬的。复⽤节点就需要通过移动元素的位置来达到更新的⽬的。

computed和method有什么区别？

计算属性和⽅法：
- 都可以通过this来访问
- 都可以对⼀些数据进⾏处理和计算
- 对于包含响应式数据计算的逻辑，应该使⽤计算属性，因为计算属性是有缓存。
computed和method的区别
- computed底层会缓存, 性能更⾼
- 计算属性会基于它们的依赖关系进⾏缓存;
- 在数据不发⽣变化时，计算属性是不需要重新计算的
- 但是如果依赖的数据发⽣变化，在使⽤时，计算属性依然会重新进⾏计算

什么是双向绑定？v-model的本质是什么？

双向绑定:

即当数据发⽣变化的时候，视图也就发⽣变化，当视图发⽣变化的时候，数据也会跟着同步变化
v-model 是语法糖，它负责监听⽤户在表单元素中的输⼊事件来更新数据

表单元素使⽤v-model的本质：

v-bind绑定value属性的值
v-on绑定input事件监听到函数,函数会获取最新的值赋值到绑定的属性中

1	<input type="text" :value="message" @input="message = $event.target.value" />

组件使⽤v-model的本质：

将其 value attribute 绑定到⼀个名叫 modelValue 的 prop 上；
在其 input 事件被触发时，将新的值通过⾃定义的 update:modelValue 事件抛出(发出)；

<Counter v-model="appCounter"/>
<!-- 相当于-->
<Counter v-bind:modelValue="appCounter" @update:modelValue="appCounter =
$event"/>

data选项为什么是⼀个函数⽽不是对象？

JavaScript中的对象是引⽤类型的数据，当多个实例引⽤同⼀个对象时，只要⼀个实例对这个对象进⾏

操作，其他实例中的数据也会发⽣变化。

⽽在Vue中，我们更多的是想要复⽤组件，那就需要每个组件都有⾃⼰的数据，这样组件之间才不会相

互⼲扰。

所以组件的数据不能写成对象的形式，⽽是要写成函数的形式。数据以函数返回值的形式定义。

这样当我们每次复⽤组件的时候，就会返回⼀个新的data，也就是说每个组件都有⾃⼰的私有数据空

间，它们各⾃维护⾃⼰的数据，不会⼲扰其他组件的正常运⾏。

Vue data 中某⼀个属性的值发⽣改变后，视图会⽴即同步执⾏重新渲染吗？

不会⽴即同步执⾏重新渲染。

Vue 实现响应式并不是数据发⽣变化之后 DOM ⽴即变化，⽽是按⼀定的策略进⾏ DOM 的更新。

Vue 在更新 DOM 时是异步执⾏的。只要侦听到数据变化， Vue 将开启⼀个队列，并缓冲在同⼀事件循

环中发⽣的所有数据变更。

如果同⼀个watcher被多次触发，只会被推⼊到队列中⼀次。这种在缓冲时去除重复数据对于避免不必

要的计算和 DOM 操作是⾮常重要的。

然后，在下⼀个的事件循环”tick”中，Vue 刷新队列并执⾏实际（已去重的）⼯作。

sass是什么？如何在vue中安装和使⽤？

sass是⼀种CSS预处理器语⾔，除此之外，less、stylus也是常⻅的CSS预处理器语⾔。

sass安装和使⽤步骤如下：

⽤npm安装加载程序（ sass-loader、 css-loader等加载程序)。
在 webpack.confifig.js中配置sass加载程序