前端Vue面试准备第二天

一、Vue组件间如何传值通信

• 父组件传值到子组件

父组件：

<Header :msg='msg'></Header>

子组件：

props:{
    msg:数据类型
}

• 子组件传值父组件

子组件：

this.$emit("自定义事件名称",要传的数据);

父组件：

<Header @childInput='getVal'></Header>

methods:{
    getVal(data){
        //data就是子组件传递的数据
    }
}

• 兄弟组件之前传值

通过中转（transfer）

A兄弟传值：

import transfer from '@/common/transfer'

transfer.$emit("toBro",this.data)

B兄弟接收

import transfer from '@/common/transfer'

transfer.$on('toBro',(data)=>{
    //data为A兄弟组件传来的数据
})

二、computed、methods、watch有什么区别

• computed有缓存methods没有缓存
• watch监听数据或路由发生改变时响应，在数据变化时执行异步或者开销较大的操作时应该使用watch；computed可以计算某一属性改变，如果某个值发生改变，计算属性会监听到进行返回，适合用来进行数值计算。

三、谈谈对Vue组件化的理解 

•  组件系统是Vue 核心特性之一，独立和可复用性，高内聚、低耦合，遵循单向数据流的原则，大幅提升开发效率。
• 组件按分类包括页面组件、业务组件、通用组件，合理划分组件可以提升应用性能；vue中常见组件化技术有属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等

四、谈谈对MVC、MVP、MVVM的理解 

• 三种框架模式都是为了解决Model和View的耦合问题
• MVC较早出现在后端，如Spring MVC，优点分层清晰，缺点数据流混乱和灵活性会带来维护性问题。
• MVP是MVC进化而来，解决了耦合问题，但P层过于臃肿导致维护性问题
• Model–View–ViewModel，View是视图层，即用户界面，由html和css来搭建，Model 是指数据模型，核心是ViewModel 层，该层向上与视图层进行双向数据绑定，向下与model层通过接口请求进行数据交互，起到承上启下的作用。

五、Vue 是如何实现数据双向绑定的 

通过Object.defineProperty劫持数据发生改变，如果数据发生改变了（在set中进行赋值的），触发update方法进行更新节点内容（{{str}}），从而实现了数据双向绑定原理。