Vue笨蛋學原理 渲染模型

2021-10-09 13:19:35 字數 1717 閱讀 2351

這不是vue的原始碼

這不是vue的原始碼

這不是vue的原始碼

只是為了幫助咱們去理解vue的思想

把el掛載到vue例項上

render函式生成虛擬dom

虛擬dom和資料結合渲染到頁面上

資料一旦改變,立即生成新的虛擬dom,新的虛擬dom去和舊的虛擬dom比較

更新頁面

function

myvue

( options )

myvue.prototype.

mount

=function()

myvue.prototype.

mountcomponent

=function()

mount.

call

(this);

// 本質應該交給 watcher 來呼叫

}

myvue.prototype.

createrenderfn

=function()

}

myvue.prototype.

update

=function()

在真正的 vue 中使用了 二次提交的 設計結構

在 頁面中 的 dom 和 虛擬 dom 是一一對應的關係

先 有 ast 和 資料 生成 vnode ( 新, render )

將 就的 vnode 和 新的 vnode 比較 ( diff ), 更新 ( update )

;// 考慮 node 的子元素

let childnodes = node.childnodes;

for(

let i =

0; i < childnodes.length; i++)}

else

if( nodetype ===3)

return _vnode;

}

let rkuohao =

/\\}/g

;// 用來匹配插值語法的正規表示式

function

combine

( vnode, data ));

_vnode =

newvnode

( _tag, _data, _value, _type )

}else

if( _type ===1)

return _vnode;

}

模型原理 Unity基礎原理 3D模型渲染

1,unity渲染模型都是從頂點 vertices 開始,頂點是由一組三維向量陣列 vector3 構成,各個頂點的三維座標分布在空間中。2,頂點賦值完畢後,開始生成三角面 s 三角面是一組整形陣列 int 其元素是頂點的三維向量陣列的索引值,每三個元素構成乙個三角面。每構成乙個三角面的三個頂點中,...

Vue渲染原理及其雙向資料繫結詳解

var data var vm new vue function nodetofragment node,vm return frag var dom nodetofragment document.getelementbyid id this function compile node,vm 為匹...

vue雙向繫結原理demo模型

直接複製 到本地執行即可。自己寫的 實現vue的雙向繫結和依賴收集 場景 多個子元件用到父元件data中的資料,當父元件data中的此資料發生改變時,所有依賴它的 子元件全部更新 通常子元件的從父元件中拿取的資料不允許發生改變 訂閱者 dep 乙個訂閱者只管理乙個資料 class dep addsu...