一、this指向

this是函數運行時自動生成的一個內部對象，只能在函數內部使用

1. 指向全局變量

純粹的函數調用

2. 作為對象方法的調用

對象調用某個函數，這個函數里面所包含的this也就指向使用這個函數的對象了

3. 函數構造新對象時調用

new

4. apply調用

當 apply() 的參數為空時，this指向全局變量
當 apply(abj) 時，this指向obj對象

改變this指向：apply()，call()，bind()等函數

二、事件流

描述的是從頁面中接受事件的順序

冒泡型事件流：

元素節點 → 根節點；

捕獲型事件流

根節點 → 元素節點；

三、事件代理（委托）

利用事件冒泡和目標元素，把事件處理器添加到父元素，等待子元素事件冒泡，并且父元素能夠通過target（IE為srcElement）判斷是哪個子元素，從而做相應處理。

好處：

減少事件處理器個數，提高性能；
DOM更新無需重新綁定事件處理器

阻止冒泡：

子元素中 e.stopPropagation()；
容器中檢測target元素，e.stopPropagation()；

四、DNS域名解析查找順序

瀏覽器緩存 → 操作系統緩存 → 本地區的域名服務器 → Root Server域名服務器

五、Vue知識點

1. MVVM的理解

Model - View - ViewModel 的縮寫
Model：數據模型；定義數據修改和操作；業務邏輯
View：UI組件；將數據模型轉化成UI展現出來
ViewModel：監聽模型數據的變化；控制視圖行為；處理用戶交互；同步View和Model對象

2. Vue生命周期

控制整個Vue實例的過程時，更容易形成好的邏輯
-----第一次頁面加載-----
beforeCreate（創建前）
created（創建后）——數據初始化
beforeMount（載入前）——編譯模板；render函數
mounted（載入后）——掛載DOM；渲染
---------------------------
beforeUpdate（更新前）
updated（更新后）——更新；渲染
beforeDestroy（銷毀前）
destroyed（銷毀后）

3.Vue組件間參數傳遞

• 父組件與子組件
  • 父 → 子：子組件通過props方法接受數據
  • 子 → 父：$emit方法傳遞參數
• （非父子組件）兄弟組件傳值
  • eventBus：創建一個事件中心，相當于中轉站，可用它來傳遞事件和接受事件
  • VUEX

4. Vue實現數據雙向綁定原理

使用 數據劫持 + 發布者-訂閱模式，通過 Object.defineProperty() 來劫持各個屬性的setter和getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

將MVVM作為數據綁定入口：
Observer：監聽自己 model 數據變化
Compile：解析編譯模板指令 {{ }}
watcher：搭起 Observer 與 Compile 之間通信橋梁

5. Vue的特點

組件化、性能好、鉤子函數、插件、學習成本低、支持指令、支持過濾器、不支持低版瀏覽器、數據驅動

6. Vue的計算屬性computed

在模板中放入太多的邏輯會讓模板過重且難以維護，盡量在需要對數據進行復雜處理且多次使用的情況下使用computed

有以下使用好處：

數據處理結構清晰；

依賴于數據，數據更新，處理結果自動更新；

計算屬性內部 this 指向 vm 實例；

在 template 調用時，直接寫計算屬性名；

常用 getter 方法獲取數據，也可使用 set 方法改變數據；

相較于 methods ，不管依賴數據變不變，methods 都會重新計算，而 computed 在依賴數據不變時，從緩存中獲取，不會重新計算。

7. 一句話回答Vue面試題

css 只在當前組件起作用

答：在 style 標簽中寫入 scoped

v-if 和 v-show 的區別

答：v-if 按照條件是否渲染，v-show 是 display 的 block 或 none

vue.js 的兩個核心

答：數據驅動、組件系統

vue 的幾種常見指令

答：v-if 、v-for 、v-bind 、v-on（可以綁定多個方法）、v-show 、v-else ……

$route 與 $router 的區別

答：$route 是“路由信息對象”，包括 path 、params 、hash 、query 、fullpath 、matched 、name 等路由信息參數；$router 是“路由實例對象”，包括路由跳轉方法、鉤子函數……

vue 常用修飾符

答：
-----指令修飾符-----
① <input v-model.lazy=“msg”> —— 在 change 時而非 input 時更新
② <input v-model.number=“age”> —— 自動將用戶輸入轉為數值類型
③<input v-model.trim=“name”>
----------------------
-----事件修飾符-----
① v-on:click.stop —— 阻止單擊事件繼續傳播
② v-on:submit.prevent —— 提交事件不再重載頁面
③ .self ——當事件發生在該元素本身而不是子元素的時候觸發
④ .capture —— 與 .self 相反
----------------------

vue 中 key 值的作用

答：v-for:key 的作用主要是為了高效地更新虛擬DOM（diff算法）；除此之外，使用 key 屬性可以強制替換元素
<transition>
??<span :key=“text”>{{text}}</span>
</transition>
如果 text 發生改變，整個 <span> 會發生更新，Vue會認為產生新元素，刪除舊元素，從而觸發過渡。

總結

以上是生活随笔為你收集整理的一些杂七杂八的前端知识1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。