vue

一：什么是MVVM？

MVVM是Model-View-ViewModel的缩写
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来;
ViewModel 是一个同步View 和 Model的对象（桥梁）。ViewModel是vue的核心，是Vue的一个实例
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化

二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

三、vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

· 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

· 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

· 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

四、组件之间的传值？

父组件与子组件传值
父组件通过标签上面定义传值 ：eg='egdata' 父组件中 data(){return {data:'egdata'}}
子组件通过props方法接受数据 props:['eg'] 在 props 中添加了元素之后，就不需要在 data 中再添加变量了
·子组件向父组件传递数据
子组件通过$emit方法传递参数

五、计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景

methods VS 计算属性

计算属性：是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。计算属性可以缓存数据。
methods：只要发生重新渲染，method 调用总会执行该函数

watch VS 计算属性

计算属性：当用于复杂的表达式的时候，需要可以选择计算属性
watch：数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

六、Vue 生命周期的理解

• beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。以下周期在服务端渲染期间都不被调用。

• mounted

el 被新创建的 vm.[图片上传失败...(image-6acd01-1574679988820)]

el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

• beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

• updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

• activated

keep-alive 组件激活时调用。

• deactivated

keep-alive 组件停用时调用。

• beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

• destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

七、Vue 路由中 hash 模式和 history 模式区别

hash模式：
特点：
（1）hash虽然在URL中，但不被包括在HTTP请求中；
（2）用来指导浏览器动作，hash不会重加载页面。

history模式：
history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

原理：

hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。
history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听popState()事件。

八、Vue 路由中route和router的区别

route是路由对象信息，包括push、params、hash、query、fullPath、name等路由信息

router是“路由实例”对象包括了路由的跳转方法，钩子函数等。