<progress id="2772j"><code id="2772j"><tt id="2772j"></tt></code></progress>

<optgroup id="2772j"><em id="2772j"><del id="2772j"></del></em></optgroup>

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業
當前位置:首頁  >  關于學院  >  技術干貨  > vue3.0有了解過嗎?你覺得vue3.0好嗎?好在哪?

vue3.0有了解過嗎?你覺得vue3.0好嗎?好在哪?

來源:千鋒教育
發布人:qyf
時間: 2022-09-15 17:22:20 1663233740

vue3.0有了解過嗎

  這種問題 是開放的 多說就是都是對的 可以講差異 也可以講新增 的知識點

  比如說

  一、常用的api特別好用

  1. ref、toRefs、toRef、isRef

  · ref 用于定義響應式變量、快捷DOM訪問。

  · 基本語法:const a = ref(1) // {value:1}

  · 基礎使用: 一般用于定義 String、Number、Boolean 這種基于數據類型,外在表現統一使用 .value 訪問。

  · 補充:ref 還可以訪問 DOM對象或者組件實例對象,可做DOM操作。

  · toRef、toRefs 用于把一個object的變量,變成響應式的變量。

  · 基本語法:const msg = toRef(obj, key) // 把obj[key]變成響應式的

  · 基本語法:const { msg } = toRefs(obj) // 把整個obj都變成響應式的

  · unref 返回一個變量的值

  · 基本語法:const x = unref(x) // 如果x是ref變量則返回x.value,如果x不是ref變量則直接返回x。

  · isRef 用于判斷一個變量是不是ref響應式變量

  · 基本語法:const bol = isRef(x)

  function useUpdBoxStyle() {

  const el = ref(null)

  const updateStyle = color => {

  el.value.style.color = color

  }

  return [el, updateStyle]

  }

  1. shallowRef、triggerRef

  · shallowRef 用于性能優化,只對對象的第一層進行proxy

  · 基本語法:const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})

  · triggerRef 用于手動觸發那些shallowRef的變量進行更新視圖

  · 基本語法:triggerRef(obj) // 當obj.value.b.c.d發生變化,triggerRef(obj) 強制更新視圖。

  · customRef 自定義ref,把ref變量拆成get/set的寫法

  · 基本語法:customRef((track, trigger) =>({get,set})

  function useObj() {

  const obj = { a: 1, b: { c: { d: 2 }}}

  const obj1 = ref(obj)

  const obj2 = shallowRef(obj)

  // console.log('obj1', obj1)

  // console.log('obj2', obj2)

  const changeObj = (obj, newD) => {

  // obj1.value.b.c.d = 100

  obj.value.b.c.d = newD

  triggerRef(obj)

  }

  return [[obj1, obj2], changeObj]

  }

  1. reactive、readonly

  · reactive 用于定義響應式變量(引用數據類型)

  · 基本語法:const arr = reactive([]) // {value: []}

  · ref和reactive是什么關系呢?ref背后是使用reactive來實現的。

  · shallowReactive 用于性能優化,只對對象的第一層進行proxy

  · 基本語法:const c = shallowReactive({a:{b:{c:100}}}) // 只對這個對象的第一層進行proxy

  · readonly 把響應式變量變成“只讀的”,如果修改就報警告。

  · 基本語法:const user = readonly({name:1,age:2})

  · isReadonly 用于判斷一個變量是否是readonly的,返回布爾值

  · 基本語法:const bol = isReadonly(x)

  · isProxy 用于判斷一個變量是否是響應式的,返回布爾值

  · 基本語法:const bol = isProxy(x)

  · isReactive 用于判斷一個變量是否是reactive響應式變量,返回布爾值

  · 基本語法:const bol = isReactive(x)

  function useUser() {

  const user = readonly(reactive({name:'list',age:30}))

  console.log('user', user)

  // setTimeout(()=>user.age=40, 2000)

  const x = 1

  const y = readonly({a:1,b:{c:3}})

  console.log('是否被proxy攔截過', isProxy(user), isProxy(x), isProxy(y.b))

  return user

  }

  1. toRaw、markRaw

  · toRaw 用于返回一個響應式變量的原始值

  · 基本語法:const a3 = toRow(reactive(a1)) // a1===a3是true

  · markRaw 用于把一個普通變量標記成“不可proxy”的

  · 基本語法:const b2 = markRaw(b1) // b2是無法被reactive的

  function useRaw() {

  const a1 = { title: 100 }

  const a2 = reactive(a1)

  const a3 = toRaw(a2)

  console.log('toRow(a2)===a1', a3===a1)

  console.log('a2===a1', a2===a1)

  return [a1,a2,a3]

  }

  1. computed、watch、watchEffect

  · computed 用于對響應式變量進行二次計算,當它依賴的響應式變量發生變化時會重新計算

  · 基本語法:const c = computed(()=>c1.value*c2.value) // 只讀

  · 基本語法:const c = computed({get:()=>c1.value*c2.value,set:(newVal)=>c1.value=newVal}) // 可寫可讀

  · watch 用于監聽響應式變量的變化,組件初始化它不執行

  · 基本語法:const stop = watch(x, (new,old)=>{}) // 調用stop()可以停止監聽

  · 基本語法:const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{})

  · watchEffect 用于監聽響應式變量的變化,組件初始化會執行

  · 基本語法:const stop = watchEffect(()=>ajax({cate,page,size}))

  export default function useWatchComputed() {

  const c1 = ref(10)

  const c2 = ref(20)

  const c3 = computed(()=>c1.value*c2.value) // 只讀

  // 可讀也可寫

  const c4 = computed({

  get: ()=>c1.value*c2.value,

  set: (newVal)=>{

  c1.value = parseInt(newVal) / c2.value

  }

  })

  const stop1 = watch(c4, (newC4, oldC4)=>console.log('c4變了', newC4, oldC4))

  const stop2 = watch([c1,c2], ([newC1,newC2],[oldC1,oldC2])=>{

  console.log('[c1,c2] 新值:', [newC1, newC2])

  console.log('[c1,c2] 舊值:', [oldC1, oldC2])

  })

  const stop3 = watchEffect(()=>{console.log('watch effect', c1.value, c2.value)})

  const update = (c,v) => c.value = v

  return [[c1,c2,c3,c4],[stop1,stop2,stop3,update]]

  }

  二、也可以說亮點

  1. 性能比vue2.x快1.2~2倍

  2. 支持tree-shaking,按需編譯,體積比vue2.x更小

  3. 支持組合API

  4. 更好的支持TS

  5. 更先進的組

  3.更可以說性能

  1.diff算法更快

  vue2.0是需要全局去比較每個節點的,若發現有節點發生變化后,就去更新該節點

  vue3.0是在創建虛擬dom中,會根據DOM的的內容會不會發生內容變化,添加靜態標記, 誰有flag!比較誰。

  2、靜態提升

  vue2中無論元素是否參與更新,每次都會重新創建,然后再渲染 vue3中對于不參與更新的元素,會做靜態提升,只被創建一次,在渲染時直接復用即可

  3、事件偵聽緩存

  默認情況下,onclick為動態綁定,所以每次都會追蹤它的變化,但是因為是同一函數,沒有必要追蹤變化,直接緩存復用即可

  在之前會添加靜態標記8 會把點擊事件當做動態屬性 會進行diff算法比較, 但是在事件監聽緩存之后就沒有靜態標記了,就會進行緩存復用

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

10年以上業內強師集結,手把手帶你蛻變精英

請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通

免費領取

今日已有369人領取成功

劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取

推薦閱讀

最新文章

開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區

久久国产精品无码HDAV