日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
10分鐘讓你快速上手Vue3

經(jīng)過了漫長地迭代，Vue 3.0 終于在上 2020-09-18 發(fā)布了，帶了翻天覆地的變化，使用了 Typescript 進(jìn)行了大規(guī)模的重構(gòu)，帶來了 Composition API RFC 版本，類似 React Hook 一樣的寫 Vue，可以自定義自己的 hook ，讓使用者更加的靈活，接下來總結(jié)一下 vue 3.0 帶來的部分新特性。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、燈塔網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為燈塔等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

  1. setup()
  2. ref()
  3. reactive()
  4. isRef()
  5. toRefs()
  6. computed()
  7. watch()
  8. LifeCycle Hooks(新的生命周期)
  9. Template refs
  10. globalProperties
  11. Suspense

Vue2 與 Vue3 的對(duì)比

  • 對(duì) TypeScript 支持不友好(所有屬性都放在了 this 對(duì)象上，難以推倒組件的數(shù)據(jù)類型)
  • 大量的 API 掛載在 Vue 對(duì)象的原型上，難以實(shí)現(xiàn) TreeShaking。
  • 架構(gòu)層面對(duì)跨平臺(tái) dom 渲染開發(fā)支持不友好
  • CompositionAPI。愛 ReactHook 啟發(fā)
  • 更方便的支持了 jsx
  • Vue 3 的 Template 支持多個(gè)根標(biāo)簽，Vue 2 不支持
  • 對(duì)虛擬 DOM 進(jìn)行了重寫、對(duì)模板的編譯進(jìn)行了優(yōu)化操作...

一、setup 函數(shù)

setup() 函數(shù)是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統(tǒng)一的入口, setup 函數(shù)會(huì)在 beforeCreate 之后、created 之前執(zhí)行, vue3 也是取消了這兩個(gè)鉤子，統(tǒng)一用 setup 代替, 該函數(shù)相當(dāng)于一個(gè)生命周期函數(shù)，vue 中過去的 data，methods，watch 等全部都用對(duì)應(yīng)的新增 api 寫在 setup()函數(shù)中

 
 
 
    
  
  
  
  1. setup(props, context) { 
    2.   
  
  
  2.     context.attrs 
    3.   
  
  
  3.     context.slots 
    4.   
  
  
  4.     context.parent 
    5.   
  
  
  5.     context.root 
    6.   
  
  
  6.     context.emit 
    7.   
  
  
  7.     context.refs 
    8.   
  
  
  8.  
    9.   
  
  
  9.     return { 
    10.   
  
  
  10.  
    11.   
  
  
  11.     } 
    12.   
  
  
  12.   } 
    13.
  • props: 用來接收 props 數(shù)據(jù)
  • context 用來定義上下文, 上下文對(duì)象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到, 在 setup() 函數(shù)中無法訪問到 this，是個(gè) undefined
  • 返回值: return {}, 返回響應(yīng)式數(shù)據(jù), 模版中需要使用的函數(shù)

二、reactive 函數(shù)

reactive() 函數(shù)接收一個(gè)普通對(duì)象，返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象, 想要使用創(chuàng)建的響應(yīng)式數(shù)據(jù)也很簡單，創(chuàng)建出來之后，在 setup 中 return 出去，直接在 template 中調(diào)用即可

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.

十二、vue 3.x 完整組件模版結(jié)構(gòu)

一個(gè)完成的 vue 3.x 完整組件模版結(jié)構(gòu)包含了:組件名稱、 props、components、setup(hooks、computed、watch、methods 等)

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

vue 3 的生態(tài)

  • 官網(wǎng)
  • 源碼
  • vite 構(gòu)建器
  • 腳手架:https://cli.vuejs.org/
  • vue-router-next
  • vuex4.0

UI 組件庫

  • vant2.x
  • Ant Design of Vue 2.x
  • element-plus

本文名稱：10分鐘讓你快速上手Vue3
本文路徑：http://www.dlmjj.cn/article/dhepisc.html