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使用