摘要：一的基礎(chǔ)知識實(shí)現(xiàn)雙向綁定原理中的設(shè)置屬性值獲取屬性值過程劫持并監(jiān)聽所有屬性發(fā)生變化，通知觀察者函數(shù)負(fù)責(zé)向觀察者列表添加對應(yīng)更新函數(shù)編譯解析初始化更新生命周期和中的數(shù)據(jù)和方法還沒初始化和初始化完成模板已經(jīng)在內(nèi)存編譯好了，尚未掛載到頁面頁面掛載

一、vue的基礎(chǔ)知識 vue實(shí)現(xiàn)雙向綁定原理

1、Object.defineProperty()中的set/get設(shè)置屬性值/獲取屬性值

2、過程

Observer劫持并監(jiān)聽所有屬性

發(fā)生變化，通知Dep觀察者（update函數(shù)）

Watcher負(fù)責(zé)向觀察者列表添加對應(yīng)更新函數(shù)

Compile編譯解析

初始化/更新

vue生命周期

beforeCreate

data和methods中的數(shù)據(jù)和方法還沒初始化

created

data和methods初始化完成

beforeMount

模板已經(jīng)在內(nèi)存編譯好了，尚未掛載到頁面

mounted

頁面掛載完成，可以操作DOM

beforeUpdate

頁面數(shù)據(jù)是舊的，data數(shù)據(jù)是新的，頁面和最新數(shù)據(jù)還沒同步

updated

頁面和data已經(jīng)保持最新

beforeDestory

進(jìn)入銷毀階段，data、methodes...還可用

destroyed

組件已經(jīng)完全銷毀，data、methods以及過濾器，指令不可用

vue組件通信

父子通信

父組件綁定屬性“：data-attr”數(shù)據(jù)

子組件在props接收駝峰式dataAttr數(shù)據(jù)

子與父通信

子組件$emit("to-parent",newMsg)綁定屬性傳輸數(shù)據(jù)

父組件綁定@to-parent="getChildren(e)"屬性接收數(shù)據(jù)

兄弟通信

在main.js建立一個Vue.prototype.bus事件總線（中間層）

在borther1，this.bus.$emit("屬性toborther2"，值)

在borther2接收，this.bus.$on("toborther2",function(val){ that.msg = val })

vue的虛擬DOM

虛擬DOM出現(xiàn)是為了減少頻繁大面積的重繪引發(fā)的性能問題

虛擬dom和真實(shí)dom的區(qū)別

1、虛擬dom不會排版與重繪 2、真實(shí)dom頻繁排版與重繪效率相當(dāng)?shù)? 3、虛擬dom進(jìn)行頻繁修改，然后一次性比較并修改真實(shí)dom中需要改的部分，最后并在真實(shí)dom中進(jìn)行排版與重繪，減少過多dom節(jié)點(diǎn)排版與重繪損耗 4、虛擬dom有效降低大面積的重繪與排版，因?yàn)樽罱K與真實(shí)dom比較差異，可以只渲染局部

DOM Diff

指的是通過Diff算法去比較虛擬DOM的變化

vue怎么更新節(jié)點(diǎn)

1、先根據(jù)真實(shí)DOM生成virtual DOM 2、當(dāng)virtual DOM某個節(jié)點(diǎn)的數(shù)據(jù)改變后會生成一個新的Vnode 3、Vnode和oldVnode作對比，發(fā)現(xiàn)有不一樣的就直接修改在真實(shí)的DOM，然后使oldVnode的值為Vnode

路由

全局路由攔截(路由守衛(wèi))

router.beforeEach(( to, from, next )=>{}) //跳轉(zhuǎn)前

to: 即將進(jìn)入的目標(biāo)（路由對象）

from:當(dāng)前導(dǎo)航正要離開的路由

next()進(jìn)行下一個鉤子，next(false)中斷當(dāng)前導(dǎo)航，如果此時URL改變，則會重置為from后的路由地址， next("/") next(path: "/")終止當(dāng)前導(dǎo)航，跳轉(zhuǎn)到一個不同的地址，next(error)如果參數(shù)為一個error實(shí)例，則會終止導(dǎo)航

beforeResolve(( to, from, next )=>{}) //跳轉(zhuǎn)成功

afterEach(( to, from, next )=>{}) //跳轉(zhuǎn)后

局部路由攔截

路由內(nèi)部鉤子： beforeEnter(( to, from, next )=>{})

組件內(nèi)部鉤子

beforeRouteEnter(( to, from, next )=>{}) //從另外的組件進(jìn)入該組件前觸發(fā)該鉤子

beforeRouteUpdate(( to, from, next )=>{}) //同一個組件，參數(shù)不一樣，不一樣數(shù)據(jù)

beforeRouteLeave(( to, from, next )=>{}) //該組件離開跳轉(zhuǎn)到另外的組件時觸發(fā)該鉤子

路由傳參

this.$router.push({ path: /Re/${id} })

this.$router.push({ name: "Re", params: { id: id } })

this.$router.push({ path: "/Re", query:{ id: id } })

vuex

state定義共享變量

mutations同步修改共享變量（更改state,提交mutation）

actions可以提交mutation,action中執(zhí)行store.commit

getter計算屬性

如何解決單頁面的SEO問題

prerender-spa-plugin

SSR

定義

服務(wù)端渲染，用戶請求網(wǎng)頁，都是后端先調(diào)用數(shù)據(jù)庫，獲得數(shù)據(jù)之后，將數(shù)據(jù)和頁面元素進(jìn)行拼接，組合成完整的html頁面，再直接返回給瀏覽器

優(yōu)勢

1、更好的SEO，由于搜索引擎爬蟲抓取工具可以查看渲染頁面

2、更快內(nèi)容到達(dá)時間，特別對于緩慢的網(wǎng)絡(luò)情況或緩慢的設(shè)備

劣勢

1、構(gòu)建設(shè)置和部署的更多要求

2、更多服務(wù)器端負(fù)載

Nuxt.js

二、微信小程序基礎(chǔ) 目錄

app.js

系統(tǒng)的方法處理文件，主要處理程序聲明周期的一些方法

app.json

路由地址、全局配置，導(dǎo)航頭顏色、名稱

app.wxss

全局界面樣式

project.config.json

控制小程序版本，appid

sitemap.json

用來配置小程序及其頁面是否允許被微信索引

pages

小程序各個頁面文件

components

組件

images

圖片

template

模板

生命周期

頁面生命周期

onLoad

監(jiān)聽頁面加載

onShow

監(jiān)聽頁面顯示

onReady

監(jiān)聽頁面初次渲染完成

onHide

監(jiān)聽頁面隱藏

onUnload

監(jiān)聽頁面卸載

app生命周期

onLaunch

監(jiān)聽小程序初始化，只觸發(fā)一次

onShow

監(jiān)聽小程序顯示

onHide

監(jiān)聽小程序隱藏

onError

錯誤監(jiān)聽函數(shù)

路由

wx.switchTab

跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面

wx.reLaunch

關(guān)閉所有頁面，打開應(yīng)用內(nèi)某個頁面

wx.redirectTo

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)某個頁面，不允許跳tabbar頁面

wx.navigateTo

保存當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)某個頁面，不能跳到tabbar頁面，最多十層頁面棧

wx.navigateBack

關(guān)閉當(dāng)前頁面，返回上一頁或多級頁面

頁面?zhèn)鬟f數(shù)據(jù)的方法

url參數(shù)傳遞

1、wx.navigateTo({ url: "../list/list?username=" + this.data.username }) 2、wx.redirectTo 3、wx.reLaunch

本地緩存

wx.setStorageSync("username",this.data.username)

全局變量

appjs里面app.globalData對象中新建屬性

基本原理

雙線程通信方式

view視圖層：渲染頁面結(jié)構(gòu)

1、初始化狀態(tài)

2、首次渲染狀態(tài)

3、持續(xù)渲染狀態(tài)

End

通過JSBridage通信

AppService邏輯層：用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用

1、初始化狀態(tài)：onLoad(只執(zhí)行一次)、onShow（每次切換都會執(zhí)行）

2、等待激活狀態(tài)：接收到“界面線程初始化完成”信號，講初始化數(shù)據(jù)發(fā)送到“界面線程”，等待界面線程完成初始渲染

3、激活狀態(tài)：首次渲染完成，調(diào)用onReady函數(shù)

4、后臺狀態(tài)：也能接收數(shù)據(jù)，局部渲染

End

虛擬DOM

1、js對象模擬DOM

2、比較兩個DOM樹

3、比較兩個DOM樹的差異

4、把差異應(yīng)用到真正的DOM樹上

數(shù)據(jù)請求封裝

在utils封裝wx.request請求

組件中引入應(yīng)用

提高應(yīng)用速度方法

提高頁面加載速度

用戶行為預(yù)測

減少默認(rèn)data的大小

組件化方案

雙向綁定

this.setData({})

bindinput綁定事件方法，監(jiān)聽變化

三、js基礎(chǔ)知識 原型、原型鏈

函數(shù)對象

所有函數(shù)prototype（顯式原型）

函數(shù)、數(shù)組、對象都擁有__proto__（隱式原型）

原型對象，擁有prototype屬性的對象，在定義函數(shù)時就被創(chuàng)建

構(gòu)造函數(shù)

構(gòu)造函數(shù)會擁有本身方法，也會擁有顯式原型的方法，即實(shí)例繼承構(gòu)造函數(shù)的方法

原型鏈（查找屬性，在__proto__中查找，通過__proto__形成原型鏈）

prototype

proto

constructor

繼承

含義

發(fā)生在對象與對象之間

方法

原型

構(gòu)造函數(shù)（子構(gòu)造函數(shù)prototype繼承父構(gòu)造函數(shù)的原型方法）

apply,call借調(diào)構(gòu)造函數(shù)

例：

    function Fn(name,age){                                 
        this.name = name;  
        this.age = 20;                                   
    }
    function Son(name,age,sex){       
        Fn.call(this,name,age);   
        this.sex = sex;                                                                             
    }
    function Son2(name,age,sex){      
        Fn.apply(this,arguments);
        this.sex = sex;                                                                            
    }   
    var  s1 = new Son("李四",20,“男”);
    console.log(s1);    //    son:{  name:"李四",age: 20,sex:"男" }       
    var  s1 = new Son2("張三",29,“女”);
    console.log(s2);   //son:{ name: "張三"，age:29,sex:"女"}     

                 

閉包

含義

就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)

作用

好處

1、保護(hù)函數(shù)內(nèi)的變量 安全，防止命名沖突

2、內(nèi)存維持一個變量，可以做緩存

3、匿名自執(zhí)行函數(shù)可以減少內(nèi)耗

壞處

1、增大內(nèi)耗，造成內(nèi)存泄漏

2、閉包跨域訪問，導(dǎo)致性能損失

跨域

含義

協(xié)議、域名、端口有一個不同就是跨域

解決跨域

1、CORS跨源通信：瀏覽器和服務(wù)器同時支持，瀏覽器IE不能低于IE10，前端正常ajax請求，需要服務(wù)器實(shí)現(xiàn)CORS接口，就可以實(shí)現(xiàn)跨域通信

2、JSONP：a、只能get請求，不能post b、dataType:"jsonp", jsonp: "jsoncallback" c、先在客戶端注冊一個callback,然后把callback名字傳給服務(wù)器，服務(wù)器生成json數(shù)據(jù)，然后以js語法方式生成function,function名字就是傳遞上來的參數(shù)jsonp.最后將json數(shù)據(jù)直接入?yún)⒌姆绞剑胖玫絝unction,生成一段js語法文檔，返回給客戶端

3、window.name：不同頁面/不同域名 仍然存在

4、document.domain將兩個不同頁面設(shè)置成相同練=的域名，設(shè)置成更高的父域

5、location.hash子框架具有修改父框架src的hash值

6、window.postMessage：HTML5的api允許兩個窗口跨域發(fā)送信息，解決dom跨域通用方法

構(gòu)造函數(shù)

任意一個普通函數(shù)用于創(chuàng)建一類對象時，稱為構(gòu)造函數(shù)或構(gòu)造器

作用域鏈

作用域：變量和函數(shù)可訪問范圍，或者說變量或函數(shù)起作用的區(qū)域

作用域鏈：是一個對象列表，用來檢索各個變量對象中的變量和函數(shù)，這樣可以保證執(zhí)行環(huán)境有權(quán)訪問那些變量和函數(shù)

cal、 apply、bind的區(qū)別

相同：改變this指向，作用一樣

不同：接收的參數(shù)不一樣，call(this,a,b,c),apply(this,arguments)立即執(zhí)行，bind是返回對應(yīng)函數(shù)，稍后執(zhí)行，需要手動執(zhí)行

null和undefined的區(qū)別

null是空值，類型為object

undefined表示“缺少值”，未定義

事件冒泡、事件捕獲和事件委托

事件冒泡

含義

自下而上（自內(nèi)而外）的觸發(fā)事件

如何防止事件冒泡

jq的e.stopPropagation

事件捕獲

含義

自上而下（自外而內(nèi)）的觸發(fā)事件

事件委托

含義

只指定一個事件處理程序，將原本子元素上的處理程序委托給父元素執(zhí)行

為什么

新增子元素，不需添加事件，因?yàn)橐呀?jīng)綁定父元素

怎么做

$("parent").on("click","li",function(e){ })

原生方法

賦值方法

pop和push

pop從尾部刪除1個元素

push增加若干元素

shift和unshift

shift頭部刪除1個元素

unshift頭部增加若干元素

splice

含義

向數(shù)組中添加/刪除項(xiàng)目，并返回被刪除的項(xiàng)目

參數(shù)

index:添加或刪除項(xiàng)目的位置

howmany:要刪除的項(xiàng)目的數(shù)量

item:向數(shù)組添加的新項(xiàng)目

reverse

將數(shù)組中元素順序反轉(zhuǎn)

sort

將數(shù)組元素進(jìn)行排序

訪問方法

concat

用于連接兩個或多個數(shù)組，返回新數(shù)組

join

用于把數(shù)組中的所有元素放入一個字符串，即指定分隔符進(jìn)行分隔

slice

通過索引位置獲取新的數(shù)組，不會修改數(shù)組，只會返回新的子數(shù)組

toString

將其轉(zhuǎn)換為字符串

indexOf和lastIndexOf

indexOf返回指定字符串首次出現(xiàn)的位置（從左往右）

lastIndexOf返回指定字符串首次出現(xiàn)的位置（從右往左

迭代方法

forEach

遍歷

map

遍歷

filter

過濾器，把數(shù)組的某些元素過濾掉，然后返回剩下的元素

every和some

every從迭代開始，一旦有一個不符合條件的則停止

some一直在找符合條件的值，找到就停止

reduce和reduceRight

reduce升序從左往右（累加器）

reduceRight降序從右往左（累加）

數(shù)據(jù)類型

Null

Number

String

Boolen

Undefined

js設(shè)計模式

模塊模式

構(gòu)造函數(shù)模式

混合模式

工廠模式

單例模式

發(fā)布-訂閱模式

js的占位顯示色塊（有點(diǎn)預(yù)加載的意思） js的遍歷

for

耗時23-24ms,break,continue,return支持

for...in

耗時4858ms

for...of

耗時480-485ms

forEach

耗時209ms，break,continue,return不支持使用

性能測試工具 四、ES6的基本語法 var、let和const賦值

var 聲明變量，可有變量提升作用，函數(shù)級作用域

let 聲明變量，塊級作用域

const聲明常量

解構(gòu)

含義

允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值

解構(gòu)賦值的類型

數(shù)組

[a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4

對象

{foo,bar} = {foo: "aaa",bar: "bbb"} //foo="aaa", bar = "bbb"

字符串

[a,b,c,d,e] = "hello" //a=h,b=e,c=l,d=l,e=o

數(shù)值和布爾值

let {toString: s} = 123; //s === Number.prototype.toString;

函數(shù)參數(shù)

function add([x, y]){ return x + y; }; add([1,2]); //3

箭頭函數(shù)

this指向外層

使用callapplybind，this指的是綁定的對象

Set去重

Set是新的數(shù)據(jù)結(jié)構(gòu)，成員的值是唯一的

[...set]

Array.from(new Set(array)) Set結(jié)構(gòu)數(shù)組化

新增數(shù)據(jù)類型Symbol

含義

表示獨(dú)一無二的值

Symbol值通過Symbol函數(shù)生成

用途

1、用作屬性名

``模板字符串 怎么實(shí)現(xiàn)繼承

Class繼承

模塊化 promise

含義

對象構(gòu)造函數(shù)

resolve表示成功回調(diào)

reject表示失敗回調(diào)

方法

promise.all

要多個異步請求一起成功才返回成功

promise.race

只返回第一個執(zhí)行完成的異步操作結(jié)果

async/await

含義

在方法外層必須 async異步函數(shù)

await必須執(zhí)行完異步操作，才會執(zhí)行下一步

用法

內(nèi)置執(zhí)行器

返回Promise

五、html與css基礎(chǔ)知識 塊級元素和內(nèi)聯(lián)元素

塊級元素

div/h1/li/ul/p/th/td

內(nèi)聯(lián)元素

a/b/input/span/i/img

如何實(shí)現(xiàn)水平垂直居中

1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);

2、position: absolute; top bottom left right:0; margin:auto;

3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //寬的一半

display:none;和visibility:hidden;區(qū)別

display//不占位隱藏

visibility//占位隱藏

清除浮動

1、添加子元素偽元素選擇器

2、overflow: hidden;第一個盒子設(shè)置margin-bottom,第二個盒子設(shè)置margin-top

css屬性繼承

文本相關(guān)屬性：font-family / font-size / font-style / line-height / text-align / color

列表相關(guān)屬性：list-style

表格相關(guān)屬性：border-spacing

其他屬性：cursor / visibility

static/relative/absolute/fixed的區(qū)別

1、static默認(rèn)值，不設(shè)置屬性，會按正常的文檔流

2、relative相對定位，相對它本身的位置

3、absolute絕對定位，可能是相對父元素的relative/absolute定位，也有可能是相對body定位

4、fixed定位對象是根據(jù)瀏覽器窗口進(jìn)行定位

link和@import區(qū)別

link是html標(biāo)簽，頁面加載時，link會同時被加載，沒兼容性，樣式權(quán)重高

@import是css加載，會等頁面加載后才加載，IE5以上才能識別，比link低

BFC

含義

塊級格式化上下文，塊級元素的布局渲染規(guī)范

創(chuàng)建BFC

float不是none

position值不是static/relative

display值是inline-block,table-cell,flex,table-caption,inline-flex

overflow值不是visible

IE6的bug

圖片有邊框bug

解決：給圖片border:0;或者border:none;

雙倍邊距

解決：display:inline;

默認(rèn)高度

解決：font-size:0;或者overflow:hidden;

按鈕元素默認(rèn)大小不一致

解決：a標(biāo)簽?zāi)M

六、瀏覽器兼容性 不同瀏覽器margin和padding不同

解決：清除標(biāo)簽?zāi)J(rèn)樣式 *{ margin: 0; padding: 0; }

IE6雙邊距問題

解決：display:inline;

標(biāo)簽高度設(shè)置小于10px,在IE6和IE7會超出自己設(shè)置的高度

解決：overflow:hidden;或line-height小于高

圖片默認(rèn)有間距

解決：float布局

IE9不能使用opacity

解決：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

邊距重疊問題

解決：給子元素增加父元素，父元素設(shè)置overflow:hidden;

cursor: hand在safari上不支持

解決：統(tǒng)一使用cursor:pointer;

七、HTTP的狀態(tài)及請求 常見狀態(tài)碼

200 成功，一切正常

302 重定向

304未修改

403服務(wù)器禁止訪問

404找不到請求的資源

500服務(wù)器錯誤

http流程

1、建立連接

2、客戶端發(fā)送請求到服務(wù)器

3、服務(wù)器返回相應(yīng)信息：狀態(tài)行、協(xié)議版本好、成功或錯誤代碼

4、客戶端接收服務(wù)器返回信息顯示在用戶顯示屏，然后斷開鏈接

http方法

GET獲取數(shù)據(jù)

POST傳輸數(shù)據(jù)

PUT傳輸文件

HEAD獲取報文首部

DELET刪除文件

OPTIONS查詢相應(yīng)URL支持的HTTP方法

八、項(xiàng)目遇到的問題 vue

1、兼容IE10：組件babel-polyfill

2、打包后線上資源圖片路徑地址不對：修改cofig/index.js配置文件公共路徑

微信小程序

1、富文本html在小程序不兼容：用wxParse組件編譯成功小程序view標(biāo)簽

html、css

1、鍵盤擋住輸入框擋住：css控制滾動頁面

Copyright ? KEN卓越