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 都有它本身內部的狀態了。