1、Vue2和Vue3的數據劫持的區別:
1:兼容區別
穩定版v2兼容IE9+,9一下不兼容,v3兼容IE11+,11以下不兼容
2:數據雙向綁定
vue2一次就只能劫持一個屬性,也可以劫持多個屬性,但需要for循環
vue2如果在劫持字后在增加一個新的屬性,這個屬性是沒有被劫持的,需要額外的進行操作
vue3可以劫持多個屬性,因為vue3通過proxy(代理)進行代理,返回的是一個新對象
3:vue3數據劫持通過proxy代理
通過proxy進行代理之候無論是設置還是獲取都找這個代理對象,他有三個參數:
target:代理的目標對象 key:屬性名 vulue
4:vue2數據劫持通過ES5語法object.defineProperty
Object.defineProperty用于監聽對象的數據變化,無法監聽數組變化(下標,長度),只能劫持對象的自身屬性,動態添加的劫持不到
proxy返回的是一個新對象,可以通過操作返回的新的對象達到目的,可以監聽數組變化,也可以監聽到動態添加的數據
2、v-if和v-for的優先級 ---v-for比v-if 的優先級高
1:永遠不要把v-if與v-for寫在一個元素上,會帶來性能方面的浪費(每次渲染都會先循環在進行條件判斷)
2:避免發生這樣的情況,則在外層嵌套template(頁面渲染不生成dom節點),在這一層進行v-if判斷后在內部進行v-for循環
<template v-if="isShow"> <p v-for="item in items"> </template>
3、v-if和v-show的語法
1:共同點:都可以實現元素的顯示隱藏
2:區別:
1、v-show只是簡單地控制元素的display屬性,而v-if才是條件渲染(條件為真,就會渲染,條件為假,元素會被銷毀)
2:v-show有更高的首次渲染開銷,而v-if的首次開銷要小很多
3、v-if有跟高的切換開銷
4、v-if有配套的v-else和v-else
5、v-if可以搭配template使用


浙公網安備 33010602011771號