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

一、vue的基礎知識 vue實現雙向綁定原理

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

2、過程

Observer劫持并監聽所有屬性

發生變化，通知Dep觀察者（update函數）

Watcher負責向觀察者列表添加對應更新函數

Compile編譯解析

初始化/更新

vue生命周期

beforeCreate

data和methods中的數據和方法還沒初始化

created

data和methods初始化完成

beforeMount

模板已經在內存編譯好了，尚未掛載到頁面

mounted

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

beforeUpdate

頁面數據是舊的，data數據是新的，頁面和最新數據還沒同步

updated

頁面和data已經保持最新

beforeDestory

進入銷毀階段，data、methodes...還可用

destroyed

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

vue組件通信

父子通信

父組件綁定屬性“：data-attr”數據

子組件在props接收駝峰式dataAttr數據

子與父通信

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

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

兄弟通信

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

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

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

vue的虛擬DOM

虛擬DOM出現是為了減少頻繁大面積的重繪引發的性能問題

虛擬dom和真實dom的區別

1、虛擬dom不會排版與重繪 2、真實dom頻繁排版與重繪效率相當低 3、虛擬dom進行頻繁修改，然后一次性比較并修改真實dom中需要改的部分，最后并在真實dom中進行排版與重繪，減少過多dom節點排版與重繪損耗 4、虛擬dom有效降低大面積的重繪與排版，因為最終與真實dom比較差異，可以只渲染局部

DOM Diff

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

vue怎么更新節點

1、先根據真實DOM生成virtual DOM 2、當virtual DOM某個節點的數據改變后會生成一個新的Vnode 3、Vnode和oldVnode作對比，發現有不一樣的就直接修改在真實的DOM，然后使oldVnode的值為Vnode

路由

全局路由攔截(路由守衛)

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

to: 即將進入的目標（路由對象）

from:當前導航正要離開的路由

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

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

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

局部路由攔截

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

組件內部鉤子

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

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

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

路由傳參

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中執行store.commit

getter計算屬性

如何解決單頁面的SEO問題

prerender-spa-plugin

SSR

定義

服務端渲染，用戶請求網頁，都是后端先調用數據庫，獲得數據之后，將數據和頁面元素進行拼接，組合成完整的html頁面，再直接返回給瀏覽器

優勢

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

2、更快內容到達時間，特別對于緩慢的網絡情況或緩慢的設備

劣勢

1、構建設置和部署的更多要求

2、更多服務器端負載

Nuxt.js

二、微信小程序基礎 目錄

app.js

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

app.json

路由地址、全局配置，導航頭顏色、名稱

app.wxss

全局界面樣式

project.config.json

控制小程序版本，appid

sitemap.json

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

pages

小程序各個頁面文件

components

組件

images

圖片

template

模板

生命周期

頁面生命周期

onLoad

監聽頁面加載

onShow

監聽頁面顯示

onReady

監聽頁面初次渲染完成

onHide

監聽頁面隱藏

onUnload

監聽頁面卸載

app生命周期

onLaunch

監聽小程序初始化，只觸發一次

onShow

監聽小程序顯示

onHide

監聽小程序隱藏

onError

錯誤監聽函數

路由

wx.switchTab

跳轉到tabBar頁面，并關閉其他所有非tabBar頁面

wx.reLaunch

關閉所有頁面，打開應用內某個頁面

wx.redirectTo

關閉當前頁面，跳轉到應用內某個頁面，不允許跳tabbar頁面

wx.navigateTo

保存當前頁面，跳轉到應用內某個頁面，不能跳到tabbar頁面，最多十層頁面棧

wx.navigateBack

關閉當前頁面，返回上一頁或多級頁面

頁面傳遞數據的方法

url參數傳遞

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視圖層：渲染頁面結構

1、初始化狀態

2、首次渲染狀態

3、持續渲染狀態

End

通過JSBridage通信

AppService邏輯層：用來邏輯處理、數據請求、接口調用

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

2、等待激活狀態：接收到“界面線程初始化完成”信號，講初始化數據發送到“界面線程”，等待界面線程完成初始渲染

3、激活狀態：首次渲染完成，調用onReady函數

4、后臺狀態：也能接收數據，局部渲染

End

虛擬DOM

1、js對象模擬DOM

2、比較兩個DOM樹

3、比較兩個DOM樹的差異

4、把差異應用到真正的DOM樹上

數據請求封裝

在utils封裝wx.request請求

組件中引入應用

提高應用速度方法

提高頁面加載速度

用戶行為預測

減少默認data的大小

組件化方案

雙向綁定

this.setData({})

bindinput綁定事件方法，監聽變化

三、js基礎知識 原型、原型鏈

函數對象

所有函數prototype（顯式原型）

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

原型對象，擁有prototype屬性的對象，在定義函數時就被創建

構造函數

構造函數會擁有本身方法，也會擁有顯式原型的方法，即實例繼承構造函數的方法

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

prototype

proto

constructor

繼承

含義

發生在對象與對象之間

方法

原型

構造函數（子構造函數prototype繼承父構造函數的原型方法）

apply,call借調構造函數

例：

    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:"女"}     

                 

閉包

含義

就是能讀取其他函數內部變量的函數

作用

好處

1、保護函數內的變量 安全，防止命名沖突

2、內存維持一個變量，可以做緩存

3、匿名自執行函數可以減少內耗

壞處

1、增大內耗，造成內存泄漏

2、閉包跨域訪問，導致性能損失

跨域

含義

協議、域名、端口有一個不同就是跨域

解決跨域

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

2、JSONP：a、只能get請求，不能post b、dataType:"jsonp", jsonp: "jsoncallback" c、先在客戶端注冊一個callback,然后把callback名字傳給服務器，服務器生成json數據，然后以js語法方式生成function,function名字就是傳遞上來的參數jsonp.最后將json數據直接入參的方式，放置到function,生成一段js語法文檔，返回給客戶端

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

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

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

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

構造函數

任意一個普通函數用于創建一類對象時，稱為構造函數或構造器

作用域鏈

作用域：變量和函數可訪問范圍，或者說變量或函數起作用的區域

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

cal、 apply、bind的區別

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

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

null和undefined的區別

null是空值，類型為object

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

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

事件冒泡

含義

自下而上（自內而外）的觸發事件

如何防止事件冒泡

jq的e.stopPropagation

事件捕獲

含義

自上而下（自外而內）的觸發事件

事件委托

含義

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

為什么

新增子元素，不需添加事件，因為已經綁定父元素

怎么做

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

原生方法

賦值方法

pop和push

pop從尾部刪除1個元素

push增加若干元素

shift和unshift

shift頭部刪除1個元素

unshift頭部增加若干元素

splice

含義

向數組中添加/刪除項目，并返回被刪除的項目

參數

index:添加或刪除項目的位置

howmany:要刪除的項目的數量

item:向數組添加的新項目

reverse

將數組中元素順序反轉

sort

將數組元素進行排序

訪問方法

concat

用于連接兩個或多個數組，返回新數組

join

用于把數組中的所有元素放入一個字符串，即指定分隔符進行分隔

slice

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

toString

將其轉換為字符串

indexOf和lastIndexOf

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

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

迭代方法

forEach

遍歷

map

遍歷

filter

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

every和some

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

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

reduce和reduceRight

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

reduceRight降序從右往左（累加）

數據類型

Null

Number

String

Boolen

Undefined

js設計模式

模塊模式

構造函數模式

混合模式

工廠模式

單例模式

發布-訂閱模式

js的占位顯示色塊（有點預加載的意思） js的遍歷

for

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

for...in

耗時4858ms

for...of

耗時480-485ms

forEach

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

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

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

let 聲明變量，塊級作用域

const聲明常量

解構

含義

允許按照一定模式，從數組和對象中提取值，對變量進行賦值

解構賦值的類型

數組

[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

數值和布爾值

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

函數參數

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

箭頭函數

this指向外層

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

Set去重

Set是新的數據結構，成員的值是唯一的

[...set]

Array.from(new Set(array)) Set結構數組化

新增數據類型Symbol

含義

表示獨一無二的值

Symbol值通過Symbol函數生成

用途

1、用作屬性名

``模板字符串 怎么實現繼承

Class繼承

模塊化 promise

含義

對象構造函數

resolve表示成功回調

reject表示失敗回調

方法

promise.all

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

promise.race

只返回第一個執行完成的異步操作結果

async/await

含義

在方法外層必須 async異步函數

await必須執行完異步操作，才會執行下一步

用法

內置執行器

返回Promise

五、html與css基礎知識 塊級元素和內聯元素

塊級元素

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

內聯元素

a/b/input/span/i/img

如何實現水平垂直居中

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;區別

display//不占位隱藏

visibility//占位隱藏

清除浮動

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

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

css屬性繼承

文本相關屬性：font-family / font-size / font-style / line-height / text-align / color

列表相關屬性：list-style

表格相關屬性：border-spacing

其他屬性：cursor / visibility

static/relative/absolute/fixed的區別

1、static默認值，不設置屬性，會按正常的文檔流

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

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

4、fixed定位對象是根據瀏覽器窗口進行定位

link和@import區別

link是html標簽，頁面加載時，link會同時被加載，沒兼容性，樣式權重高

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

BFC

含義

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

創建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;

默認高度

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

按鈕元素默認大小不一致

解決：a標簽模擬

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

解決：清除標簽默認樣式 *{ margin: 0; padding: 0; }

IE6雙邊距問題

解決：display:inline;

標簽高度設置小于10px,在IE6和IE7會超出自己設置的高度

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

圖片默認有間距

解決：float布局

IE9不能使用opacity

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

邊距重疊問題

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

cursor: hand在safari上不支持

解決：統一使用cursor:pointer;

七、HTTP的狀態及請求 常見狀態碼

200 成功，一切正常

302 重定向

304未修改

403服務器禁止訪問

404找不到請求的資源

500服務器錯誤

http流程

1、建立連接

2、客戶端發送請求到服務器

3、服務器返回相應信息：狀態行、協議版本好、成功或錯誤代碼

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

http方法

GET獲取數據

POST傳輸數據

PUT傳輸文件

HEAD獲取報文首部

DELET刪除文件

OPTIONS查詢相應URL支持的HTTP方法

八、項目遇到的問題 vue

1、兼容IE10：組件babel-polyfill

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

微信小程序

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

html、css

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

Copyright ? KEN卓越