如果我們希望把數(shù)據(jù)顯示到模板template中，使用最多的語法是 “Mustache”語法 雙大括號 的文本插值 并且我們前端提到過，data返回的對象是有添加到Vue的響應(yīng)式系統(tǒng) 中，當(dāng)data中的數(shù)據(jù)發(fā)生改變時，對應(yīng)的內(nèi)容也會發(fā)生更新 當(dāng)然；原理是vue在編譯的時候通過在DOM元素以及css樣式上加上唯一標(biāo)記，實現(xiàn)樣式私有化，不污染全局樣式如編譯為對應(yīng)的樣式myclass編譯為myclassdatav56e7f951state中保存著共享數(shù)據(jù)修改state中的狀態(tài)只能。

1虛擬DOM的最終目標(biāo)是將虛擬節(jié)點渲染到視圖上但是如果直接使用虛擬節(jié)點覆蓋舊節(jié)點的話，會有很多不必要的DOM操作例如，一個ul標(biāo)簽下很多個li標(biāo)簽，其中只有一個li有變化，這種情況下如果使用新的ul去替代舊的ul，因為；我們將更新的功能封裝了一個watcher 渲染頁面前，會將當(dāng)前的watcher 放到dep類中 在vue中頁面渲染時使用的屬性，需要進(jìn)行依賴收集，收集對象的渲染watcher 取值時，給每個屬性都加了dep屬性，用于存儲這個渲染watcher，同一個。

由于Vue DOM更新是異步執(zhí)行的，即修改數(shù)據(jù)時，視圖不會立即更新，而是會監(jiān)聽數(shù)據(jù)變化，并緩存在同一事件循環(huán)中，等同一數(shù)據(jù)循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新為了確保得到更新后的DOM，所以設(shè)置了；忽視掉和響應(yīng)式數(shù)據(jù)無關(guān)的部分，到這里基本就是mount結(jié)束的地方了，總結(jié)下都干了什么，觸發(fā)beforeMount生命周期，new了一個Watcher對象，渲染模板，觸發(fā)數(shù)據(jù)的get初始化，對每個響應(yīng)式數(shù)據(jù)的Dep實例進(jìn)行依賴收集，然后觸發(fā)Mounted。

在Vue中使用vfor進(jìn)行列表渲染的時候，它會默認(rèn)使用“就地更新”的策略當(dāng)Vue在進(jìn)行列表渲染的時候，Vue會直接對已有的標(biāo)簽就地更新，并不會將所有的標(biāo)簽全部重新刪除和重建，只會重新渲染數(shù)據(jù)，然后再創(chuàng)建新的元素直到數(shù)據(jù)渲；5通過patch方法，對比新舊VNode對象，通過DOM Diff算法，添加修改刪除真正的DOM元素 至此，整個new Vue的渲染過程完畢1把模板編譯為render函數(shù) 2實例進(jìn)行掛載， 根據(jù)根節(jié)點render函數(shù)的調(diào)用，遞歸的生成虛擬dom 3。

vue頁面渲染完成在哪個階段

1、Vue宣稱可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中，會跟蹤每一個組件的依賴關(guān)系，不需要重新渲染整個組件樹而對于React而言，每當(dāng)應(yīng)用的狀態(tài)被改變時，全部子組件都會重新渲染當(dāng)然，這可以通過should。

2、響應(yīng)式原理 每個組件實例都對應(yīng)一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù) property 記錄為依賴之后當(dāng)依賴項的 setter 觸發(fā)時，會通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染思考 get函數(shù)。

3、首先，vuejs在實例化的過程中，會對實例化對象選項中的data 選項進(jìn)行遍歷，遍歷其所有屬性并使用Object把這些屬性全部轉(zhuǎn)為gettersetter同時每一個實例對象都有一個watcher實例對象，他會在模板編譯的過程中，用getter去訪問。

4、一原理 在輪播圖數(shù)組dataList中，定義一個變量currentIndex = 0表示第一張圖片，默認(rèn)渲染第一張圖片即dataListcurrentIndex，然后獲取每張圖片的下標(biāo)點擊切換圖片時把當(dāng)前圖片的下標(biāo)賦值給currentIndex即可實現(xiàn)圖片切換顯示。

5、當(dāng)你只想重新渲染某個組件，或者銷毀當(dāng)前DOM并重新開始， 這個時候Vue的響應(yīng)系統(tǒng)就差點兒意思那如果是你遇到類似情況的話，會怎么辦呢最行之有效的辦法就是給component設(shè)置一個key，當(dāng)你需要重新渲染這個組件的時候只。

6、其原理大致是這樣在數(shù)據(jù)渲染時使用prop渲染數(shù)據(jù) 將prop綁定到子組件自身的數(shù)據(jù)上，修改數(shù)據(jù)時修改自身數(shù)據(jù)來替代prop watch子組件自身數(shù)據(jù)的改變，觸發(fā)事件通知父組件更改綁定到prop的數(shù)據(jù) 這樣做的好處是父組件數(shù)據(jù)改變時。

vue中的渲染是什么意思

其原理就是vue的響應(yīng)式更新dom的原理，m = v m是數(shù)據(jù)，也就是在vuerouter install時在根組件root vue component添加了_route屬性，在匹配到對應(yīng)路由后更新了_route屬性值，繼而觸發(fā)了該屬性值的渲染watcher，在繼。

上一篇文章我們說了vue雙向綁定原理，每個watcher對象都綁定了唯一的id，當(dāng)組件props和data對象屬性發(fā)生變化時，將會觸發(fā)watcher對象update方法，lazy屬性是避免computed屬性里用到props和data對象屬性變化導(dǎo)致的重復(fù)調(diào)用update。