技術(shù)
【一】css3: 相比css2新增的特性
. box-shadow text-shadow
. 背景的一些操作秒裕，多背景圖 背景鋪設(shè)起點(diǎn)
. border-radius
. box-sizing:border-box
. animation keyframe
. transition
. translate
【二】html5:相比 html4新增的
. 音視頻- 兼容 source 引入各個格式的資源
. canvas 畫布
. 本地存儲 local session (大小 5M，區(qū)別塌衰，iframe擴(kuò)容) cookie （4K，區(qū)別-數(shù)據(jù)通信每次都會帶蛉拙，所以盡量存必要短小信息卑硫，http-only:后臺有權(quán)限直接鎖定防止js寫操作；異域操作cookie-根域設(shè)置成相同 document.domain = "baidu.com"）
. 新的語義化元素辕近，比如：<nav>, <header>, <footer> <section>
. 獲得用戶的當(dāng)前位置-etCurrentPosition()
. 規(guī)定元素內(nèi)容是否是可編輯的-全局屬性，"contenteditable"
. web worker 是運(yùn)行在后臺的 JavaScript匿垄，獨(dú)立于其他腳本移宅，不會影響頁面的性能
. 應(yīng)用程序緩存-Application Cache-如需啟用應(yīng)用程序緩存，請?jiān)谖臋n的 <html> 標(biāo)簽中包含 manifest 屬性.三個優(yōu)勢：
離線瀏覽 - 用戶可在應(yīng)用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源椿疗。
. 豐富了表單元素類型
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
【三】原生js典型問題:
. 變量聲明提升
if(true) {
console.log(a)//TDZ漏峰，俗稱臨時死區(qū)，用來描述變量不提升的現(xiàn)象
let a = 1
}
. 作用域：
管理變量的届榄，分為局部作用域和全局作用域浅乔，變量定義在函數(shù)中，就稱作是局部變量痒蓬，只在當(dāng)前函數(shù)內(nèi)可以訪問的到童擎。（ES5中 沒有塊級作用域的說法，就是 for if 等大括號就能封閉作用域管理住變量）
作用域鏈：
作用域鏈就由一些列作用域嵌套形成攻晒，查詢方向只能是由內(nèi)到外單項(xiàng)走，比如在當(dāng)前作用域下訪問變量name,首先會在當(dāng)前域下找班挖，沒有就到上一層鲁捏，直到找到最頂層的window全局作用域。
. 對象的3個特性：封裝萧芙，繼承给梅，多態(tài)。
封裝：封裝了細(xì)節(jié)和復(fù)雜度双揪。
繼承：復(fù)用动羽。
多態(tài)：同一種屬性方法，調(diào)用不同對象的渔期，表現(xiàn)執(zhí)行不一樣运吓。javascript的變量在運(yùn)行期是可變的渴邦，一個js對象既可以表示既可以表示Duck類型的對象，又可以表示Chicken類型的對象拘哨，這意味著JavaScript對象的多態(tài)性是與生俱來的谋梭。
ex:本人家里養(yǎng)了一只雞，一只鴨倦青。當(dāng)主人向他們發(fā)出‘叫’的命令時瓮床。鴨子會嘎嘎的叫，而雞會咯咯的叫
多態(tài)的代碼示例
var makeSound = function(animal) {
animal.sound();
}
var Duck = function(){}
Duck.prototype.sound = function() {
console.log('嘎嘎嘎')
}
var Chiken = function() {};
Chiken.prototype.sound = function() {
console.log('咯咯咯')
}
makeSound(new Chicken());
makeSound(new Duck());
. 原型鏈：
是一種鏈表的結(jié)構(gòu)产镐。----產(chǎn)生原理：只要是實(shí)例對象就會有構(gòu)造函數(shù)隘庄，構(gòu)造函數(shù)就會有對應(yīng)的原型對象，原型對象又會有構(gòu)造函數(shù)癣亚，層層尋找峭沦，直到最頂層是object.prototype對應(yīng)的值是--null
image.png
.原型的本質(zhì)
一個對象實(shí)例化后必然產(chǎn)生一個默認(rèn)的原型對象，有一個constructor屬性指向它對應(yīng)的構(gòu)造函數(shù)逃糟，但是一般吼鱼，這個默認(rèn)原型里什么都沒有，所以我們要改寫原型庫绰咽，這樣你在重寫的原型不會有constructor指向了菇肃，所以要手動修復(fù)指向問題，即只要你寫原型庫了取募，第一句就是constructor=對應(yīng)的構(gòu)造函數(shù)琐谤。
. 繼承本質(zhì)
當(dāng)前對象想用（拷貝或是指向的方式）別人的屬性和方法
. this 指的什么
當(dāng)前運(yùn)行時的環(huán)境
分幾種情況：
全局下，this指的是window
函數(shù)中玩敏，this指的是函數(shù)的調(diào)用者 ex:Person.say(this 指的是Person)
dom事件中斗忌，this指的是當(dāng)前操作的dom 對象（元素） ex： navDom.onclick(function(){this 就是navDom})
. 跨域
瀏覽器為了安全出的一套同源策略機(jī)制，也就是 前端的js 代碼 要和后臺接口來自同一個域下旺聚，否則默認(rèn)不安全织阳，請求的接口數(shù)據(jù)不讓用。
解決：常用的 也是項(xiàng)目中用到的 CORS 方式 -> 前后臺分別配置下即可砰粹，后臺具體字段名字： header("Access-Control-Allow-Origin:*"); 前端：withCredentials：true 即可通信唧躲。
. call apply 作用
可以實(shí)現(xiàn)借用，也即是繼承到別人的工具方法碱璃。區(qū)別就是傳參形式不同
【四】 reg正則
var pattern = / reg /
認(rèn)識基本的即可
[] 任意一個 ex: [0-9] 從0 到9 中的任意一個
- 范圍 ex: 0-9 從0到9
* 出現(xiàn)0次或是多次
+ 出現(xiàn)1次或是多次
() 分組弄痹，也就是隔離作用，和我代碼里作用一致的
| 或 ex: x|y 匹配x或y
{} 出現(xiàn)的次數(shù)范圍 ex: {n} 精確匹配n次 ; {n,} 匹配n次以上; {n,m} 匹配n-m次
\w 等于[a-zA-Z0-9]
\W 等于[^a-zA-Z0-9]
\d 任何數(shù)字,等價于[0-9]
\D 除了數(shù)字之外的任何字符,等價于[^0-9]
^ 寫的位置不同含義不一樣嵌器，放到正則第一層 表示以什么開頭肛真，放到[] 里表示 不匹配這個集合中的任何一個字符
image.png
【五】es6使用：
- const和let的異同點(diǎn)
相同點(diǎn)：const和let都是在當(dāng)前塊內(nèi)有效，執(zhí)行到塊外會被銷毀爽航，也不存在變量提升（TDZ）蚓让，不能重復(fù)聲明乾忱。
不同點(diǎn)：const不能再賦值，let聲明的變量可以重復(fù)賦值凭疮。
- 最出名的一道面試題：循環(huán)中定時器閉包的考題
for(var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i) //5, 5, 5, 5, 5
}, 0)
}
- 箭頭函數(shù)
箭頭函數(shù)中this的使用跟普通函數(shù)也不一樣饭耳，在JavaScript的普通函數(shù)中，都會有一個自己的this值执解，主要分為：
普通函數(shù)：
1寞肖、函數(shù)作為全局函數(shù)被調(diào)用時，this指向全局對象
2衰腌、函數(shù)作為對象中的方法被調(diào)用時新蟆，this指向該對象
3、函數(shù)作為構(gòu)造函數(shù)的時候右蕊，this指向構(gòu)造函數(shù)new出來的新對象
4琼稻、還可以通過call，apply饶囚，bind改變this的指向
箭頭函數(shù)：
1帕翻、箭頭函數(shù)沒有this，函數(shù)內(nèi)部的this來自于父級最近的非箭頭函數(shù)萝风，并且不能改變this的指向嘀掸。
2、箭頭函數(shù)沒有super
3规惰、箭頭函數(shù)沒有arguments
4睬塌、箭頭函數(shù)沒有new.target綁定。
5歇万、不能使用new
6揩晴、沒有原型
7、不支持重復(fù)的命名參數(shù)贪磺。
- Object.assign()方法
用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象硫兰。它將返回目標(biāo)對象。
- arr 豐富了好多api
forEach filter map
- symbol
ES6 以前缘挽，我們知道5種基本數(shù)據(jù)類型分別是Undefined瞄崇，Null，Boolean壕曼，Number以及String，然后加上一種引用類型Object構(gòu)成了JavaScript中所有的數(shù)據(jù)類型等浊，但是ES6出來之后腮郊，新增了一種數(shù)據(jù)類型，名叫symbol筹燕，像它的名字表露的一樣轧飞，意味著獨(dú)一無二衅鹿，意思是每個 Symbol類型都是獨(dú)一無二的，不與其它 Symbol 重復(fù)过咬。
可以通過調(diào)用 Symbol() 方法將創(chuàng)建一個新的 Symbol 類型的值大渤，這個值獨(dú)一無二，不與任何值相等掸绞。
- 模板字符串
`${var}const` 等同 ：var + 'const'
promise ：
解決的問題：多層異步回調(diào)嵌套問題泵三。
實(shí)際應(yīng)用：
a接口依賴b接口的數(shù)據(jù)先回來。
能看懂：
image.png
結(jié)果：start p1 end undefined p2 2 setTimeout
知識點(diǎn)：
1.代碼依次從上到下
2.new Promise 這一步是同步的衔掸，then才是要等待的烫幕。
3.res 里沒傳遞東西出去，then里也就拿不到東西
4. setTimeOut js 底層編譯器默認(rèn)處理就是放到所有代碼之后執(zhí)行敞映。
【六】 arr -api
一较曼、concat()
concat() 方法用于連接兩個或多個數(shù)組。該方法不會改變現(xiàn)有的數(shù)組振愿，僅會返回被連接數(shù)組的一個副本捷犹。
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1); //[1, 2, 3]
console.log(arr3); //[1, 2, 3, 4, 5]
二、join()
join() 方法用于把數(shù)組中的所有元素放入一個字符串冕末。元素是通過指定的分隔符進(jìn)行分隔的萍歉，默認(rèn)使用','號分割，不改變原數(shù)組栓霜。
var arr = [2,3,4];
console.log(arr.join()); //2,3,4
console.log(arr); //[2, 3, 4]
七翠桦、slice()
返回一個新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素胳蛮。返回選定的元素销凑，該方法不會修改原數(shù)組。
var arr = [2,3,4,5];
console.log(arr.slice(1,3)); //[3,4]
console.log(arr); //[2,3,4,5]
八仅炊、splice()
splice() 方法可刪除從 index 處開始的零個或多個元素斗幼，并且用參數(shù)列表中聲明的一個或多個值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素抚垄，則返回的是含有被刪除的元素的數(shù)組蜕窿。splice() 方法會直接對數(shù)組進(jìn)行修改。
var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a); // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3)); //[6, 7]
console.log(b); //[5, 3, 8]
十呆馁、sort 排序
按照 Unicode code 位置排序桐经，默認(rèn)升序
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]
十一、reverse()
reverse() 方法用于顛倒數(shù)組中元素的順序浙滤。返回的是顛倒后的數(shù)組阴挣，會改變原數(shù)組。
var arr = [2,3,4];
console.log(arr.reverse()); //[4, 3, 2]
console.log(arr); //[4, 3, 2]
十二纺腊、indexOf 和 lastIndexOf
都接受兩個參數(shù)：查找的值畔咧、查找起始位置
不存在茎芭，返回 -1 ；存在誓沸，返回位置梅桩。indexOf 是從前往后查找， lastIndexOf 是從后往前查找拜隧。
indexOf
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
if (a.indexOf(7) === -1) {
// element doesn't exist in array
}
十五宿百、filter
對數(shù)組的每一項(xiàng)都運(yùn)行給定的函數(shù)，返回 結(jié)果為 ture 的項(xiàng)組成的數(shù)組
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
十六虹蓄、map
對數(shù)組的每一項(xiàng)都運(yùn)行給定的函數(shù)犀呼，返回每次函數(shù)調(diào)用的結(jié)果組成一個新數(shù)組
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
十七、forEach 數(shù)組遍歷
const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
copy.push(item)
});
【七】string 常用api
- 提取字符串中兩個指定的索引號之間的字符薇组。
stringObject.substring(start,stop)
- 提取字符串的片斷外臂，并在新的字符串中返回被提取的部分。
stringObject.slice(start,end);和 substring 很像律胀，都是傳遞起終點(diǎn)索引宋光，知識slice可以傳遞負(fù)數(shù)，從字符串末尾算起
- 從起始索引號提取字符串中指定數(shù)目的字符炭菌。
stringObject.substr(start,length)罪佳。
- 把字符串分割為字符串?dāng)?shù)組。
str.split(' , ')
- 連接字符串黑低。
str.concat('afasd')
- match() 方法可在字符串內(nèi)檢索指定的值赘艳，或找到一個或多個正則表達(dá)式的匹配。該方法類似 indexOf() 和 lastIndexOf()克握，但是它返回指定的值蕾管，而不是字符串的位置。
var str="1 abc 2 def 3"
console.log(str.match(/\d+/g))//123
- replace() 方法用于在字符串中用一些字符替換另一些字符菩暗，或替換一個與正則表達(dá)式匹配的子串掰曾。
var str="abc Def!"
console.log(str.replace(/abc/, "CBA"))//CBA Def!
【八】 obj 幾個關(guān)鍵api
1.Object.defineProperty(obj, prop, descriptor) 給對象添加一個屬性并指定該屬性的配置。
//Object 要在其定義屬性的對象
// prop 要定義或修改的屬性
// des 將被定義或修改的屬性描述符
Object.defineProperty(data, key, {
enumerable: true, // 可被枚舉
configurable: false, // 不能再define
get: function () {
return val
},
set: function (newVal) {
val = newVal
}
})
2.obj.hasOwnProperty('prop') 判斷 x 對象里是否有 y 屬性
3.Object.keys(obj)方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組停团，數(shù)組中屬性名的排列順序和使用[`for...in`]循環(huán)遍歷該對象時返回的順序一致 旷坦。如果對象的鍵-值都不可枚舉，那么將返回由鍵組成的數(shù)組
. dom相關(guān)：獲取佑稠，插入秒梅，刪除
. css樣式通過js api 操作：讀取getComputedStyle(dom), 設(shè)置：style
【九】 vue:
. mvvm
m:model
v:view
vm: control 協(xié)調(diào)m v 二者關(guān)系，也就是算法部分（執(zhí)行邏輯）
. 雙向數(shù)據(jù)綁定
采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式舌胶，通過Object.defineProperty（）來劫持各個屬性的setter番电，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者辆琅，觸發(fā)相應(yīng)監(jiān)聽回調(diào)漱办。當(dāng)把一個普通 Javascript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時，Vue 將遍歷它的屬性婉烟，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter娩井。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴似袁，在屬性被訪問和修改時通知變化洞辣。
vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口，整合Observer昙衅，Compile和Watcher三者扬霜，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}）而涉，最終利用watcher搭起observer和Compile之間的通信橋梁著瓶，達(dá)到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果啼县。
js 實(shí)現(xiàn)最簡單的雙綁定：
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
. computed watch data . ￥set .sync
computed :關(guān)聯(lián)其他屬性的 材原，一旦被關(guān)聯(lián)的屬性發(fā)生變化，這個結(jié)果也跟著變季眷，而且不涉及緩存余蟹，每次讀取都會重新計(jì)算執(zhí)行一次
watch ：和 computed 很像 ，區(qū)別是：computed 必須有返回值子刮，watch 不必威酒，可以只是一個執(zhí)行過程
data ：聲明用于雙向綁定的數(shù)據(jù)屬性
$set ：data中沒有聲明，后續(xù)想插入一條 具有雙向綁定特質(zhì)的 數(shù)據(jù)屬性
sync ：用于組件間 此屬性在任何父或是子組件中發(fā)生了變化都會同步更新挺峡，也就是和 組件內(nèi)部的 data 中聲明的屬性是一個道理
. 生命周期
從開始創(chuàng)建葵孤、初始化數(shù)據(jù)、編譯模板沙郭、掛載Dom→渲染佛呻、更新→渲染、銷毀等一系列過程病线，稱之為 Vue 的生命周期
一共：10個
常用的：
- created： （創(chuàng)建后）完成數(shù)據(jù)觀測吓著，屬性和方法的運(yùn)算，初始化事件; 常常在這里拿數(shù)據(jù)
- beforeMount（載入前）編譯模板送挑，把data里面的數(shù)據(jù)和模板生成html绑莺。注意此時還沒有掛載html到頁面上。
- mounted：(載入后）dom 加載上來了惕耕，等同 dom ready onlod纺裁。可以做一些dom 的初始化操作
- updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時欺缘，組件DOM已經(jīng)更新栋豫，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下谚殊，應(yīng)該避免在此期間更改狀態(tài)丧鸯，因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用嫩絮。
. 懶加載
. 動態(tài)組件渲染
. mixins的特性
. Virtual DOM
. vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)丛肢，beforeEach，afterEach等剿干，一般用于頁面title的修改蜂怎。一些需要登錄才能調(diào)整頁面的重定向功能。
beforeEach主要有3個參數(shù)to置尔，from杠步，next：
to：route即將進(jìn)入的目標(biāo)路由對象，
from：route當(dāng)前導(dǎo)航正要離開的路由
next：function一定要調(diào)用該方法resolve這個鉤子撰洗。執(zhí)行效果依賴next方法的調(diào)用參數(shù)篮愉。可以控制網(wǎng)頁的跳轉(zhuǎn)差导。
. 組件通信 vuex prop $emit
1.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);實(shí)現(xiàn)：在子中props中先聲明好屬性名字试躏，在父組件中調(diào)用子組件時候，在其身上 給這個聲明好的屬性名字賦上值设褐。等同颠蕴，兒子里挖好坑，父親調(diào)用時填好助析。
子組件傳給父組件：$emit方法傳遞參數(shù)
2.非父子組件間的數(shù)據(jù)傳遞犀被，兄弟組件傳值
eventBus，就是創(chuàng)建一個事件中心外冀，相當(dāng)于中轉(zhuǎn)站寡键，可以用它來傳遞事件和接收事件。項(xiàng)目比較小時雪隧，用這個比較合適西轩。大的用vuex
. vuex是什么？怎么使用脑沿？哪種功能場景使用它藕畔？
只用來讀取的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations庄拇，這是個同步的事物注服； 異步邏輯應(yīng)該封裝在action中,view 層通過 store.dispath 來分發(fā) action韭邓。。
在main.js引入store溶弟，注入女淑。新建了一個目錄store，….. export 可很。
場景有：單頁應(yīng)用中诗力，組件之間的狀態(tài)、音樂播放我抠、登錄狀態(tài)、加入購物車
. 路由模式：hash history
hash：hash雖然在URL中袜茧，但不被包括在HTTP請求中菜拓；用來指導(dǎo)瀏覽器動作，
history:此模式下笛厦，首次頁面上來纳鼎，不會請求后臺頁面路徑，怕刷新裳凸，二次刷贱鄙，會請求后臺，由于后臺此路徑下沒有對應(yīng)資源 直接404;處理：前端的 URL 必須和實(shí)際向后端發(fā)起請求的 URL 一致姨谷，如 [http://www.xxx.com/items/id](http://www.xxx.com/items/id)逗宁。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤梦湘。
. keep-alive
是 Vue 內(nèi)置的一個組件瞎颗，可以使被包含的組件保留狀態(tài)，或避免重新渲染捌议。
. css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫入scoped即可 例如：<style scoped></style>
. v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染哼拔，做dom樹的增刪操作，耗性能瓣颅，v-show是display的block或none倦逐；
. $route和$router的區(qū)別
答：$route是“路由信息對象”，包括path宫补，params檬姥，hash，query守谓，fullPath穿铆，matched，name等路由信息參數(shù)斋荞。而$router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法荞雏，鉤子函數(shù)等。
. vue.js的兩個核心是什么？
答：數(shù)據(jù)驅(qū)動凤优、組件系統(tǒng)
. vue幾種常用的指令
答：v-for 悦陋、 v-if 、v-bind筑辨、v-on俺驶、v-show、v-else
. vue常用的修飾符棍辕？
答：.prevent: 提交事件不再重載頁面暮现；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)楚昭；.capture: 事件偵聽栖袋，事件發(fā)生的時候會調(diào)用
. v-on 可以綁定多個方法嗎？
答：可以
. vue中 key 值的作用抚太？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時塘幅，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變尿贫，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序电媳， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素庆亡。key的作用主要是為了高效的更新虛擬DOM匾乓。
. 什么是vue的計(jì)算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護(hù)身冀，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理钝尸，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式搂根。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰珍促；②依賴于數(shù)據(jù)，數(shù)據(jù)更新剩愧，處理結(jié)果自動更新猪叙；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時仁卷，直接寫計(jì)算屬性名即可穴翩；⑤常用的是getter方法，獲取數(shù)據(jù)锦积，也可以使用set方法改變數(shù)據(jù)芒帕；⑥相較于methods，不管依賴的數(shù)據(jù)變不變丰介，methods都會重新計(jì)算背蟆，但是依賴數(shù)據(jù)不變的時候computed從緩存中獲取鉴分，不會重新計(jì)算。
angular:
. 臟值檢測
. mvc
. vue angular異同：
1.與AngularJS的區(qū)別
相同點(diǎn)：
都支持指令：內(nèi)置指令和自定義指令带膀；都支持過濾器：內(nèi)置過濾器和自定義過濾器志珍；都支持雙向數(shù)據(jù)綁定；都不支持低端瀏覽器垛叨。
不同點(diǎn)：
AngularJS的學(xué)習(xí)成本高伦糯，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單嗽元、直觀敛纲；在性能上，AngularJS依賴對數(shù)據(jù)做臟檢查还棱，所以Watcher越多越慢载慈；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的珍手。
【十】 jq：
js => jq api 對應(yīng)關(guān)系:
設(shè)置樣式：
style --->css
獲取dom：
getEelementByX/ querySelect/All --->$('css選擇器')
創(chuàng)建dom:
var tag = $('<p>我是添加的結(jié)點(diǎn)</p>') ---> var tag = createEelement('p');tag.innerText = "我是添加的節(jié)點(diǎn)"
插入dom:
appendChild ---> append
類名賦值：
className ---> addClass('cur')
ex:$(this).addClass('cur').siblings().removeClass('cur');
dom內(nèi)部內(nèi)容：
innerHtml--->html()
innerText--->text()
表單元素的值：
value ---> val('')
請求：
xhr對象 --->ajax({});
jq:1.9以下， IE所有版本都支撐辞做，1.9以上 IE9+
jq插件：$.fn.extend, 插件掛在jq 對象的共享庫上琳要，任何jq的實(shí)例都可以調(diào)用到 $.extend 插件直接掛在jq 對象本身，也就是工具方法或是叫靜態(tài)方法
image.png
其他
【一】看過的書：
. js高程：對原生js知識點(diǎn)解讀的非常到位易懂秤茅。
. 網(wǎng)絡(luò)層：圖解HTTP(上野宣)
. js設(shè)計(jì)模式與開發(fā)實(shí)戰(zhàn)：曾探-騰訊的 TODO(了解幾種設(shè)計(jì)模式)
. nodejs:深入淺出nodeJs TODO（自己的一些小實(shí)踐）
【二】網(wǎng)站：
. 掘金
. segmentFault
. 簡書（主要自己會寫點(diǎn)東西稚补，有些寫的認(rèn)真，有些單純自己記錄下）
. 有空看看阮一峰的博客框喳，講的很細(xì)致系統(tǒng)课幕。
. 谷歌的developers文檔啥的
【三】瀏覽器調(diào)試工具
.
image.png
【四】js 擴(kuò)充
.混入式繼承，空對象通過遍歷另外一個對象的屬性賦值五垮，拿過來進(jìn)行繼承乍惊。
[圖片上傳中...(image.png-9b7a9c-1561967598318-0)]
.
image.png
. instanceof
可以檢測某個實(shí)例是不是某個對象的實(shí)例。--即可以檢測數(shù)據(jù)類型是不是對象Object放仗。
image.png
歡迎大家補(bǔ)充
