vue面试题

1.什么是 MVVM？
1.MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。

2.Model 代表数据层，负责存放业务相关的数据；

3.View 代表视图层，负责在页面上展示数据；

4.ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

1.2什么是Vue
Vue是一套用于构建用户界面的渐进式JavaScript框架

与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期

1.3Vue的优缺点
优点：轻量级、易上手、高性能、便于测试
缺点：生态环境不够完善

2.组件通讯
1.父传子
这种传值方式比较简单，子组件只需用props将父组件传递过来的数据接收，即可使用

父组件代码：

<p>这是父组件</p>
<input type="text" v-model="parentData">
<Childrenfrt :parentData="parentData" ></Childrenfrt>

子组件代码：

props: {
 parentData: { type: String, required: true }
}

2.子传父
子组件传值给父组件需要通过一个自定义得方法，父组件监控这个方法来获得子组件传过来的值。子组件通过this.$emit将数据放在setData方法中，父组件通过监控setData这个方法将值取出。

<p><input type="text" v-model="children1Data"></p>
<p><button @click="sentChildData">点击传值给父组件</button></p>

export default {
  name: 'Childrenfrt',
  data() {
    return{
      children1Data: ''
    }
  },
  methods: {
    sentChildData() {
      this.$emit('sentData', this.children1Data)
    }
  }
}
</script>

父组件代码：

<Childrenfrt  @sentData="sentData"></Childrenfrt>

<script>
export default {
  name: 'Index',
  data() {
    return{
      childData: ''
    }
  },
  methods: {
    sentData(val) {
      this.childData = val
    }
  }
}
</script>

3.兄弟组件之间
兄弟组件指的是平级之间的组件，他们中得传值方式比较多
1.第一种是属于一种比较麻烦的方法，可以将值先传给父组件，再通过父组件传值给子组件得传值方式传值给另一个子组件
2.可以使用Bus事件总线，创建一个中转站来进行传值。

创建一个bus文件夹，在文件夹中新建index.js文件
在main.js中引用
在方法中使用：通过 this.$ bus.e m i t 将 值 放 入 s e t D a t a T o B r a t h e r 中 取 值 得 方 法 &#x