成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Vue.js-Render函數(shù)

ccj659 / 3096人閱讀

摘要：函數(shù)通過(guò)參數(shù)來(lái)創(chuàng)建虛擬，結(jié)構(gòu)精簡(jiǎn)。其中，訪問(wèn)的用法，使用場(chǎng)景集中在函數(shù)。使用代替模板功能在函數(shù)中，不再需要內(nèi)置的指令，比如。方法時(shí)快速改變數(shù)組結(jié)構(gòu)，返回一個(gè)新數(shù)組。

學(xué)習(xí)筆記：Render函數(shù)
Render函數(shù)

Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。

Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。

Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。

Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。
虛擬DOM

React和Vue2都使用了虛擬DOM技術(shù)，虛擬DOM并不是真正意義上的DOM，而是一個(gè)輕量級(jí)的JavaScript對(duì)象，在狀態(tài)發(fā)生變化時(shí)，虛擬DOM會(huì)進(jìn)行Different運(yùn)算，來(lái)更新只需要被替換的DOM，而不是全部重繪。

與DOM操作相比，虛擬DOM是基于JavaScript計(jì)算的，所以開(kāi)銷(xiāo)會(huì)小很多。

在Vue2中，虛擬DOM就是通過(guò)一種VNode類(lèi)表達(dá)，每個(gè)DOM元素或組件對(duì)對(duì)應(yīng)一個(gè)VNode對(duì)象。

VNodeData節(jié)點(diǎn)解析：

children 子節(jié)點(diǎn)，數(shù)組，也是VNode類(lèi)型。

text 當(dāng)前節(jié)點(diǎn)的文本，一般文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)會(huì)有該屬性。

elm 當(dāng)前虛擬節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)的DOM節(jié)點(diǎn)。

ns 節(jié)點(diǎn)的namespace

content 編譯作用域

functionalContext 函數(shù)化組件的作用域

key 節(jié)點(diǎn)的key屬性，用于作為節(jié)點(diǎn)的標(biāo)識(shí)，有利于patch的優(yōu)化

componentOptions 創(chuàng)建組件實(shí)例時(shí)會(huì)用到的選項(xiàng)信息。

child 當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的組件實(shí)例。

parent 組件的占位節(jié)點(diǎn)。

raw 原始html

isStatic 靜態(tài)節(jié)點(diǎn)的標(biāo)識(shí)

isRootInset 是否作為根節(jié)點(diǎn)插入，被包裹的節(jié)點(diǎn)，該屬性的值為false。

isConment 當(dāng)前節(jié)點(diǎn)是否是注釋節(jié)點(diǎn)。

isCloned 當(dāng)前節(jié)點(diǎn)是否為克隆節(jié)點(diǎn)。

isOnce 當(dāng)前節(jié)點(diǎn)是否有v-once指令。

VNode主要可以分為以下幾類(lèi)：

TextVNode 文本節(jié)點(diǎn)。

ElementVNode 普通元素節(jié)點(diǎn)。

ComponentVNode 組件節(jié)點(diǎn)。

EmptyVNode 沒(méi)有內(nèi)容的注釋節(jié)點(diǎn)。

CloneVNode 克隆節(jié)點(diǎn)，可以是以上任意類(lèi)型的節(jié)點(diǎn)，唯一的區(qū)別在于isCloned屬性為true。

Render函數(shù)通過(guò)createElement參數(shù)來(lái)創(chuàng)建虛擬DOM，結(jié)構(gòu)精簡(jiǎn)。其中，訪問(wèn)slot的用法，使用場(chǎng)景集中在Render函數(shù)。

See the Pen Vue-render函數(shù) by whjin (@whjin) on CodePen.


createElement用法 基本參數(shù)

createElement構(gòu)成了Vue虛擬DOM的模板，它有3個(gè)參數(shù)：

createElement(
    //{String | Object | Function}
    //一個(gè)HTML標(biāo)簽，組件選項(xiàng)，或一個(gè)函數(shù)
    //必須return上面其中一個(gè)
    "div",
    //{Object}
    //一個(gè)對(duì)應(yīng)屬性的數(shù)據(jù)對(duì)象，可選
    //可以在template中使用
    //{String | Array}
    //子節(jié)點(diǎn)(VNode)，可選
    [
        createElement("h1","hello world"),
        createElement(MyComponent,{
            props:{
                someProp:"foo"
            }
        }),
        "bar"
    ]
);

第一個(gè)參數(shù)必選，可以是一個(gè)HTML標(biāo)簽，也可以是一個(gè)組件或函數(shù)；第二個(gè)是可選參數(shù)，數(shù)據(jù)對(duì)象，在template中使用。第三個(gè)是子節(jié)點(diǎn)，也是可選參數(shù)，用法一直。

之前在template中都是在組件的標(biāo)簽上使用v-bind:class、v-bind:style、v-on:click這樣的指令，在Render函數(shù)都將其寫(xiě)在了數(shù)據(jù)對(duì)象中。

約束

所有的組件樹(shù)中，如果VNode是組件或含有組件的slot，nameVNode必須唯一。

在Render函數(shù)里創(chuàng)建了一個(gè)cloneVNode的工廠函數(shù)，通過(guò)遞歸將slot所有子節(jié)點(diǎn)都克隆了一份，并對(duì)VNode的關(guān)鍵屬性也進(jìn)行復(fù)制。

使用JavaScript代替模板功能

在Render函數(shù)中，不再需要Vue內(nèi)置的指令，比如v-if、v-for。無(wú)論要實(shí)現(xiàn)什么功能，都可以使用原生JavaScript。

See the Pen render--v-for by whjin (@whjin) on CodePen.


map()方法時(shí)快速改變數(shù)組結(jié)構(gòu)，返回一個(gè)新數(shù)組。map常和filter、sort等方法一起使用，它們返回的都是新數(shù)組。

Render函數(shù)里沒(méi)有與v-model對(duì)應(yīng)的API，需要自己來(lái)實(shí)現(xiàn)邏輯。

See the Pen Vue-render-API by whjin (@whjin) on CodePen.


v-model就是prop:value和event:input組合使用的一個(gè)語(yǔ)法糖，雖然在Render里寫(xiě)起來(lái)比較復(fù)雜，但是可以自由控制，深入到更底層。

對(duì)于事件修飾符和按鍵修飾符，基本需要自己實(shí)現(xiàn)：

修飾符 對(duì)應(yīng)的句柄
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if(event.target!==event.currentTarget) return
.ente、.13 if(event.keyCode!==13) return替換13位需要的keyCode
.ctrl、.alt、.shift、.meta if(!event.ctrlKey) return根據(jù)需要替換ctrlKey位altKey、shiftKey或metaKey

對(duì)于事件修飾符.capture和.once，Vue提供了特殊的前綴，可以直接寫(xiě)在on的配置里。

修飾符 前綴
.capture !
.once ~
.capture.once或.once.capture ~!

寫(xiě)法如下：

on: {
    "!click": this.doThisInCapturingMode,
        "~keyup": this.doThisOnce,
        "~!mouseover": this.doThisOnceInCapturingMode
}

簡(jiǎn)單模擬聊天發(fā)送內(nèi)容的場(chǎng)景：

See the Pen Vue-模擬聊天發(fā)送內(nèi)容 by whjin (@whjin) on CodePen.


在Render函數(shù)中會(huì)大量使用slot，在沒(méi)有使用slot時(shí)會(huì)顯示一個(gè)默認(rèn)的內(nèi)容，這部分需要自己實(shí)現(xiàn)。

this.$slots.default等于undefined，就說(shuō)明父組件中沒(méi)有定義slot，這是可以自定義顯示的內(nèi)容。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102658.html

相關(guān)文章

  • JavaScript面向?qū)ο缶幊獭狥unction類(lèi)型

    摘要：在中，函數(shù)也是以對(duì)象的形式存在的。也可以使用對(duì)象作為參數(shù)返回值調(diào)用該函數(shù)的返回結(jié)果。調(diào)用自身的函數(shù)被稱(chēng)之為遞歸函數(shù)。默認(rèn)名字的函數(shù)被稱(chēng)之為匿名函數(shù)。內(nèi)部函數(shù)在函數(shù)中聲明內(nèi)嵌函數(shù)，內(nèi)嵌函數(shù)對(duì)函數(shù)中的局部變量進(jìn)行訪問(wèn)。 Function類(lèi)型 Function與函數(shù) 函數(shù)它只定義一次，但可能被執(zhí)行或調(diào)用多次 。Function類(lèi)型是JavaScript提供的引用類(lèi)型之一，通過(guò)Function...

    Object 評(píng)論0 收藏0

  • JavaScript...Function類(lèi)型...

    摘要：類(lèi)型與函數(shù)函數(shù)是這樣一段代碼它只定義一次但可能被執(zhí)行或調(diào)用多次類(lèi)型是提供的引用類(lèi)型之一通過(guò)類(lèi)型創(chuàng)建對(duì)象在中函數(shù)也是以對(duì)象的形式存在的每個(gè)函數(shù)都是一個(gè)對(duì)象函數(shù)名本質(zhì)就是一個(gè)變量名是指向某個(gè)對(duì)象的引用函數(shù)聲明方式字面量方式判斷函數(shù)是否為類(lèi)型的中 Function類(lèi)型 Function與函數(shù) 函數(shù)是這樣一段JavaScript代碼 它只定義一次 但可能被執(zhí)行或調(diào)用多次Function類(lèi)型是J...

    Eirunye 評(píng)論0 收藏0

  • js函數(shù)探索

    摘要：關(guān)于構(gòu)造函數(shù)有幾點(diǎn)需要特別注意構(gòu)造函數(shù)允許在運(yùn)行時(shí)動(dòng)態(tài)的創(chuàng)建并編譯函數(shù)。而函數(shù)本身的表示該函數(shù)的形參。每一個(gè)函數(shù)都包含不同的原型對(duì)象，當(dāng)將函數(shù)用作構(gòu)造函數(shù)的時(shí)候，新創(chuàng)建的對(duì)象會(huì)從原型對(duì)象上繼承屬性。 該文章以收錄： 《JavaScript深入探索之路》 前言 函數(shù)是這樣的一段JavaScript代碼，它只定義一次，但是可能被執(zhí)行或調(diào)用任意次。你可能已經(jīng)從諸如子例程或者過(guò)程這些名字里...

    thursday 評(píng)論0 收藏0

  • 論普通函數(shù)和箭頭函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項(xiàng)、不適用場(chǎng)景

    摘要：第二種情況是箭頭函數(shù)的如果指向普通函數(shù)它的繼承于該普通函數(shù)。箭頭函數(shù)的指向全局，使用會(huì)報(bào)未聲明的錯(cuò)誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數(shù)是ES6的API，相信很多人都知道，因?yàn)槠湔Z(yǔ)法上相對(duì)于普通函數(shù)更簡(jiǎn)潔，深受大家的喜愛(ài)。就是這種我們?nèi)粘ｉ_(kāi)發(fā)中一直在使用的API...

    paulquei 評(píng)論0 收藏0

  • JavaScript 之 面向?qū)ο?[ Function類(lèi)型 ]

    摘要：類(lèi)型描述在中的所有函數(shù)都是類(lèi)型的對(duì)象定義函數(shù)的方式函數(shù)聲明方式函數(shù)名函數(shù)體函數(shù)聲明方式定義函數(shù)函數(shù)聲明方式顯示函數(shù)聲明方式字面量方式函數(shù)名函數(shù)體字面量方式定義函數(shù)字面量方式顯示字面量方式構(gòu)造函數(shù)方式函數(shù)名參數(shù)，函數(shù)體函數(shù)的參數(shù)和函數(shù)體，都以 Function類(lèi)型 描述 在JavaScript中的所有函數(shù)都是Function類(lèi)型的對(duì)象 定義函數(shù)的方式 函數(shù)聲明方式 function 函數(shù)...

    AprilJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<