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