国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue常用知識點總結

xiaokai / 1306人閱讀

摘要：這里借鑒了一下的處理方式，我們把多帶帶模塊的包裝成一個函數，提供一個全局的回調方法，加載完成時候再調用回調函數。

感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工
1.談一談你理解的vue是什么樣子的？

vue是數據、視圖分離的一個框架，讓數據與視圖間不會發生直接聯系。MVVM

組件化：把整體拆分為各個可以復用的個體

數據驅動：通過數據變化直接影響bom展示，避免dom操作。

可以在原項目的基礎上，一兩個組件使用vue，也可以使用vue全家桶開發

全家桶：vue-router，vuex， vue-resource，vue-cli，sass樣式
這篇文章關于漸進式的解釋很好
vue中幾個必須要知道的點

2.vue生命周期

一張圖總結vue生命周期

需注意created時data已綁定，但DOM未生成，$el不存在，mounted時$el已存在，可以掛載。
這篇文章對vue的生命周期寫的很細致，而且有代碼可以手動驗證每個階段

3.v-model雙向數據綁定

雙向綁定就在單向綁定的基礎上給可輸入元素（input、textare等）添加了change(input)事件，來動態修改model和 view
實現流程：

實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者

實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數

實現一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖

mvvm入口函數，整合以上三者

點我查看大佬文章1
點我查看大佬文章2

4.虛擬DOM和聲明式渲染

為什么要減少DOM操作，DOM操作的時間耗在了哪里？

渲染引擎工作：

解析HTML代碼，生產DOM tree

解析CSS樣式，結合DOM tree生產Render tree（display: none;的結點不會存在Rendertree上，最后不會被paint）

計算Render tree各個節點的布局信息，比如box的位置、尺寸、顏色、外形等

根據計算后的布局信息，調用瀏覽器的UI引擎進行渲染。

而操作dom會產生幾種動作，極大的影響渲染的效率。其中 layout（布局）和paint（繪制）是最大的。

layout 就是布局變動造成重新計算（耗CPU，有時也很耗內存）

paint 就是調用瀏覽器UI引擎進行渲染展示頁面（耗CPU和內存）

參考這一篇，講的很詳細

Virtual DOM算法的步驟如下：

用 JavaScript 對象結構表示 DOM 樹的結構；

然后用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變更的時候，重新構造一棵新的對象樹。

然后用新的樹和舊的樹進行比較，記錄兩棵樹差異把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了

如何理解虛擬DOM? - 戴嘉華的回答 - 知乎

虛擬DOM先是用js模擬dom，主要是使用el

然后是對比虛擬的dom樹節點的不同，主要用的是深搜

比較兩棵虛擬樹的差異用的是diff算法，核心是深搜，首先對比DOM樹中每層的差異，并標記進行差異，然后使用類似動態規劃來求出最小編輯距離

聲明式渲染

命令式渲染 ： 命令我們的程序去做什么，程序就會跟著你的命令去一步一步執行

聲明式渲染 ： 我們只需要告訴程序我們想要什么效果，其他的交給程序來做。

這篇文章里不僅有聲明式渲染，還介紹了vue中基本內容

5.路由用原生js如何實現

前端中的路由有兩種實現方式，一種html5的，另一種就是vue的hashhash路由，就是常見的 # 號，這種方式兼容性更好。

切換頁面：路由的最大作用就是切換頁面，以往后臺的路由是直接改變了頁面的url方式促使頁面刷新。但是前端路由通過 #號不能刷新頁面，只能通過 window 的監聽事件 hashchange 來監聽hash的變化，然后捕獲到具體的hash值進行操作，手動下載js

注冊路由：我們需要把路由規則注冊到頁面，這樣頁面在切換的時候才會有不同的效果。

異步加載js：一般單頁面應用為了性能優化，都會把各個頁面的文件拆分開，按需加載，所以路由里面要加入異步加載js文件的功能。異步加載我們就采用最簡單的原生方法，創建script標簽，動態引入js。

參數傳遞：在我們動態引入多帶帶模塊的js之后，我們可能需要給這個模塊傳遞一些多帶帶的參數。這里借鑒了一下jsonp的處理方式，我們把多帶帶模塊的js包裝成一個函數，提供一個全局的回調方法，加載完成時候再調用回調函數。

流程：

來自這篇文章，講的很細致
這個也作為參考，代碼簡單一些，但和上一篇略有不同

6.vue中組件通信

挺好理解的，就是創建一個中央事件總線做為通信橋梁，需要傳值的組件中用bus.$emit觸發一個自定義事件，并傳遞參數，在需要接收數據的組件中用bus.$on監聽自定義事件，并在回調函數中處理傳遞過來的參數
平級組件通信
父子組件通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94918.html

相關文章

  • Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

    摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

    Scorpion 評論0 收藏0

  • 前端最實用書簽(持續更新)

    摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評論0 收藏0

  • 個人分享--web前端學習資源分享

    摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<