vue面试题

1.vue解决了哪些问题

①虚拟dom:dom操作时非常耗性能，不再使用原生的dom操作节点，极大的解放dom操作，但具体操作的还是dom，只是换了一种方式。

因此view数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上

ViewModel通过双向数据绑定把View层和Model层连接了起来,因此开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步问题，这些都由MVVM统一管理。

3.如何实现一个自定义组件，不同组件之间是如何通信的

3-1. 自定义组件

在子组件中创建模版，使用props接收父组件中的数据，在父组件中引入子组件，中components写入子组件名称，最后挂载到父组件中的template。

3-2. props和$emit

父组件通过props在子组件中接收数据

子组件通过this.$emit向父组件中触发事件

3-3. $children 和$parent

this.$children[0].msg = "hello world" //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件data中的数据
$children的值是数组，$parent的值是个对象

3-4. $ref 和$refs

ref:如果在普通的dom元素上使用，引用指向dom元素，如果在子组件上使用，引用指向组件的实例

//父组件
<template>
    <component-a ref="comA"></component-a>
</template>
<script>
    export default{
        mounted(){
            const comA = this.$refs.comA;
            console.log(comA.name)//Vue.js
            comA.sayHello() //hello
        }
    }
</script>

//子组件
export default{
    data(){
        return {
            name:"Vue.js"
        }
    },
    methods:{
        sayHello(){
            console.log("hello")
        }
    }
}

3-5. eventBus(Bus总线)

1. 在src中新建一个bus.js，导入空的vue实例

2.在传输数据的一方引入bus.js，然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

3.在接受的数据的一方引入 Bus.js ，然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

3-6. $attrs /$listeners

 将数据挂在到子组件的标签上，在子组件中使用this.$attrs直接获取到所有挂载的数据，返回的是一个对象。 

4. nextTick的理解

**使用nextTick的原因：**Vue是异步修改DOM的，并且不鼓励开发者直接接触DOM，但是有时候需要必须对的DOM元素做相应的处理，这就需要this.$nextTick()；

**原理：**Vue通过异步队列控制DOM更新的和nextTick回调函数先后的顺序。

//HTML
<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
    name:"app",
    data(){
        return {
            msg:"123"
        }
    },
    methods:{
        change(){
            this.msg = "456";
            console.log(this.refs["gss"].innerHTML)//123
            this.$nextTick(function(){
                console.log(this.refs["gss"].innerHTML)//456
            })
        }
    }

}  

5. Vue的生命周期(11个钩子函数)

1. beforeCreate(创建前): 

无法监控到数组下标的变化，使通过数组的下标的设置值，不能实时响应。

Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历

如果能劫持一个完整的对象才是更好的选择。

补充:

Proxy是ES6新增的一个属性，意思就是代理,它来“代理”某些操作。Proxy让我们能够以简洁的控制外部对象的访问，类似于设计模式中的代理模式。

使用Proxy的核心优点是可以交由它来处理一些非核心逻辑(如：读取或设置对象的某些属性前记录日志)

9. watch、computed和methods的区别

watch 监听属性 没有缓存性，属性值发生变化时就会执行，可以利用它做一些异步操作

computed具有缓存性，依赖于属性值，只要属性发生变化时就会重新调用

methods 没有缓存性，只要调用就会执行

10. virtual-dom原理实现(虚拟dom)

virtual-dom(简称vdom)的概念大规模的使用于react相比于频繁的手动去操作dom而带来性能问题，virtual-dom也是react这个框架的非常重要的特性之一

vdom关于dom的创建节点，删除节点，添加节点等dom操作都放到vdom中，

通过操作vdom来提高直接操作的dom的效率和性能。

链接：juejin.cn/post/684490…