摘要：注意重點(diǎn)是獲取更新后的就是在開發(fā)過程中有個(gè)需求是需要在階段操作數(shù)據(jù)更新后的節(jié)點(diǎn)這時(shí)候就需要用到就是用來知道什么時(shí)候更新完成原因在鉤子函數(shù)執(zhí)行的時(shí)候其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行操作無異于徒勞，所以在中一定要將操作的代碼放進(jìn)的回調(diào)函數(shù)中。

el: dom節(jié)點(diǎn)

data: 數(shù)據(jù)

    
    
    



    

        
 {{ message }}
        
    
    

由于js的限制，Vue 不能檢測以上數(shù)組的變動(dòng)，以及對象的添加/刪除，很多人會(huì)因?yàn)橄裆厦孢@樣操作，出現(xiàn)視圖沒有更新的問題。

this.$set(你要改變的數(shù)組/對象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "aa"); // 改變數(shù)組
this.$set(this.obj, "c", "cc"); // 改變對象

數(shù)組原生方法觸發(fā)視圖更新:
Vue可以監(jiān)測到數(shù)組變化的，數(shù)組原生方法:

 splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

    
    
    



    

        
arr:{{arr}}
        
obj:{{obj}}
        修改數(shù)組
        改變數(shù)組
        增加和刪除對象
        修改對象
        this.$set
    
    

    
    
    



    

        
{{message | filterTest}}
    
    

v-if盡量不要與v-for在同一節(jié)點(diǎn)使用,因?yàn)関-for 的優(yōu)先級(jí)比 v-if 更高,如果它們處于同一節(jié)點(diǎn)的話，那么每一個(gè)循環(huán)都會(huì)運(yùn)行一遍v-if
如果你想根據(jù)循環(huán)中的每一項(xiàng)的數(shù)據(jù)來判斷是否渲染，那么你這樣做是對的:

 

  {{ todo }}

如果你想要根據(jù)某些條件跳過循環(huán)，而又跟將要渲染的每一項(xiàng)數(shù)據(jù)沒有關(guān)系的話，你可以將v-if放在v-for的父節(jié)點(diǎn)：

// 數(shù)組是否有數(shù)據(jù) 跟每個(gè)元素沒有關(guān)系

  

    {{ todo }}
  

No todos left!

正確使用v-for與v-if優(yōu)先級(jí)的關(guān)系，可以為你節(jié)省大量的性能。

    
    




    

        
{{ message }}
    

    

beforecreated：el 和 data 并未初始化

created:完成了 data 數(shù)據(jù)的初始化，el沒有

beforeMount：完成了 el 和 data 初始化

mounted ：完成掛載

另外在標(biāo)綠處，我們能發(fā)現(xiàn)el還是 {{message}}，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時(shí)候再把值渲染進(jìn)去。

有關(guān)于銷毀，暫時(shí)還不是很清楚。我們在console里執(zhí)行下命令對 vue實(shí)例進(jìn)行銷毀。銷毀完成后，我們再重新改變message的值，vue不再對此動(dòng)作進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。

beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件

created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行

mounted ： 在這發(fā)起后端請求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情

beforeDestroy： 你確認(rèn)刪除XX嗎？ destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容

https://segmentfault.com/a/11...

創(chuàng)建真實(shí)DOM的代價(jià)高：真實(shí)的 DOM 節(jié)點(diǎn) node 實(shí)現(xiàn)的屬性很多，而 vnode 僅僅實(shí)現(xiàn)一些必要的屬性，相比起來，創(chuàng)建一個(gè) vnode 的成本比較低。

2.觸發(fā)多次瀏覽器重繪及回流：使用 vnode ，相當(dāng)于加了一個(gè)緩沖，讓一次數(shù)據(jù)變動(dòng)所帶來的所有 node 變化，先在 vnode 中進(jìn)行修改，然后 diff 之后對所有產(chǎn)生差異的節(jié)點(diǎn)集中一次對 DOM tree 進(jìn)行修改，以減少瀏覽器的重繪及回流

虛擬dom由于本質(zhì)是一個(gè)js對象，因此天生具備跨平臺(tái)的能力，可以實(shí)現(xiàn)在不同平臺(tái)的準(zhǔn)確顯示。

Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具備了現(xiàn)代框架應(yīng)有的高級(jí)特性。

例子

{
    tag: "div",                 /*說明這是一個(gè)div標(biāo)簽*/
    children: [                 /*存放該標(biāo)簽的子節(jié)點(diǎn)*/
        {
            tag: "a",           /*說明這是一個(gè)a標(biāo)簽*/
            text: "click me"    /*標(biāo)簽的內(nèi)容*/
        }
    ]
}

渲染后可以得到

    click me

因?yàn)椴皇褂胷eturn包裹的數(shù)據(jù)會(huì)在項(xiàng)目的全局可見，會(huì)造成變量污染

使用return包裹后數(shù)據(jù)中變量只在當(dāng)前組件中生效，不會(huì)影響其他組件

當(dāng)一個(gè)組件被定義， data 必須聲明為返回一個(gè)初始數(shù)據(jù)對象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。如果 data 仍然是一個(gè)純粹的對象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對象。

為什么在組件中用js動(dòng)態(tài)創(chuàng)建的dom，添加樣式不生效

結(jié)果

// test生效   testAdd 不生效

.test[data-v-1b971ada]{ // 注意data-v-1b971ada
    background:blue;
    height:100px;
    width:100px;
}

原因

當(dāng)

• a
• b

由于hash模式會(huì)在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規(guī)則時(shí)，加入"mode: "history"",這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個(gè)方法應(yīng)用于瀏覽器記錄棧，在當(dāng)前已有的 back、forward、go 基礎(chǔ)之上，它們提供了對歷史記錄修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL ，但瀏覽器不會(huì)立即向后端發(fā)送請求

const router = new VueRouter({
  mode: "history",
  routes: [...]
})

當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！
不過這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面。

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此處就設(shè)置如果URL輸入錯(cuò)誤或者是URL 匹配不到任何靜態(tài)資源，就自動(dòng)跳到到Home頁面

一個(gè)指令定義對象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)

bind:只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置

2.inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

    
    
    




    


        
        clickMe
        
it is a custom directive
    

    

https://www.cnblogs.com/wangr...
https://juejin.im/post/5a3933...

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

key的作用主要是為了高效的更新虛擬DOM。

https://www.zhihu.com/questio...

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

注意：重點(diǎn)是獲取更新后的DOM 就是在開發(fā)過程中有個(gè)需求是需要在created階段操作數(shù)據(jù)更新后的節(jié)點(diǎn) 這時(shí)候就需要用到Vue.nextTick()

$nextTick就是用來知道什么時(shí)候DOM更新完成

在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以在created中一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted()鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問題

    
    
    




    

        
{{msg1}}
        
{{msg2}}
        點(diǎn)擊我
    

    

    
    
    




    

        
{{msg}}
        點(diǎn)擊我
    

    

https://juejin.im/post/5b6a60...

首先在定義路由的時(shí)候配置 meta 字段，自定義一個(gè)KeepAlive字段作為該頁面是否緩存的標(biāo)記

routes:[{
    path: "/search",
    name: "search",
    component: search,
    meta: {
        title: "搜索列表頁",
        keepAlive: true // 標(biāo)記列表頁需要被緩存
    }
},
{
    path: "/detail",
    name: "detail",
    component: detail,
    meta: {
        title: "詳情頁",
        // 詳情頁不需要做緩存，所以不加keepAlive標(biāo)記
    }
}]

由于組件不支持v-if指令，所以我們在App.vue中采用兩個(gè)的寫法，通過當(dāng)前路由的keepAlive字段來判斷是否對頁面進(jìn)行緩存：

使用提供的 exclude 或者 include 選項(xiàng)，此處我們使用 exclude ，在App.vue中：

需要注意的是，一定要給頁面組件加上相應(yīng)的name，例如在detail.vue中：

這么寫就代表了在項(xiàng)目中除了name為detail的頁面組件外，其余頁面都將進(jìn)行緩存。

父子通信：
父向子傳遞數(shù)據(jù)是通過 props，子向父是通過 events（$emit）；通過父鏈 / 子鏈也可以通信（$parent / $children）；ref 也可以訪問組件實(shí)例；provide / inject API；$attrs/$listeners
兄弟通信：
Bus；Vuex
跨級(jí)通信：
Bus；Vuex；provide / inject API、$attrs/$listeners

https://juejin.im/post/5bd97e...
https://github.com/ljianshu/B...

Vue 的響應(yīng)式原理中 Object.defineProperty 有什么缺陷？為什么在 Vue3.0 采用了 Proxy，拋棄了 Object.defineProperty？

Object.defineProperty無法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致通過數(shù)組下標(biāo)添加元素，不能實(shí)時(shí)響應(yīng)；

Object.defineProperty只能劫持對象的屬性，從而需要對每個(gè)對象，每個(gè)屬性進(jìn)行遍歷，如果，屬性值是對象，還需要深度遍歷。Proxy可以劫持整個(gè)對象，并返回一個(gè)新的對象。

Proxy不僅可以代理對象，還可以代理數(shù)組。還可以代理動(dòng)態(tài)增加的屬性