面试|Vue常见的基础面试题（2） javascript|vue.js

1.computed和watch区别
computed拥有依赖缓存特性，如果依赖值不变，computed不会重新计算
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。
watch更多的是观察作用，类似于某些数据的监听回调。有两个选项，immediate和deep。
当 immediate：true 时，回调函数会在监听开始后立刻执行，可以监听到到第一次变化。
当deep：true 会监听到obj对象的所有内部属性，默认值为false
2.对于MVVM的理解
M==model, 代表数据模型，可以在model中定义数据修改和操作的业务逻辑。
V==view ，代表UI视图，可以将数据模型转换为UI视图展示出来
VM==ViweModel，它是model和view的桥梁，监听模型数据的改变，和控制视图行为处理用户交互。
3.说说对SPA单页面的理解
在Web页面初始化时加载相应的HTML ,CSS, Javascript，一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
4.Vue2.x组件通信有哪些方式？

父子组件通信父->子props，子->父 $on、$emit
获取父子组件实例 $parent、$children
Ref 获取实例的方式调用组件的属性或者方法
Provide、inject 官方不推荐使用，但是写组件库时很常用
兄弟组件通信 Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
Vuex
跨级组件通信 Vuex
$attrs、$listeners
Provide、inject

5.vue 路由传参 query与 params 两种方式的区别？
query要用path来引入，this.$route.query.name
params要用name来引入，this.$route.params.name。
query更加类似于我们ajax中get传参，params则类似于post
（在此可以了解了解post和get的区别）
6. 路由有哪些模式呢？又有什么不同呢？

hash模式：有“#”号，触发hashchange事件，实现路由切换
history模式：没有“#”号，通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合

7.ref的作用？

绑定到普通元素上：获取dom元素this.$refs.box
绑定到子组件上：获取子组件的data和它的方法

8.$route和$router的区别
简单来说一个是用来获取路由信息的，一个是用来操作路由的。
9.什么回流和重绘？
简单理解就是回流：页面布局和几何属性发生改变就会回流（布局发生改变）
重绘：就是节点样式发生改变，比如color，字体大小之类
回流必定会触发重绘，重绘不一定会引发回流
减少重绘和回流
使用transfrom代替top
使用visibility替换display：none，因为前者只会引起重绘，后者会引起回流（改变了布局）
不要使用table布局，可能很小的一个改变会造成整个table的重新布局
10.Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象
（vue3中的proxy可以弥补Object.defineProperty的缺陷）
【面试|Vue常见的基础面试题（2）】