[面試專題]習以為常卻被忽略的vue小知識

Loong_T 發布于2019-08-01 17:30 / 1387人閱讀

摘要：習以為常卻被忽略的小知識父模板中調用組件的元素將會被組件本身的模板取代。如果需要，可以通過將傳入得到深拷貝的原始數據對象。然后，在進入下一次的事件循環時，會清空隊列并進行必要的更新。

習以為常卻被忽略的vue小知識

root element

父模板中調用組件的元素將會被組件本身的模板取代。因此，如果組件的模板包含多個頂級元素：

Vue.component("example", {
  template:
    "A" +
    "B"
})
或者模板只包含文本：
Vue.component("example", {
  template: "Hello world"
})

在這兩個情況下，實例將變成一個片段實例 (fragment instance)，也即沒有根元素的實例。它的 $el 指向一個錨節點（普通模式下是空的文本節點，debug 模式下是注釋節點）。更重要的是，父模板組件元素上的指令、過渡效果和屬性綁定（props 除外）將無效，因為生成的實例并沒有根元素供它們綁定

拓展:Web Components - 面向未來的組件標準

組件中的data必須是函數

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

如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數據對象。
復雜類型=>指針簡單類型=>值

Vue.nextTick()

Vue 的 DOM 更新是異步執行,當偵測到數據變化時，Vue 會打開一個隊列，然后把在同一個事件循環 (event loop) 當中觀察到數據變化的 watcher 推送進這個隊列。假如一個 watcher 在一個事件循環中被觸發了多次，它只會被推送到隊列中一次。

然后，在進入下一次的事件循環時， Vue 會清空隊列并進行必要的 DOM 更新。(microtasks和macrotasks)

if (typeof MutationObserver !== "undefined" && !hasMutationObserverBug) {
    var counter = 1
    // 創建一個MutationObserver,observer監聽到dom改動之后后執行回調nextTickHandler
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(counter)
    // 調用MutationObserver的接口,觀測文本節點的字符內容
    observer.observe(textNode, {
        characterData: true
    })
    // 每次執行timerFunc都會讓文本節點的內容在0/1之間切換,
    // 不用true/false可能是有的瀏覽器對于文本節點設置內容為true/false有bug？
    // 切換之后將新值賦值到那個我們MutationObserver觀測的文本節點上去
    timerFunc = function() {
        counter = (counter + 1) % 2
        textNode.data = counter
    }
} else {
    // webpack attempts to inject a shim for setImmediate
    // if it is used as a global, so we have to work around that to
    // avoid bundling unnecessary code.
    // webpack默認會在代碼中插入setImmediate的墊片
    // 沒有MutationObserver就優先用setImmediate，不行再用setTimeout
    const context = inBrowser ?
        window :
        typeof global !== "undefined" ? global : {}
    timerFunc = context.setImmediate || setTimeout
}
MO和Promise.resolve().then(nextTickHandler)

// 文檔示例  
var vm = new Vue({
    el: "#example",
    data: {
        msg: "123"
    }
})
vm.msg = "new message" // change data           

vm.$el.textContent === "new message" // false
Vue.nextTick(function() {
    vm.$el.textContent === "new message" // true
})

css scoped

data-v-079ce416屬性
app[data-v-079ce416]
跟隨作用域,webpack loader處理,加上"[hash:base64]"屬性

h => h(App)

h是createElement(),傳入{},返回vNode;

模板到DOM大致流程:

template模板經過parse處理后返回AST

獲得一棵AST后再經過generate()生成渲染函數

執行渲染函數后會獲得一個VNode，即虛擬DOM

patch函數，負責把虛擬DOM變為真正DOM。

云服務器 GPU云服務器關于網絡安全的小知識 java 面試知識 java面試集合知識小知識

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

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

[面試專題]習以為常卻被忽略的vue小知識

摘要：習以為常卻被忽略的小知識父模板中調用組件的元素將會被組件本身的模板取代。如果需要，可以通過將傳入得到深拷貝的原始數據對象。然后，在進入下一次的事件循環時，會清空隊列并進行必要的更新。習以為常卻被忽略的vue小知識 root element 父模板中調用組件的元素將會被組件本身的模板取代。因此，如果組件的模板包含多個頂級元素： Vue.component(example, { t...

fobnn 2019-08-20 18:59 評論0 收藏0
[面試專題]習以為常卻被忽略的vue小知識

摘要：習以為常卻被忽略的小知識父模板中調用組件的元素將會被組件本身的模板取代。如果需要，可以通過將傳入得到深拷貝的原始數據對象。然后，在進入下一次的事件循環時，會清空隊列并進行必要的更新。習以為常卻被忽略的vue小知識 root element 父模板中調用組件的元素將會被組件本身的模板取代。因此，如果組件的模板包含多個頂級元素： Vue.component(example, { t...

ThreeWords 2019-08-29 13:16 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

lwx12525 2019-08-20 16:35 評論0 收藏0