VUE 史上最全面面试题一

VUE 史上最全面面试题一

一、什么是MVVM

MVVM是Model-View-viewModel的缩写，MVVM是一种设计思想，而 Model层是一种数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI组件，它负责将数据模型转化陈UI展示出来，ViewModel是一个同步View和Model的对象。

MVVM架构下，View 和 Model之间并没有直接的联系。而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据变化会同步到Model中，而Model数据变化会立马反应至View上。

ViewModel 通过双向数据绑定将view和model 直接联系起来，而model和view 之间的同步工作是完全自动的，无需人为去干涉。则开发者不需要手动操作DOM，只需要关心业务逻辑就可以了，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM统一管理。

二、MVVM和MVC区别 和其他框架的区别 那些场景适合

MVVM和MVC区别不大，都是一种设计思想，主要是MVC中的controller变成了MVVM中的ViewModel.MVVM 主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户的体验。
区别： VUE数据驱动，通过数据来显示视图层 而不是节点操作。
场景： 数据操作比较多的场景，更加便捷

三、vue的优点是什么

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

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

独立开发。开发人员可以专注业务逻辑和数据开发，设计人员专注页面设计

可测试。测试可针对ViewModel来写

四、vue 组件间值传递

父组件传值至子组件 props

子组件传值父组件 $emit

如：
父：

<template>
    <div class="root">
        <child msg="父传子信息" @transfer="getValue"> {
  {transferValue}} </child>
    </div>
   </template>
export default {
    name: 'root',
   ...
    methods: {
        getValue: function(msg){
            this.transferValue = msg
        }
    }
   }

子:

<template>
  <div class="child">
     子组件接受父组件内容：{
  {msg}}
  </div>  
  <button @click="setValue">传值至父组件</button>
 </template>

 export default {
  name: 'child',
  props: {
      msg: {
          type: String,
          required: true
      }