目錄

1. 面試題總結?

1.1 public和assets區別

1.2 vite的作用

1.3? vue單頁面應用

1.4 組件分為兩種類型：

1.5 App.vue文件

1.6 main.js

1.7?vue2中為什么不能直接監聽到數組的改變？

2. .vue頁面的組成

3. ref 響應式數據

---

1. 面試題總結?

1.1 public和assets區別

1. 兩者都是放靜態文件的，只是放在public中的靜態資源最終使用vite打包項目的時候是不會被vite處理的，里面放的什么文件，打包后還是什么文件，vite直接原樣打包。?而assets中的靜態文件是要經過vite編譯壓縮的，vite會對它內部的靜態資源處理。
2. 一般自己封裝的css、js等靜態資源文件放在assets中。第三方壓縮過后的靜態資源放在public中，比如：bootstrap.min.js、jQuery.min.js等，這些都壓縮過了，無需再壓縮。當然都放在assets中也可以，但不要都放在public中。

1.2 vite的作用

? ? ?因為vue是基于組件化模式開發的單頁面應用，文件后綴以.vue結尾。瀏覽器并不能識別這種文件，瀏覽器只能加載.html .js .css文件。因此需要一個工具將.vue文件編譯成瀏覽器能加載的.html .js .css文件，vite就是構建項目的編譯工具。轉換代碼只是其中一個功能，還有以下功能：

1. 壓縮靜態文件 ：.js .css都會被vite壓縮，減少項目代碼體積，更輕量化，項目上線到服務器之后，由于代碼體積小，前端加載速度更快：
2. vite內置了測試服務器：提供了一個本地服務器，用來調試代碼；實時編譯代碼；配置跨域

1.3? vue單頁面應用

? ? ? ?因為vue設計是基于組件化開發的，這些組件通過不同的方式展示到index.html這唯一的一個頁面中，從而完成項目布局，組件可以理解為代碼片段，是一種封裝的思想，將不同功能模塊的代碼封裝到一個.vue文件中方，這個文件就稱為組件。

1.4 組件分為兩種類型：

1. ?路由組件：也叫頁面組件，它是構成頁面的重要組件，模擬多個.html頁面之間的跳轉就是靠這種組件，再搭配前端路由共同實現的；通過訪問不同的前端路由地址，從而加載不同的頁面。解決了傳統的頁面切換問題。
2. 公共組件：主要是將不同頁面需要重復使用的標簽結構單獨封裝成一個.vue文件，放在components文件夾中，其他頁面導入即可使用，實現組件重用；

1.5 App.vue文件

? ? ? ?它是項目的根頁面，項目啟動時，這個根頁面中的標簽內容就已經被加載到了index.html中了，這個文件主要負責加載其他的路由組件，他內部必選配置<RouterView />。所以模擬頁面間的跳轉，實際上就是在App.vue內部完成的。

1.6 main.js

? ? ? ?main.js項目的入口文件，項目啟動時，vite就是從這個文件開始加載項目的，在該文件內部，初始化了App.vue根組件。

1.7?vue2中為什么不能直接監聽到數組的改變？

? ? ? ? ? vue2采用的是 Object.defineProperty進行對對象劫持實現響應式，正常對象中的屬性是有限的，所以可以使用 Object.defineProperty進行迭代劫持，但是對于數組來說，數組中的元素可能是無限的，如果 Object.defineProperty也對數組中的每個元素進行劫持會非常浪費性能，所以為了避免不必要的性能浪費，vue2沒有對數組中的每一項進行數據劫持。而是通過重寫了處理數組的七種方法（push(),pop(),shift(),unshift(),splice(),sort(),reverse()）觸發視圖更新。

2. .vue頁面的組成

.vue通常由三部分以下組成：

1. <template></template> 是用來包裹標簽結構的，而且template是必須要寫的。vue中約定template內部有且只能有一個根標簽。
2. <style></style>在內部寫組件樣式，和css的語法規則一樣。
3. <script>export default {}</script>在內部寫入js相關代碼。
4. export default {}表示導出一個配置對象，這個對象可以對當前組件實例進行配置。每一個.vue文件都對應一個vue實例對象。vue會產生這樣一個對象，我們只需要配置該對象就好，vue會拿著這些配置初始化這個組件實例對象。
5. 在花括號內要寫入setup函數，setup函數是每個組件必須要有的函數，他是組件的入口函數，組件創建時，就是從setup函數開始初始化執行的。它內部可以聲明組件數據和方法。?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

<template><div><h1>home</h1></div>
</template>
<style></style>
<script>
export default {setup() {}  
}
</script>

3. ref 響應式數據

想要實現頁面數據的響應式就需要先從 Vue 模塊中導入 ref?對象。

import { ref } from "vue";

在setup方法中聲明響應式數據時需要按照以下格式進行編寫。響應式數據，它的目的是減少程序員操作dom的過程，操作dom由vue底層高效的實現dom操作。vue會監聽到數據變化，從而更新dom。

 let num = ref(1);
let src = ref("/src/assets/icons/1.jpg");

在setup里面在使用ref聲明的響應式數據時需要寫.value ? ref聲明的變量，只在<script>中賦值取值需要通過.value進行。<template>模板中統統不需要使用.value，直接變量名即可。

  const addNum = () => {num.value++;console.log(num);};const clickOne = () => {src.value = "/src/assets/icons/1.jpg";};const clickTwo = () => {src.value = "/src/assets/icons/2.jpg";};

?最后需要將所需變量和方法使用return返出來。

 return {num,src,addNum,clickOne,clickTwo,clickThree};

?這樣在頁面對應位置引入的數據就可以實現響應式的效果了。

<template><div class="about"><h2>插值表達式：{{ num }}</h2><button v-on:click="addNum">num++</button><img v-bind:src="src" alt="" /><button @click="clickOne">img1</button><button @click="clickTwo">img2</button><button @click="clickThree">img3</button></div>
</template>

還可以利用ref來?操作dom。通過ref屬性，給目標dom綁定變量，這個dom對象就會保存到hTag上。

<template><div><h4 @click="test" ref="hTag">通過REF操作dom</h4>
</template>
<style>
</style>
<script>
import { ref } from "vue";
import useImage from "@/hooks/userimage";
export default {setup() {// 利用ref操作domconst hTag = ref(null);const test = () => {hTag.value.style.color = "blue";};return {hTag,test,};}
};
</script>