1.Vue，react，jq對比
vue 是一個以資料驅動視圖的漸進式 mvvm 模式框架，雙向資料系結
react專注視圖層的回應式框架，單項資料系結
jq操作dom類別庫的
2.vue指令？v-if v-show ；v-html v-text區別
v-for，v-model，v-bind，v-on， v-once；
v-if控制的是元素的加載與銷毀，v-show控制元素的display樣式；
v-html可以渲染dom片段，v-text只能渲染文本
3.vue組件通信
1.父傳子：父組件用v-bind系結自定義屬性將資料傳給子組件件，子組件props接收
2.子傳父：父組件用v-on系結自定義事件將函式傳遞給子組件，子組件$emit接收
3.父子通信：v-model，在子組件里注入一個 value 值和 input 事件函式；
（value 在 props 獲取，input 函式使用$emit 觸發，好處是很簡潔，壞處是不容易維護，尤其是容易和其他名字沖突）
4..sync修飾符，對屬性進行假的資料雙向系結，讓子組件在不呼叫父組件傳遞過來的函式的情況下修改父組件傳遞過來的屬性值
5.跨級：vuex
6.其他：父子/provide/inject 兄弟bus
4.什么是高階組件
高階組件就是一個函式，傳給他一個組件，回傳一個新的組件，新組件使用傳入的組件作為子組件，主要用于代碼復用
5.為什么組件中的data必須是一個函式，然后return一個物件
Data是一個函式時，每個組件實體都有自己的作用域，每個實體相互獨立，不相互影響
Object是參考資料型別，如果不用function回傳，每個組件的data都是記憶體的同一個地址，一個資料改變其他的也會改變
6.vue2.x的雙向系結原理
API是通過object.defineProperty()來劫持各個屬性的setter和getter，在資料變動時發訊息給訂閱者，觸發相應的監聽回呼，
7.Vue內置組件
動態加載組價
組件快取
Slot 作為插槽，能讓我們在組件標簽內填充內容
Template 模板
Transition 為組件載入和切換提供影片效果
8.vue生命周期
創建階段：beforeCreat和created
掛載階段：beforeMount和mounted （請求介面）
更新階段：beforeUpdate和updated
銷毀階段：beforeDestory（清除全域變數，定時器）和destoryed
9.修飾符
事件修飾符：.once 讓事件只執行一次 ; stop：禁止冒泡； prevent：阻止默認事件； native：系結原生事件
按鍵修飾符：.13 enter 監聽回車 ； left，right滑鼠左右點擊；
指令修飾符：v-model：.number 將值轉為數字
屬性修飾符：.sync 讓子組件直接使用$emit修改父組件傳過來的值
10.計算屬性和監聽器
Computed：對資料或屬性進行監聽操作，但是不能修改，對操作后的資料進行回傳，得到一個新值； 不受資料型別影響，
Watch：只是對資料或值進行監聽，沒有回傳值，對參考資料型別要開啟深度監聽，受資料型別影響
11.computed是一個物件時，有哪些選項？Computed和methods區別？Watch是一個物件時，有哪些選項？
有set和get兩個選項；
methods是一個方法可以接收引數，computed不能，computed是可以快取的；
watch配置：handler deep immeditate 是否立即執行
12.vue路由有哪些模式，區別
History 和 hash
Hash：它是錨點技術實作的，弊端：不美觀，微信qq內置瀏覽器有些情況會過濾掉#后面的值，兼容所有
History：h5新api history封裝的，ie9下不兼容，
13.路由配置規則
嵌套路由：基于同一個根地址，所有子路由都在children里，都有對應頁面
動態路由基于同一個根地址，可以匹配到多個地址，所有匹配成功的地址，頁面都是同一個，
重定向：redirect：地址（容錯處理）
別名：alias
元資訊：meta 用于做路由權限標記
Name：路由取名
14.路由跳轉方式？Route和outer區別？傳參方式，區別？
標簽跳轉叫宣告式導航，js跳轉叫編程式導航
Router值示例物件，包含路由所有方法和屬性，一般用于路由跳轉；route指當前路由頁面資訊一般用于獲取當前路由傳參或路徑
Query傳參，在地址欄中用類似get請求的方式傳參：?鍵名=值 ；
params ：顯示：動態路由， 隱式傳參：params屬性配置引數，
隱式params資料存在記憶體中，頁面重繪導致資料丟失， query和顯示parmas資料在地址欄中，重繪不會丟
15.路由的生命周期（攔截器-守衛-鉤子）
全域：前置beforeEach 三個引數 to from next 后置afterEach
組件內：beforeRouteUpdate beforeRouteLeave
16.vue組件上scoped屬性的作用，原理？ nextTick原理及優點？
Style標簽上添加scoped屬性，表示它的樣式作用于當下的模塊，實作樣式私有化，
原理：使用postCss來實作轉換，給dom增加一個動態屬性，然后css選擇器也額外增加對應的屬性來選擇該dom，達到該樣式只屬于該屬性的dom，實作組件樣式的模塊
nextTick：將回呼延遲到下次dom更新回圈之后的操作，在修改資料后立即使用它，等待dom更新，相對未來更新后的視圖進行操作，我們只需要把要執行的函式傳遞給this.$nextTick方法，
17.vuex組成部分，及作業流程
State：全域狀態存放的地方，等價data
Getters：計算處理state，等價于組件中的computed
Mutations：專門修改state的，只執行同步，使用commit呼叫
Actions：專門用于執行異步函式代碼的，一般用于介面請求，回傳值通過mutations呼叫，使用dispath呼叫
Plugins：拓展vuex功能插件介面，一般做本地資料持久化，
作業流程：1.客戶端操作事件，dispatch呼叫一個action 2.對應的action處理引數，比如介面，邏輯操作 3.mutation接收一個type型別觸發對應函式，修改state，4.state更改后對應view視圖在render作用下重新渲染
web
18.ajax請求的五個步驟
1.設定XML.Httprequest請求 2.設定請求方式和請求地址 3.用send發送請求 4.監聽狀態變化 5.接識訓傳的資料
19.Ajax沒有請求完，終止請求
再new一個cancelToken函式的引數，讓這個引數被外部使用，所以就使用了第四個引數、函式，使用引數進行回傳，對第四個引數重新賦值
20.promise解決回呼地獄及異步處理
Promise一旦建立就立即執行，此時的狀態是pending（進行中），他接受兩個引數resolve和reject，他倆都是函式，
Resolve是將promise進行中的狀態變為成功，在異步操作成功時，將結果作為引數傳遞出去，
Reject是將promise進行中狀態變為失敗，異步操作失敗時呼叫，將異步操作的錯誤作為引數傳遞出去，
21.什么是回呼地獄
一個異步請求套著一個異步請求，一個異步請求依賴于另一個的執行結果，使用回呼的方式相互嵌套
22.作用域
全域作用域：直接撰寫在script標簽之中的js代碼，任何地方都可以訪問到的變數，都是全域作用域，頁面打開時創建，關閉時銷毀，
區域作用域：呼叫函式時創建函式作用域，函式執行完畢，函式作用域銷毀
23.什么是閉包
能夠讀取其他函式內部變數的函式，簡單理解為“定義在函式內部的函式”，
記憶體消耗大，大量使用可能會造成記憶體泄露，解決記憶體泄漏，在外部給變數值賦為null，最后垃圾回識訓制回收掉就行了
24.回流重繪
回流：頁面每次加載都會有一次回流，元素的尺寸，布局，隱藏等改變需要重建，稱回流，
重繪：dom元素樣式改變，但不影響布局，如背景色，字體顏色改變，稱為重繪
25.遞回
在運行的程序中呼叫自己；如：階乘，斐波拉契數
26.跨域解決方法
1.通過jsonp跨域 2.nginx代理跨域 3.location.hash + iframe跨域 4.CORS跨域資源共享 5.node js 中間代理跨域 6.webSocket協議跨域
27.jsonp跨域原理
動態創建script標簽，請求服務端的php檔案，這個檔案回傳的結果是一段js（作用：呼叫我們定義好的函式）從而將服務端的資料發送客戶端
28.函式，原型，物件關系，原型鏈
原型鏈：任意物件都有原型，原型也有原型，其終點是object.prototype，在物件和object.prototype之間由一條__proto__串起來的鏈式結構，稱為原型鏈
物件通過__proto__找到原型，原型通過constructor找到建構式，建構式通過prototype找到原型，建構式new成實體化物件
29.Get和post區別
Get的內容在url顯示，傳送資料量小不能大于2kb，安全性低，一般用于請求
Post不在url顯示，資料量大，安全性高，一般用于發送資料到服務器
30.前端性能優化
1.減少http請求 2.合并檔案，圖片 3.減少dom操作，盡量用變數代替 4.壓縮js，css代碼 5.圖片格式選擇合理 6.css放在head中加載，js放在body末尾
31.清除浮動
1.在最后一個浮動標簽后添加一個標簽，設定clear：both
2.父級添加overflow：hidden
3.使用after偽元素清除
4.給父級元素定義高度
32.元素水平處置居中
父級Display:flex; justify-content:center; align-item:center;
父級：display:flex; 子級：margin:auto
父級：text-align:center; line-height:; 子級：display: inline-block
父級：position:relative; 子級：position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)
33.Link和@import區別
Link是HTML提供的標簽，不僅可以加載css，還可以定義rss，rel連接屬性等，它引入的css被同時加載，不存在兼容，可以通過js操作dom，來插入link標簽改變樣式
@import是css提供的語法規則，只有匯入樣式的作用，在頁面加載完畢后加載css，IE5之前不支持，
34.Call，apply，bind區別
都可以改變this指向，call和apply立即執行，call傳序列引數，apply傳陣列或類陣列，Bind需要呼叫才執行，傳序列引數
35.節流防抖
節流：當持續觸發事件時，保證一定時間內呼叫一次事件處理函式（固定時間內處理一次）
防抖：當持續觸發事件時，一定時間內沒有再次觸發，事件處理函式才會執行一次，（固定時間內觸發了就繼續延時，當不觸發時執行）
36.上拉下拉開發思路
上拉：只要上拉，觸發函式，就讓page頁+1，然后呼叫介面，將頁碼傳過去，拿到資料，追加到陣列，
下拉：只要下拉，就讓page=1，請求介面，將page傳遞到后臺，拿到資料后，將之前資料清空，再添加新請求的，
Wx
37.Wx有哪些檔案
app.json：全域配置，決定頁面檔案的路徑，視窗表現，多tab等
app.js：全域寫邏輯的地方
app.wxss：全域樣式
Sitemap.json：用于被微信搜索爬取頁面
Project.config.json：專案描述
App.json中window的屬性：navigationBarBackgroundColor navigationBarTitleText navigationBarTextStyle
38.事件系結的兩種方法，事件流？事件委托？
Bind：不阻止事件冒泡
Catch：阻止事件冒泡
冒泡事件：當一個組件上的事件被觸發后，該事件向父節點傳遞，
事件流：三階段：捕獲 執行 冒泡
事件委托：利用事件冒泡，將子元素上的事件寫在父元素上
**39.路由跳轉方式 **
保留當前頁面：navigateTo 關閉所有頁面：reLaunch
關閉當前頁面：redirectTo 關閉當前，回傳上級或多級：navigateBack
Url屬性 跳轉地址
40.生命周期
onl oad首先觸發，之后onShow，onReady，路由跳轉后上一個頁面關閉了觸發onHide，之后onUnload
監聽頁碼加載：onLoad 監聽頁面初次渲染：onReady
監聽頁面顯示：onShow 監聽頁面隱藏：onHide
監聽卸載：onUnload
41.小程式wxss和css區別
Wxss只能引入外鏈，不能使用本地圖片，
@import引入外鏈樣式檔案，地址為相對路徑
尺寸單位rpx，回應式像素，自適應
42.Wx資料的展現與修改
資料初始化：Data:{ age:12 }
使用：雙大括號運算式 {{ age}}
修改：this.setData({ age:22 })
43.滑塊視圖容器 swiper ；請求資料方法
其中只可放swiper-item組件，否則會導致未定義的行為，
屬性：indicator-dots 是否顯示面板指示點
indicator-color 指示點顏色
indicator-active-color 當前選中的指示點顏色
Circular 是否銜接滑動
next-margin
Wx.request 引數：url,data,methods,header,success
44.自定義組件component
根目錄下新建component檔案夾，右鍵新建compoent，它的js檔案是在component下的，
properties中設定頁面默認值，
在要使用它的父頁面的json中注冊自定義組件,usingComponents物件下 命名: 路徑
之后就可以在wxml頁面使用，自己的命名就相當于那個組件，引數直接在標簽上賦值
它不會在app.json中生成路徑，普通頁面js用 page呼叫，組件component呼叫
45.自定義模板 template
根目錄下創建template檔案，新建倆wxml和wxss檔案，Wxml的所有內容都在template標簽下，Name屬性命名模板，
別的頁面使用，在wxml中import引入模板地址，Template標簽的is屬性顯示要使用的模板，
Wxss內也要@import引入模板樣式，在js內給模板的變數賦值就行了
一般只用于頁面展示
46.Change和input事件的區別
Change事件指當前輸入框內容發生改變時觸發的事件，前提是失去了焦點，
Input事件指當前輸入框內容發生改變時就會觸發的事件，實時觸發，不用失去焦點
獲取input框輸入的內容，e.detail.value
同一個事件系結多個input區分：給input一個id值，e.currentTraget.id獲取不同id，以此做對應的事情
47.Target和currentTarget的區別
currentTarget要求系結事件的元素一定是觸發事件的元素
target不是
48.頁面事件傳參的方式，頁面彈窗
Id data-key 事件通過event物件獲取
Wx.showToast 彈窗，可選引數 titel 和 icon
49.Wx本地存盤
存：Wx.setStorageSync(‘鍵名’,對應的值) 取Wx.gettStorageSync(‘鍵名’)
注意：存盤的資料為json資料 ；屬于永久存盤 ；單個key最大1MB，上限10MB
50.獲取視頻實體，視頻操作
Wx.createVideoContext 它需要一個組件的id，
VideoContext.seek跳到視頻指定位置，Bindtimeupdate獲取視頻秒數
Bindended播放到末尾時觸發
Image替代video性能優化
51.scroll-view下拉重繪上拉加載
下拉重繪，發送請求資料，
自定義下拉重繪事件：bindrefresherrefres
開啟自定義下拉重繪：refresher-enabled
自定義下拉重繪默認樣式：refredher-default-style
設定當前下拉重繪狀態：true 已重繪，False未重繪 refresher-triggered
52.轉發分享功能
onShareAppMessage事件函式
Title、page、imageUrl 引數可選
一般寫在最下面
53.怎么封裝小程式的資料請求的
在根目錄下創建utils目錄及api和apiConfig.js檔案
在apiConfig中封裝基礎的get，post請求方法，
在api檔案引入apiConfig封裝好的請求方法，根據頁面資料請求的urls，設定對應的方法匯出，
54.小程式有哪些傳遞資料的方法
1.使用全域變數
2.頁面跳轉時，使用url帶引數
3.使用組件模板template傳遞引數
4.使用本地存盤
5.使用插件pubsub ； .subscribe訂閱 .publish發布 ，先訂閱再發布 ;
55.音頻
獲取背景音頻實體：getBackgroundAudioManager()
監聽播放onPlay
監聽暫停onPause
監聽停止onStop
監聽進度更新onTimeUpdate
監聽自然結束事件onEnded
關閉stop
56.小程式的雙向系結和vue異同
大體相同，但小程式直接this.data的屬性不可以同步到視圖，必須呼叫this.setData來更新值
57.wxml和html異同
1.沒有dom數和window物件，
2.標簽名不一樣，小程式標簽更少，單一標簽多，
3.多了一些像wx:if這樣的屬性和{{}} 運算式
4.wxml對組件進行了重新封裝
5.wxml僅能在微信小程式開發者工具中預覽
58.哪些方法可提高小程式應用速度
1.提高頁面加載速度
2.用戶行為預測
3.減少默認data大小
4.組件化方案
59.小程式wx:if和hidden區別
Wx:if：更高的切換消耗，運行條件變化使用
Hidden：更高的初始渲染消耗，頻繁切換使用
60.小程式運行機制
熱啟動：用過打開過，一定時間內再次打開時不需要重新啟動了，這就需要把我們的后臺打開的小程式切換到前臺
冷啟動：用戶首次打開或微信主動注銷再次打開，需要重新加載啟動
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/312140.html
標籤：其他