vue 20到精选面试题

Posted 2021-03-25 shixy1617

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

可以参考https://www.cnblogs.com/wangjiachen666/p/9883916.html

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

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

2、说说Vuex的作用以及应用场景

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

3、说说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>

4、Vue的源码有看过吗？说说vuex工作原理

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

5、什么是虚拟dom，为什么说虚拟 dom会提高性能，解释一下它的工作原理

虚拟dom就是一个javascript对象，通过这个JavaScript对象来描述真是的dom。真是的dom操作，都会对某块元素整体从新渲染。采用虚拟dom，当数据变化时，只要局部刷新对应变化的位置就可以了。

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

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

7、为什么说Vue是一套渐进式框架

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

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

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

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

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

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

（2）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
（3）计算属性是根据依赖自动执行的，methods需要事件调用。

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

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

11、vue中央事件总线的使用

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

12、你做过的Vue项目有哪些，用到了哪些核心知识点

13、实现MVVM的思路分析

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

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

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

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

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

16、vue-cli中常用到的加载器有哪些

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

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

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

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

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

19、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 都有它自己内部的状态了。