千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習站小程序
隨時隨地免費學(xué)習課程

當前位置:首頁  >  技術(shù)干貨  > vue3.0有了解過嗎?你覺得vue3.0好嗎?好在哪?

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

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

vue3.0有了解過嗎

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

  比如說

  一、常用的api特別好用

  1. ref、toRefs、toRef、isRef

  · ref 用于定義響應(yīng)式變量、快捷DOM訪問。

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

  · 基礎(chǔ)使用: 一般用于定義 String、Number、Boolean 這種基于數(shù)據(jù)類型,外在表現(xiàn)統(tǒng)一使用 .value 訪問。

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

  · toRef、toRefs 用于把一個object的變量,變成響應(yīng)式的變量。

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

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

  · unref 返回一個變量的值

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

  · isRef 用于判斷一個變量是不是ref響應(yīng)式變量

  · 基本語法: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 用于性能優(yōu)化,只對對象的第一層進行proxy

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

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

  · 基本語法:triggerRef(obj) // 當obj.value.b.c.d發(fā)生變化,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 用于定義響應(yīng)式變量(引用數(shù)據(jù)類型)

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

  · ref和reactive是什么關(guān)系呢?ref背后是使用reactive來實現(xiàn)的。

  · shallowReactive 用于性能優(yōu)化,只對對象的第一層進行proxy

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

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

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

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

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

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

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

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

  · 基本語法: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 用于返回一個響應(yīng)式變量的原始值

  · 基本語法: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 用于對響應(yīng)式變量進行二次計算,當它依賴的響應(yīng)式變量發(fā)生變化時會重新計算

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

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

  · watch 用于監(jiān)聽響應(yīng)式變量的變化,組件初始化它不執(zhí)行

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

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

  · watchEffect 用于監(jiān)聽響應(yīng)式變量的變化,組件初始化會執(zhí)行

  · 基本語法: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是需要全局去比較每個節(jié)點的,若發(fā)現(xiàn)有節(jié)點發(fā)生變化后,就去更新該節(jié)點

  vue3.0是在創(chuàng)建虛擬dom中,會根據(jù)DOM的的內(nèi)容會不會發(fā)生內(nèi)容變化,添加靜態(tài)標記, 誰有flag!比較誰。

  2、靜態(tài)提升

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

  3、事件偵聽緩存

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

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

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
抖店入駐收費多少?開抖店費用是多少?

如果要開通抖音小店,需要先把抖音賬號開通商品櫥窗功能。入駐之后,可以選擇頭條賬號、抖音賬號、火山賬號任一類型注冊或登錄。那開個抖店要多...詳情>>

2023-09-19 07:50:26
想做直播帶貨的貨源哪里來?怎么找貨源?

現(xiàn)如今直播推廣的方式是非常火的,有著非常多的賣家都是利用直播推廣店鋪產(chǎn)品,效果也是非常不錯。但很多賣家想要了解現(xiàn)在直播帶貨的話什么產(chǎn)品...詳情>>

2023-09-19 07:47:16
適合三農(nóng)領(lǐng)域的名字?有何技巧?

現(xiàn)在在抖音上很多博主會選擇直播來賺取更多的流量以及利潤,直播間的東西也有很多讓消費者信任并且喜歡的,而且隨著越來越多人直播,很多農(nóng)產(chǎn)品...詳情>>

2023-09-19 07:06:05
抖店商品發(fā)布違規(guī)怎么申訴?有何規(guī)則?

抖店服務(wù)市場服務(wù)商發(fā)布違禁信息如何處理?情節(jié)嚴重程度判定原則:違規(guī)嚴重等級主要通過服務(wù)商違規(guī)次數(shù)、造成后果的嚴重程度、獲利或?qū)е聯(lián)p失的...詳情>>

2023-09-19 06:59:55
“泛垂直起號”可能是2023年最高效的起號方式

這可能是明年最好用的旗號方式了,今天教大家一個很野,但是可以讓你三天漲1000粉的偏方。去年前年啊,每個人都教你,誰知七號對著自己的產(chǎn)品拍...詳情>>

2023-09-19 06:37:38
開班信息
北京校區(qū)
  • 北京校區(qū)
  • 大連校區(qū)
  • 廣州校區(qū)
  • 成都校區(qū)
  • 杭州校區(qū)
  • 長沙校區(qū)
  • 合肥校區(qū)
  • 南京校區(qū)
  • 上海校區(qū)
  • 深圳校區(qū)
  • 武漢校區(qū)
  • 鄭州校區(qū)
  • 西安校區(qū)
  • 青島校區(qū)
  • 重慶校區(qū)
  • 太原校區(qū)
  • 沈陽校區(qū)
  • 南昌校區(qū)
  • 哈爾濱校區(qū)