[toc] # 題1、data 中定義的數據如何在頁面中顯示？ 答： 1. 如果是字符串、數字等，使用 {{ ... }} 2. 如果是數組一般使用 v-for # 題2、生命周期函數有哪些？項目中是怎么使用的？ 答： 1. 創建前后、掛載前后、銷毀前后、更新前后、被激活、被隱藏等 2. 項目中常用的： created（創建后）：調接口獲取頁面初始數據。 mounted（掛載后）：在頁面加載完之后執行一個 DOM 操作的 JS 代碼，比如：商城后中的圖表功能。 # 題3、在 Vue 中如何綁定事件？ 答：v-on 或者 @ 。比如：v-on:click 或者 @click。 # 題4、什么是雙向綁定？項目中是怎么使用的？ 答：使用 v-model 指令進行雙向綁定。 項目中：操作表單元素：單選框、復選框、下拉框等時需要定義數據并使用 v-model 進行綁定。 # 題5、Vue 組件中的 data 為什么是函數？ 答：跟按引用傳值有關。如果不用函數，data 是對象類型的數據，對象都是按引用傳遞的，會導致：當組件使用多次時，它們會共享用同一個 data 數據，修改任何一個組件中的 data ,其他的組件也會跟著一起改變，這是不對的，每個組件實例在使用時應該是完全獨立 的，互不影響才對。 所以 data 必須是一個函數，每次在函數中返回一個全新的對象，這樣就不會出現共享的問題了。 # 擴展：什么是按引用傳值？ 變量賦值時分為兩種情況： - 按值傳遞：如果是數字、布爾、字符串等基礎類型。 原理：先把這個值在內存中復制一份，然后賦給另一個變量。 效果：賦值之后兩個值是兩個獨立的變量互不影響 。 ~~~ /* 按值傳遞 */ let a = 100 // 數字 let b = a // 按值傳遞（因為 a 是數字） // 現在 a 和 b 是兩個獨立 互不影響 的變量 b=200 // 修改 b 不影響 a console.log(a) // a 還是 100 ~~~ - 按引用傳遞：如果值類型是對象或者數組時。 原理：把這個變量在內存中的地址賦給另一個變量。 效果：賦值之后，兩個變量指向同一個內存地址，其實還是同一個變量，只不過有兩個變量名。 ~~~ /* 按引用傳遞 */ let a = [1,2,3] // 數組 let b = a // 按引用傳遞（數組和對象都是引用傳遞） // a 和 b 指向內存中的同一個地址，a和b是同一個數據 b[0] = 100 // 把 b 修改 console.log( a[0] ) // 100 也變成100， // 所以如果希望復制出一個全新的數組，需要使用 “克隆技術” /* 淺克隆：只克隆最外層的數據。（只克隆一部分） 方法：let b = [...a] ， 把 a 克隆一份給 b （淺克隆） 深克隆：把內層的也復制一份。（完全的克隆） 方法：let b = JSON.parse( JSON.stringify(a) ) */ ~~~ # 題6、如何定義計算屬性？項目中是怎么使用的？ 答：使用 computed 來定義計算屬性。制作購物車時里面的商品總價。 # 題7、什么是監聽器？監聽什么的？項目中是怎么使用的？ 答：使用 watch 來定義監聽器，一個監聽器就是一個函數，函數名就是要監聽的 data 中的一個變量的名字，一旦監聽的變量發生變量，這個函數就被調用了。 監聽器分為淺監聽和深度監聽，當監聽的數據是一個復雜的數據類型（數組、對象）時需要使用深度監聽。 在項目中實現數據搜索、排序、翻頁時使用過，每當用戶點擊翻頁、排序、搜索條件的按鈕時就要重新調用接口，所以我定義了一個變量，保存翻頁、排序、搜索的信息，然后使用監聽器監聽這個變量，一量發生變化就重新調用接口獲取數據 代碼： ~~~ data() { return { // 保存翻頁、搜索關鍵字、排序信息 info: { page: 1, keywords: '', sortby: 'id', sortway: 'desc' } } }, // 監聽器 watch: { // 當條件改變時重新調用接口 info: { deep: true, // 深度監聽 handle: function() { // 重新調用接口獲取數據 } } } ~~~ # 題8、什么是過濾器？項目中是怎么使用的？如何使用過濾器？ 答：使用 filter 定義過濾器。 過濾器分為全局過濾器 和 局部過濾器。 全局過濾器：在任何一個組件中可以直接使用。 局部過濾器：在組件中需要先引入，再注冊到組件的 filter 中，然后才能使用。 當一個絕對時間（發表文章時間）在顯示時轉化成一個相對時間，項目中的實現思路： 1. 先定義了一個叫做 relativeTime 的全局變量器 2. 在組件中使用： {{ time | relativeTime }} # 題9、什么是混入？項目中是怎么使用的？ 答：mixins 是定義混入。可以把一段 JS 代碼合并到一個 Vue 組件中。 用途：可以把多個組件共用的 JS 代碼單獨提取出來放到一個 JS 文件中，然后哪個組件中需要就直接混入。 之前寫的商城后臺的項目：使用了混入實現的把組件中的JS 代碼和 HTML+CSS 分離寫在兩個文件中。 實現思路： 1. 把 JS 代碼單獨寫到一個 JS 文件中 2. 在 .vue 文件中使用 mixins: [ js 文件] 混入進來 # 題10、如何將 data 中定義的圖片路徑綁定到 src 屬性上？ 答：使用 v-bind 或者 : 。 比如： ~~~ <img :src="image" /> <img v-bind:src="image" /> data:{ image: 'http://www.ww.ww/1.jpg' } ~~~ # 題11、在 Vue 中使用一個自定義組件的流程是？ 答： 自定義組件有兩種情況： - 全局組件：直接在頁面中使用 ，比如： <Hello /> - 局部組件：先引入、再組件，然后才能使用。 1.創建一個自定義組件，比如：Hello.vue 組件 2. 使用 import 引入這個自定義組件，比如：import Hello from 'Hello.vue' 3. 注冊這個組件，在 Vue 的 components: { Hello } 4. 使用：<Hello /> # 題12、組件之間如何傳值？父向子傳值時，如何設置屬性的默認值和屬性的類型？ 答： 父>子 使用屬性 ，注意，需要在子組件中使用 `props` 來接收屬性。 子>父 使用 事件，注意：在子組件中使用 `this.$emit(事件名，數據）` 觸發父組件中的事件 兄弟之間 使用 `Bus 總線` 的中間組件實現。 **父向子傳值時，如何設置屬性的默認值和屬性的類型？** 在子組件中使用 props 接收屬性： 寫法一、不設置類型和默認值 props: [ 'name', 'age' ] // 接收 name 和 age ，不限制類型 寫法二、限制類型和默認值 props: { name: { type: String, default: '' }, age: { type: Number, default: 0 } } # 題13、style 上的 scoped 是什么意思？使用原理是什么？ 答：里面的樣式只對當前這個組件生效，不會影響其他組件。 當添加了 scoped 之后，vue 會在這個組件中所有的標簽上都添加一個唯一的標識符，只有這個組件中的標簽上才有這個標簽符，然后在 CSS 上會通過這個屬性來限制 CSS 的應用范圍。 1. 組件中添加屬性  2. css 上通過屬性來限制范圍 ~~~ /* 通過屬性選擇器就只對當前這個組件中的 .count 生效 */ .count [ data-v-26084dc2 ] { color: blue; } ~~~ # 題14、什么是插槽？干什么用的？ 答：組件中會在特定的位置上留插槽，我們可以在使用這個組件時向這個插槽中添加HTML的結構，目的是可以自己擴展一個組件的功能。比如：項目中使用的 vant 的導航欄組件，但是它默認的圖標不滿足要求，所以我們可以使用它的插槽，自己來定義圖標這個區域的內容。 插槽分為兩種： - 匿名插槽（默認插槽）一個組件中只能有一個匿名插槽。 如果在組件中間不使用 slot 默認放到匿名插槽的位置。 - 有名插槽，一個組件中可以有多個有名的插槽。 向有名插槽中放數據時需要使用 slot 屬性指定插槽的名字 # 題15、v-if 和 v-show 的區別？ 答： 共同：v-if 和 v-show 都是控制一個元素是否顯示。 區別：v-if 如果是 false 就不渲染這個元素，頁面中沒有這個元素 v-show 無論 true 和 false 都會渲染這個元素，頁面中始終有這個元素，當 false 時使用 display: none 把它隱藏。 # 題16、v-html 的用途是？ 答：把一個 HTML 字符串 `解析` 成 HTML 顯示出來。 比如： ~~~ {{ str }} ------------> 當成普通字符串顯示出來： <h1>hello</h1> <div v-html="str"></div> ----------> 解析 h1 標簽，顯示出來是一個加粗放大的 hello data: { str: '<h1>hello</h1>' } ~~~ # 題17、template 組件的用途是？ 答：這個標簽在頁面中不會渲染出任何元素，它的用途是把多個標簽套起來當成一個整體。 比如有三個 div 標簽要循環 ~~~ <div>abc</div> <div>abc</div> <div>abc</div> ~~~ 必須要使用一元素套起來 ~~~ <div v-for="v in 10"> <div>abc</div> <div>abc</div> <div>abc</div> </div> ~~~ 這樣最外層多了一個 div，如果不想要外層 div 可以使用 tempalte ~~~ <template v-for="v in 10"> <div>abc</div> <div>abc</div> <div>abc</div> </template> ~~~