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

el: dom節點

data: 數據

    
    
    



    

        
 {{ message }}
        
    
    

由于js的限制，Vue 不能檢測以上數組的變動，以及對象的添加/刪除，很多人會因為像上面這樣操作，出現視圖沒有更新的問題。

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

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

數組原生方法觸發視圖更新:
Vue可以監測到數組變化的，數組原生方法:

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

    
    
    



    

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

    
    
    



    

        
{{message | filterTest}}
    
    

v-if盡量不要與v-for在同一節點使用,因為v-for 的優先級比 v-if 更高,如果它們處于同一節點的話，那么每一個循環都會運行一遍v-if
如果你想根據循環中的每一項的數據來判斷是否渲染，那么你這樣做是對的:

 

  {{ todo }}

如果你想要根據某些條件跳過循環，而又跟將要渲染的每一項數據沒有關系的話，你可以將v-if放在v-for的父節點：

// 數組是否有數據 跟每個元素沒有關系

  

    {{ todo }}
  

No todos left!

正確使用v-for與v-if優先級的關系，可以為你節省大量的性能。

    
    




    

        
{{ message }}
    

    

beforecreated：el 和 data 并未初始化

created:完成了 data 數據的初始化，el沒有

beforeMount：完成了 el 和 data 初始化

mounted ：完成掛載

另外在標綠處，我們能發現el還是 {{message}}，這里就是應用的 Virtual DOM（虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。

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

beforecreate : 舉個栗子：可以在這加個loading事件

created ：在這結束loading，還做一些初始化，實現函數自執行

mounted ： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情

beforeDestroy： 你確認刪除XX嗎？ destroyed ：當前組件已被刪除，清空相關內容

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

創建真實DOM的代價高：真實的 DOM 節點 node 實現的屬性很多，而 vnode 僅僅實現一些必要的屬性，相比起來，創建一個 vnode 的成本比較低。

2.觸發多次瀏覽器重繪及回流：使用 vnode ，相當于加了一個緩沖，讓一次數據變動所帶來的所有 node 變化，先在 vnode 中進行修改，然后 diff 之后對所有產生差異的節點集中一次對 DOM tree 進行修改，以減少瀏覽器的重繪及回流

虛擬dom由于本質是一個js對象，因此天生具備跨平臺的能力，可以實現在不同平臺的準確顯示。

Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具備了現代框架應有的高級特性。

例子

{
    tag: "div",                 /*說明這是一個div標簽*/
    children: [                 /*存放該標簽的子節點*/
        {
            tag: "a",           /*說明這是一個a標簽*/
            text: "click me"    /*標簽的內容*/
        }
    ]
}

渲染后可以得到

    click me

因為不使用return包裹的數據會在項目的全局可見，會造成變量污染

使用return包裹后數據中變量只在當前組件中生效，不會影響其他組件

當一個組件被定義， data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

為什么在組件中用js動態創建的dom，添加樣式不生效

結果

// test生效   testAdd 不生效

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

原因

當

• a
• b

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

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

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！
不過這種模式要玩好，還需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

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

此處就設置如果URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面

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

bind:只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置

2.inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

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

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

unbind：只調用一次，指令與元素解綁時調用。

    
    
    




    


        
        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 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

注意：重點是獲取更新后的DOM 就是在開發過程中有個需求是需要在created階段操作數據更新后的節點 這時候就需要用到Vue.nextTick()

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

在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以在created中一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題

    
    
    




    

        
{{msg1}}
        
{{msg2}}
        點擊我
    

    

    
    
    




    

        
{{msg}}
        點擊我
    

    

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

首先在定義路由的時候配置 meta 字段，自定義一個KeepAlive字段作為該頁面是否緩存的標記

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

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

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

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

這么寫就代表了在項目中除了name為detail的頁面組件外，其余頁面都將進行緩存。

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

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

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

Object.defineProperty無法監控到數組下標的變化，導致通過數組下標添加元素，不能實時響應；

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

Proxy不僅可以代理對象，還可以代理數組。還可以代理動態增加的屬性