原始碼位置: src/core/vdom/patch.js -
updatechildren
()
如果沒有設定key，預設key值就是undefined，並且會判斷key值是否相等，因為undefined==undefined 返回true，因此會判斷兩個節點的標籤是否相同，所以沒有key值，會迴圈更新dom，消耗效能
原始碼位置：/src/complier/codegen/index.js
>
原始碼位置：/src/complier/codegen/index.js<
/p>
v-for和v-
if誰的優先順序高？如何正確使用避免效能問題？<
/h1>
<
!-- 第一種同級情況 --
>
for=
"item in children" v-if=
"isfolder"
>
}<
/p>
<
!-- 不同級的情況 --
>
<
/div>
<
/body>
"node_modules/vue/dist/vue.js"
>
<
/script>
newvue(,
]}, computed:},
})console.
log<
/script>
1、v-for優先於v-if被解析，原始碼中的執行順序 v-for是優先執行
2、如果同級，同時出現，每次渲染都會先執行迴圈，再判斷條件，不管條件是否成立都會執行一次迴圈，浪費效能
3、避免這種情況出現，則需要在外面巢狀一層template 進行條件判斷，內部進行v-for迴圈
原始碼中，資料初始化的時候會校驗data的型別
結論： vue元件可能存在多個例項，如果data使用物件形式定義，會導致共用乙個data物件，那麼狀態變更會影響所有元件例項，
採用函式式定義，在initdata時會將其作為工廠函式返回全新的物件，有效規避多個例項之間狀態汙染的問題。
而vue根例項在全域性中只能有乙個，不需要使用函式定義
vue原始碼解析2 模板解析
從上節的第 5 步，引出模板解析，將el的所有子節點取出,新增到乙個新建的文件fragment物件中，對fragment中的所有層次子節點遞迴進行編譯解析處理。文字節點 從data中取出表示式對應的屬性值，設定為文字節點的textcontent 元素節點 獲取節點屬性，判斷是否是指令 解析指令 fu...
Vue原始碼解析 解析器
vue原始碼解析 解析器 解析器型別 html解析器 文字解析器 注釋解析器 原理 將模版字串按照一定的條件迴圈進行切割，對切割下來的內容進行型別判斷，在生產對應型別的ast節點插入到父節點上，直到切割完畢最終生成一顆ast樹。邏輯概覽 整體邏輯 export function parsehtml ...
Vue 原始碼之 nextTick 解析
最近在看 vue 原始碼，一直很好奇這個 nexttick 怎麼實現。本文涉及微任務和巨集任務，不熟悉的可以看我之前的部落格 在瀏覽器環境中，常見的 macro task 有 settimeout messagechannel postmessage setimmediate。而常見的 micro ...