vue 20道精选面试题

一、说下Vue数据双向绑定的原理

能够参考https://www.cnblogs.com/wangjiachen666/p/9883916.html

也就是说：输入框内容发生变化时，data中的数据同步发生变化。即view = > model的变化

　　　　　data中的数据变化时，文本节点的内容同步发生变化。即model = > view的变化

二、说说Vuex的做用以及应用场景

项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通讯问题。

三、说说Vue组件的数据通讯方式

父传子----》props  子传父----》$emit

父组件向子组件传值:props

// section父组件
<template>
    <div class="section">
        <funqin-components :articleList="articleList"></funqin-components>
    </div>
</template>

<script>
import funqinComponents from './test/article.vue'
export default {
    name: 'HelloWorld',
    components: { funqinComponents },
    data() {
        return {
            articleList: ['红楼梦', '西游记', '三国演义']
        }
    }
}
</script>

// 子组件 article.vue
<template>
    <div>
        <span v-for="(item, index) in articleList" :key="index">{{item}}</span>
    </div>
</template>
<script>
export default {
    props: ['articleList']
}
</script>

 总结: props 只能够从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。并且 props 只读，不可被修改，全部修改都会失效并警告。

子组件向父组件传值:$emit

// section父组件
<template>
    <div class="section">
        <funqin-components :articleList="articleList" @e-world="getData"></funqin-components>
    </div>
</template>

<script>
import funqinComponents from './test/article.vue'
export default {
    name: 'HelloWorld',
    components: { funqinComponents },
    data() {
        return {
            attr2:'',
            articleList: ['红楼梦', '西游记', '三国演义']
        }
    },
    methods:{
        getData(attr2) {
            this.attr2=attr2;
        }
    }
}
</script>

// 子组件 article.vue
<template>
    <div>
        <span v-for="(item, index) in articleList" :key="index">{{item}}</span>
        {{attr2}}
        <button @click="send">将子组件的数据传递给父组件</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            attr2: "我是子组件的数据"
        }
    },
    props: ['articleList'],
    methods:{
        send() {
            //调用emit方法，触发了一个自定义的事件e-world，发送数据
            this.$emit("e-world", this.attr2);
        }
    }
}
</script>

总结：$emit绑定一个自定义的事件，当这个语句被执行时，就会将参数传给父组件，父组件经过v-on也就是@监听并接收，

同时父组件的data对象里，也要定义这个变量来接收这个值。

既然写到这里，再说一下：兄弟组件的传递（建立一个空的vue对象来接收）

<div id="app">
        <component1></component1>
        <component2></component2>
    </div>
    <template id="t1">
        <div>
            我是component1,{{attr2}}

        </div>
    </template>

    <template id="t2">
        <div>
            我是component2
            <button @click="send">将component2的数据传递给component1</button>
        </div>
    </template>
    <script>
        var event = new Vue({}); var vm = new Vue({
            el: "#app",
            components: {
                "component1": {
                    template: "#t1",
                    data() {
                        return {
                            attr1: "我是component1的数据",
                            attr2: ""
                        }
                    },
                    mounted() {
                        //接收
                        event.$on("e-world", attr2 => {
                            this.attr2 = attr2;
                        });
                    },
                },
                "component2": {
                    template: "#t2",
                    data() {
                        return {
                            attr2: "我是component2的数据"
                        }
                    },
                    methods: {
                        send() {
                            //发送数据
                            event.$emit("e-world", this.attr2);
                        }
                    },
                }
            }
        });
    </script>

四、Vue的源码有看过吗？说说vuex工做原理

详细请参考：https://www.cnblogs.com/changk/p/8657465.html（转载）

五、什么是虚拟dom，为何说虚拟 dom会提升性能，解释一下它的工做原理

虚拟dom就是一个JavaScript对象，经过这个JavaScript对象来描述真是的dom。真是的dom操做，都会对某块元素总体重新渲染。采用虚拟dom，当数据变化时，只要局部刷新对应变化的位置就能够了。

六、请你详细介绍一些 package.json 里面的配置

 详细请参考：https://blog.csdn.net/weixin_42420703/article/details/81870815（转载）

七、为何说Vue是一套渐进式框架

 每一个框架都不可避免会有本身的一些特色，从而会对使用者有必定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 使用vue，你 能够在原有

每一个框架都不可避免会有本身的一些特色，从而会对使用者 有必定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
使用vue，你能够在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也能够整个用它全家桶开发，当Angular用；
还能够用它的视图，搭配你本身设计的整个下层用。你能够在底层数据逻辑的地方用OO和设计模式的那套理念。
也能够函数式，均可以。
它只是个轻量视图而已，只作了本身该作的事，没有作不应作的事，仅此而已
你没必要一开始就用Vue全部的全家桶，根据场景，官方提供了方便的框架供你使用。

 八、vue-cli提供的几种脚手架模板有哪些，区别是什么

webpack和webpack-simple，最大的区别是webpack-simple没有路由vue-router配置

九、计算属性的缓存和方法调用的区别

 （1）咱们能够将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是彻底相同的。不一样的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会从新求值。相比之下，每当触发从新渲染时，调用方法将总会再次执行函数。

（2）使用计算属性仍是methods取决因而否须要缓存，当遍历大数组和作大量计算时，应当使用计算属性，除非你不但愿获得缓存。
咱们为何须要缓存？假设咱们有一个性能开销比较大的计算属性 A，它须要遍历一个巨大的数组并作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter！若是你不但愿有缓存，请用方法来替代。
（3）计算属性是根据依赖自动执行的，methods须要事件调用。

十、axios、fetch与ajax有什么区别

详细请参考：https://www.cnblogs.com/zhang134you/p/10636061.html（转载）

十一、vue中央事件总线的使用

详细请参考：https://blog.csdn.net/wy01272454/article/details/77756079（转载）

十二、你作过的Vue项目有哪些，用到了哪些核心知识点

1三、实现MVVM的思路分析

详细请参考：https://www.cnblogs.com/aaronjs/p/3614049.html（转载）

1四、批量异步更新策略及 nextTick 原理

详细请参考：https://blog.csdn.net/sinat_17775997/article/details/83280345（转载）

1五、说说Vue开发命令 npm run dev 输入后的执行过程

详细请参考：https://www.cnblogs.com/zeroes/p/vue-run-dev.html（转载）

1六、vue-cli中经常使用到的加载器有哪些

详细请参考：https://www.jianshu.com/p/ac8e685577cd（转载）

1七、Vue中如何利用 keep-alive 标签实现某个组件缓存功能

详细请参考：https://www.php.cn/js-tutorial-398645.html（转载）

1八、vue-router如何响应 路由参数 的变化

详细请参考：https://www.cnblogs.com/mengfangui/p/9154253.html（转载）

1九、Vue 组件中 data 为何必须是函数

Object是引用数据类型,若是不用function 返回,每一个组件的data 都是内存的同一个地址,一个数据改变了其余也改变了，

javascipt只有函数构成做用域(注意理解做用域,只有函数的{}构成做用域,对象的{}以及 if(){}都不构成做用域)，data是一个函数时，每一个组件实例都有本身的做用域，每一个实例相互独立,不会相互影响。

下面以例子来讲明一下：

<div id="app">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

var data = { counter: 0 };
    Vue.component('simple-counter',{
        template:'<button v-on:click="counter += 1">{{ counter}}</button>',
    // 技术上 data 的确是一个函数了，所以 Vue 不会警告，
    // 可是咱们返回给每一个组件的实例却引用了同一个 data 对象
    data: function () {
        return {
            data
        }
    }
})
new Vue({
    el:'#app'
});

由于这三组从新共享了data，因此值都是相同的，咱们能够经过给每一个组件返回全新的data对象来解决这个问题

data: function () {
    return {
    　　counter: 0
    }
}

如今每一个 counter 都有它本身内部的状态了。