1. vue中實現變異數組和非變異數組的方法
在閱讀vue官網的時候，偶然間看到了一個觀察數組變異的方法，變異方法？Are you kidding me? ...什麼東西？guide就給了這么一堆東西：
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
*
1.push( )
*
2.pop( )
*
3.unshift( )
*
4.shift( )
*
5.splice()
*
6.sort()
*
7.reverse()
看完這里才恍然大悟，其實數組變異方法都是JavaScript操作數組的方法，那麼接下來就一一解釋這些方法是幹嘛用的
push（）往數組最後面添加一個元素，成功返回當前數組的長度
pop（）刪除數組的最後一個元素，成功返回刪除元素的值
shift（）刪除數組的第一個元素，返回該元素。
unshift（）在數組的開頭添加一個或者多個元素，返回原數組的長度，改變原來的數組
splice（）有三個參數，第一個是刪除index位置的元素（必選），第二個是想要刪除的個數（必選），第三個是刪除後想要在原位置替換的值（可選）
splice(index，num，5)表示從index下標位置開始向後截取num個元素，截取的這些元素組成一個新數組返回，並且從index位置開始，插入後面的所有參數。（插入到原數組里去）
sort（）使數組按照字元編碼默認從小到大排序,成功返回排序後的數組
reverse（） 將數組倒序，成功返回倒序後的數組
既然有變異方法那麼也自然有非變異方法（操作數組不改變原數組的）
filter（）、concat（）和 slice（）
他們不會改變原始數組，他們只會生成一個新的數組
slice（）將原數組
slice（startindex，endindex）從startindex下標開始向後截取到endindex位置（不包含）的元素，截取的這些元素組成新的數組返回，原數組不變
concat（）將一個或多個數組組合到原數組中，組成新的數組返回
與push的區別
filter（）可以對數組元素進行過濾
逆戰
2. vue 裡面怎麼調用過濾器方法
在user-list組件中我們需要遍歷聯系人列表，filter_key用來傳給該組件，和搜索欄組件一樣，也用props接收一版下，並且在權裡面插入要過濾的內容，
filterBy是返回過濾後的數組，orderBy是排序，前者的使用方法是filterBy 一個key(欄位)，in xxx 就是指搜索欄位，這里需要注意的是in後面跟的必須是obj裡面的key，因為我們的需求是同時保證輸入漢字或者拼音都能查詢，所以in後面跟的是okr_owner和user.u_name(這是vue渲染的數據，我們展示該聯系人用的是裡面的u_name，okr_owner則為拼音)，下面附上數據結構。對於在搜索時如何去掉這些字母索引，我們只需要在通訊錄頁面中的<user-list>加入一個欄位，然後使用watch來監聽一下key_word即可。
3. vue 請問這個怎麼要它輸出數組中的一個，而不是全部，現在輸出的是全部
一、根據索引設置元素：
1、調用$set方法：
this.arr.$set(index, val);1
2、調用splice方法：
this.arr.splice(index, 1, val);
4. vue數組能存放10萬條數據嗎
能。vue數組是一款非常強大的數組，存儲能力非常強，是能夠存放10萬條數據的，vue能夠存儲多種數據，是一款非常好用的軟體。
5. 2.vue中遍歷數組的指令是什麼，過濾的方法怎麼寫
public static void main(String[] args){
String[] arr = {"a","b","c"};
for(int i = 0; i < arr.length; i++){
System.out.print(arr[i] + " ");
}
//或者
System.out.println(java.util.Arrays.sort(arr));
}
6. Vue2 中為什麼「數組名=[]」就能更新數組
vue的數組更新檢測規則：使用數組方法push、pop、shift、unshift、splice、sort、reverse才可以觸發視圖更新，其他方法修改數組將不會同步視圖
7. Vue3和Vue2響應式的區別
理解：Vue3.0中一個新的配置項，值為一個函數。
setup是所有 Composition API（組合API） 「 表演的舞台 」 。
組件中所用到的：數據、方法等等，均要配置在setup中。
setup函數的兩種返回值：
若返回一個對象，則對象中的屬性、方法, 在模板中均可以直接使用。（重點關注！）
若返回一個渲染函數：則可以自定義渲染內容。（了解）
注意點：
盡量不要與Vue2.x配置混用
Vue2.x配置（data、methos、computed...）中 可以訪問到 setup中的屬性、方法。
但在setup中 不能訪問到 Vue2.x配置（data、methos、computed...）。
如果有重名, setup優先。
setup不能是一個async函數，因為返回值不再是return的對象, 而是promise, 模板看不到return對象中的屬性。（後期也可以返回一個Promise實例，但需要Suspense和非同步組件的配合）
作用: 定義一個響應式的數據
語法: const xxx = ref(initValue)
創建一個包含響應式數據的 引用對象（reference對象，簡稱ref對象） 。
JS中操作數據： xxx.value
模板中讀取數據: 不需要.value，直接：<div>{{xxx}}</div>
備註：
接收的數據可以是：基本類型、也可以是對象類型。
基本類型的數據：響應式依然是靠Object.defineProperty()的get與set完成的。
對象類型的數據：內部 「 求助 」 了Vue3.0中的一個新函數—— reactive函數。
作用: 定義一個 對象類型 的響應式數據（基本類型不要用它，要用ref函數）
語法：const 代理對象= reactive(源對象)接收一個對象（或數組），返回一個 代理對象（Proxy的實例對象，簡稱proxy對象）
reactive定義的響應式數據是「深層次的」。
內部基於 ES6 的 Proxy 實現，通過代理對象操作源對象內部數據進行操作。
vue2.x的響應式
實現原理：
對象類型：通過Object.defineProperty()對屬性的讀取、修改進行攔截（數據劫持）。
數組類型：通過重寫更新數組的一系列方法來實現攔截。（對數組的變更方法進行了包裹）。
Object.defineProperty(data,'count', {
get() {},
set() {}
})
存在問題：
新增屬性、刪除屬性, 界面不會更新。
直接通過下標修改數組, 界面不會自動更新。
Vue3.0的響應式
實現原理:
通過Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等。
通過Reflect（反射）: 對源對象的屬性進行操作。
MDN文檔中描述的Proxy與Reflect：
Proxy： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
newProxy(data, {
// 攔截讀取屬性值
get(target,prop) {
returnReflect.get(target,prop)
},
// 攔截設置屬性值或添加新屬性
set(target,prop,value) {
returnReflect.set(target,prop,value)
},
// 攔截刪除屬性
deleteProperty(target,prop) {
returnReflect.deleteProperty(target,prop)
}
})
proxy.name='tom'
從定義數據角度對比：
ref用來定義： 基本類型數據 。
reactive用來定義： 對象（或數組）類型數據 。
備註：ref也可以用來定義 對象（或數組）類型數據 , 它內部會自動通過reactive轉為 代理對象 。
從原理角度對比：
ref通過Object.defineProperty()的get與set來實現響應式（數據劫持）。
reactive通過使用 Proxy 來實現響應式（數據劫持）, 並通過 Reflect 操作 源對象 內部的數據。
從使用角度對比：
ref定義的數據：操作數據 需要 .value，讀取數據時模板中直接讀取 不需要 .value。
reactive定義的數據：操作數據與讀取數據： 均不需要 .value。
setup執行的時機
在beforeCreate之前執行一次，this是undefined。
setup的參數
props：值為對象，包含：組件外部傳遞過來，且組件內部聲明接收了的屬性。
context：上下文對象
attrs: 值為對象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當於 this.$attrs。
slots: 收到的插槽內容, 相當於 this.$slots。
emit: 分發自定義事件的函數, 相當於 this.$emit。
8. vue2響應式原理總結
vue組件實例化時，會對data屬性深度遍歷（遇到數組或者對象）為每一個屬性添加數據劫持。數據劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。
在這個過程中會實例化一個Dep類。
1.在get攔截器里觸發dep實例的depend方法,進行依賴收集，實質是在dep的實例屬性sub數組中添加依賴這個屬性的watcher實例。
2.在set攔截器里觸發dep實例的notify方法，對收集到的所有依賴派發更新，（watcher的update方法）
vue組件實例化時會實例化一個渲染watcher,渲染watcher實例化過程會做兩件事情。
1.創建vnode,在這個過程中，訪問了data屬性，觸發了get方法，完成了依賴收集。
2.觸發了子組件的實例化，子組件實例化又會重復上述數據劫持的過程。
這個過程就是對組件樹的深度遍歷。
結合組件生命周期來看整個過程，父組件會先觸發created鉤子，子組件後觸發created鉤子。而子組件mouted鉤子會先執行，父組件的mouted鉤子後執行。
分步驟記憶
1、實現頁面不刷新的原理
2、頁面視圖刷新的原理
實現頁面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 運行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。
1.hash(哈希模式)，#符號後邊是瀏覽器行為，在改變的時候不對頁面進行刷新（重新請求URL）（監聽hashChange事件）
2.history模式，H5新增了pushState，replaceState連個新API,可以修改歷史記錄卻不會使瀏覽器刷新頁面。
視圖更新原理
其原理就是vue的響應式更新dom的原理，m => v
m是數據，也就是在vue-router install時在根組件（root vue component）添加了_route屬性，在匹配到對應路由後更新了_route屬性值，繼而觸發了該屬性值的渲染watcher,在繼而觸發dom更新。
兩種模式的不同
1.部署時，history模式需要服務端處理所有可能的路徑（例如配置nginx的配置文件），防止出現404。哈希模式則不需要。
2.URL表示不同。
v-model指令就是 v-bind:value 和 @input 的語法糖。
它即可以支持原生表單元素，也可以支持自定義組件
在自定義組件中其實際是這樣的：
它的實現通過自定義render函數, 緩存了 vnode
Vue 在更新 DOM 時是非同步執行的，只要偵聽到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據變更。
如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。在緩沖時會去除重復數據避免不必要的計算和 DOM 操作。
$nextTick(cb) 目的是在DOM 更新完成後傳入的回調函數再被調用。
9. vue中怎麼過濾掉幾百個數組裡面不需要的信息
幾百個數組刪除起來可能有點影響用戶體驗 如果不是非要刪除建議不要刪 如果刪除for循環 delete刪除
10. Vue向數組裡面添加欄位
1. 有時候我們會碰到這種情況：比如我們渲染一個table，從後端返回的數組裡面並沒有我們想要的欄位，如果讓後台幫忙加上的話，會增加冗餘欄位，這樣會增加後端的維護成本，並不可取。
2. 我們可以通過 this.$set 來增加一個欄位比如:
const lists = res.data // 後端返回數組
this.tableData = lists.map(i => {
this.$set(i, edit , false)
return i
})
3. 更詳細的可以去查看官方文檔， ps：Vue官網轉了好久打不開。。。