成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Loong_T / 1397人閱讀

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

習(xí)以為常卻被忽略的vue小知識
root element

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

Vue.component("example", {
  template:
    "
A
" +
    "
B
"
})
或者模板只包含文本：
Vue.component("example", {
  template: "Hello world"
})
在這兩個(gè)情況下，實(shí)例將變成一個(gè)片段實(shí)例 (fragment instance)，也即沒有根元素的實(shí)例。它的 $el 指向一個(gè)錨節(jié)點(diǎn)（普通模式下是空的文本節(jié)點(diǎn)，debug 模式下是注釋節(jié)點(diǎn)）。更重要的是，父模板組件元素上的指令、過渡效果和屬性綁定（props 除外）將無效，因?yàn)樯傻膶?shí)例并沒有根元素供它們綁定

拓展:Web Components - 面向未來的組件標(biāo)準(zhǔn)

組件中的data必須是函數(shù) 
當(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ù)對象。

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

Vue.nextTick() 
Vue 的 DOM 更新是異步執(zhí)行,當(dāng)偵測到數(shù)據(jù)變化時(shí)，Vue 會打開一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個(gè)隊(duì)列。假如一個(gè) watcher 在一個(gè)事件循環(huán)中被觸發(fā)了多次，它只會被推送到隊(duì)列中一次。

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

if (typeof MutationObserver !== "undefined" && !hasMutationObserverBug) {
    var counter = 1
    // 創(chuàng)建一個(gè)MutationObserver,observer監(jiān)聽到dom改動之后后執(zhí)行回調(diào)nextTickHandler
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(counter)
    // 調(diào)用MutationObserver的接口,觀測文本節(jié)點(diǎn)的字符內(nèi)容
    observer.observe(textNode, {
        characterData: true
    })
    // 每次執(zhí)行timerFunc都會讓文本節(jié)點(diǎn)的內(nèi)容在0/1之間切換,
    // 不用true/false可能是有的瀏覽器對于文本節(jié)點(diǎn)設(shè)置內(nèi)容為true/false有bug？
    // 切換之后將新值賦值到那個(gè)我們MutationObserver觀測的文本節(jié)點(diǎn)上去
    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默認(rèn)會在代碼中插入setImmediate的墊片
    // 沒有MutationObserver就優(yōu)先用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模板經(jīng)過parse處理后返回AST

獲得一棵AST后再經(jīng)過generate()生成渲染函數(shù)

執(zhí)行渲染函數(shù)后會獲得一個(gè)VNode，即虛擬DOM

patch函數(shù)，負(fù)責(zé)把虛擬DOM變?yōu)檎嬲鼶OM。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51180.html

相關(guān)文章

  • [面試專題]習(xí)以為常卻被忽略的vue小知識

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

    fobnn 評論0 收藏0

  • [面試專題]習(xí)以為常卻被忽略的vue小知識

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

    ThreeWords 評論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    you_De 評論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    lwx12525 評論0 收藏0

發(fā)表評論

0條評論

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