完成第一個 Vue3.2 項目後,使用體會

来源:https://www.cnblogs.com/lijianhua-/archive/2023/06/05/wan-cheng-di-yi-ge-vue32-xiang-mu-hou-shi-yong-ti.html
-Advertisement-
Play Games

鑒於公司內網安裝的python版本為python3.6.5,而此時又需要安裝第三方庫pytest,本來是想直接在Python官網PyPI直接搜對應可匹配跑python3.6.5版本的pytest進行下載然後傳到內網安裝即可,但是發現pytest依賴別的第三方庫,根據報錯裝了幾個依賴的第三方庫之後,發 ...


第一次Composition API

在vue3.2中,正式支持了script setup的寫法,這樣可以大大簡化組件的代碼量,減少一些重覆操作,我認為當你寫vue3時,應該把這當作預設寫法。在vue3.2之前,一般會這樣寫。

<script>
   export default {
     setup(props,ctx){
      const a = ref(0)
      //必須return才能在template中使用,這裡就存在一個重覆操作的問題,每次都得cv,萬一忘記就得檢查
      return {
          a
      }
     }
   }
</script>

那麼現在,我們可以這樣寫,對比一下,減少了多少行代碼呢


<script setup>
    const a = ref(0)
</script>

PS:之後的代碼我會省略script setup,預設都在script setup標簽下。
也許你會覺得這樣就更簡單了,其實恰恰相反,CompositionAPI其實要求你對邏輯處理有更清晰的認識,對於封裝有更高的要求,否則,你一樣會寫成比以前更醜的代碼。例如:

const a = ref(0)
   const b = ref('')
   const c = ref(true)
   const d = reactive({})
   const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   const actiond = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }

這一堆代碼其實就是當你沒有考慮邏輯,沒有想過封裝的時候,像流水賬一樣直接寫出來的代碼,這些代碼真的比optionsApi更好閱讀嗎,當然不。
這裡更加混亂,你很難一眼看出某個函數用的是哪個變數,順序混亂,這時候需要封裝,需要組合,這也是CompositionAPI的含義之一。

/usePage.js
export default ()=>{
    const a = ref(0)
   const b = ref('')
   const c = ref(true)
    const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   //這時候需要寫return
   return {
       a,actionA,
       b,actionB,
       c,actionC
   }
}
// usePageD.js
export default ()=>{
const d = reactive({})
const actionD = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }
   return {
       d,actionD,resetD
   }
}

這時候,當我們在不同的組件中使用時,我們可以按需使用,假設我們現在有A和D兩個組件

//組件A
import usePage from './usePage'
const {a,actionA} = usePage()

//組件D
import usePage from './usePageD'
const {actionD,resetD} = usePageD()

上述兩種,自然時封裝組合後更好閱讀。更方便的是,他有更好玩的用法。我目前這個項目是一個iOS混合開發的,這其中必不可少的需要用的jsBridge,由於iOS原生的限制,所有回調都是通過其他函數接收的。例如,下方是我調取原生A方法時的代碼

//jsBridge.js
const callBridge = (msg)=>{
 try {
     window.webkit.xxxHandler.postMessage(msg)
 }catch(e){
     console.log(msg)
 }
}
export const bridgeA = (id,cb='')=>{
    const msg = {
     func:'A',
     params:{id},
     cb
    }
    callBridge(msg)
}

而原生則會這樣告訴我結果(這塊是偽代碼,畢竟我不會iOS)

evaluateJavaScript(cb(data))

當我使用的時候,就會有這種邏輯

//App.vue
const store = useStore()
window.test = function(data){
    store.commit('saveA',data)
} 
//其他組件中
const handleClick = ()=>{
    bridgeA('123','test')
}

而現在,我可以不需要通過vuex了,這樣寫不香嗎?

//useBridgeA.js
export default ()=>{
const id = ref('')
const saved = reactive({})
window.test = function(data){
    saved.data = data    
}
const handleClick = ()=>{
    bridgeA('123','test')
}
onBeforeUnmount(()=>{window.test = null})
return {saved,handleClick,id}
}

最妙的是,這裡實現當使用時註冊回調,不使用時移除,通過reactive通信,而且可以把回調方法隱藏起來,我需要的只是結果,而不需要把所有代碼都在外層。
當我寫組件時,代碼將更加簡單

<template>
  <input v-model="id" />
  <button @click="handleClick">
    Action A
  </button>
</template>
<script setup>
  import useBridgeA from './useBridgeA'
  const {id,handleClick} = useBridgeA()
</script>

這裡其實我也確立了一些我的vue3的寫法吧。
組合不僅是功能點的組合,更是把一些關聯性比較高的方法,變數放到一起。
在上面這個例子,其實我們可以把回調方法再抽離出來,放一個單獨的文件中,我再import,但是這樣只會讓項目文件越來越多,每次查找的文件越來越多罷了。

思考setup

很少有人會去想,為什麼這個新的生命周期叫setup,set up 有建立的意思,難道意思僅僅是這個App創建時嗎,那麼created顯然更好理解一些。
我認為,setup是一個鏈接,是把數據和template連接起來的一個橋梁,因此才會使用這個動詞,本質上這不是一個生命周期,是一個動作,是我們把數據和Vue連接起來。
我把你做的webApp比作一臺機器,setup就好比電源線,你把你變數,邏輯作為電源,輸入到電源線,機器就啟動了。

最常見的問題,忘記寫.value

其實在vue3中,我更喜歡用ref,ref結構簡單,有著更可靠更方便的響應式。例如,當我們需要聲明一個響應式的對象時,你可以有這兩種寫法

const a = shallowRef({})
const b = reactive({})

但是,當你需要替換整個對象時怎麼辦?對於變數來說,直接修改value即可。

a.value = {c:1}

對於變數b,那就麻煩了,如果你的對象層級比較簡單,我能想到的方法就是用Object.assign

Object.assign(b,{c:1})

如果只是刪除這個c這屬性,對於變數a,很簡單

a.value = {}

對於變數b呢,使用了reactive的那個呢,顯然更加麻煩

b=reactive({}) // 報錯

能直接這樣寫嗎,不行,這樣會報錯,因為b是一個const。於是乎,你簡單的思考一下,把const 改為let

let b = reactive({})
b.c = 1
b = reactive({})

理論上這樣沒有問題,在b沒有別的依賴或者是被別的變數依賴的時候。某種程度上講,這樣也會丟失響應性。你只能這樣做,這也是我之前為什麼要寫reset的原因

delete b.c
//假設b這個變數中有很多屬性,則需要遍歷
Object.keys(b).forEach(key=>delete b[key])

上面這些其實都是一些容易被忽略的點,也是我為什麼更推薦ref的原因,但是有利有弊,ref最大的問題是容易忘記寫.value

const a = ref(0)
a=1 //報錯
//做判斷的時候
if(a){ //永遠為true,因為a是一個對象,不是數字}

這時候,我推薦你使用unref,上面的if判斷應該這樣寫

const a = ref(0)
if(unref(a)>0){
  // do sth
} else {
  // do another
}

你可以毫無心智負擔的使用unref,哪怕這個變數不是ref

style v-bind 的優缺點

style v-bind可能很多人不熟悉,我把這稱之為vue對css變數的hack。我項目中偶也也會使用一些css變數。
具體的css變數的教程,大家可以看一下這個鏈接www.ruanyifeng.com/blog/2017/05/css-variables.html

<template>
  <p>123</p>
</template>
<style scoped>
  p{
    color:var(--pcolor)
  }
</style>

這樣是純粹的原生css的寫法,vue幫我們做了一個hack.這裡需要註意,style中的v-bind裡面是一個字元串。

<template>
  <p>123</p>
</template>
<script setup>
  const pcolor = ref('#000')
</script>
<style scoped>
  p{
    color:v-bind('pcolor')
  }
</style>

但是我發現一個問題,在某些情況下的偽元素中的content屬性似乎不生效,依舊是上面那個模板,我多寫幾個p

<template>
  <div>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
  </div>
</template>
<script setup>
  const text = ref('hello')
</script>
<style scoped>
  div p:first-of-type:before{
    content:v-bind('text')
  }
</style>

這時候v-bind似乎沒生效,這個偽元素不顯示,也不知道是bug還是什麼,這時候我建議你這樣寫

<template>
  <div>
    <p :data-text="text">123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
  </div>
</template>
<script setup>
  const text = ref('hello')
</script>
<style scoped>
  div p:first-of-type:before{
    content:attr(data-text)
  }
</style>

pinia or not

pinia約等於vuex5,使用起來和vuex稍有不同,我在項目中是這樣使用的

// store/user.js中定義具體的store
export const UserStore =  defineStore('user', {
  state:()=>({
    name:'',
    id:''
  })
  getters:{
    nameId:state=>```{state.name}_``{state.id}`
  }
actions:{
  async getUserInfo(){}
}
})

//store/index.js
//這樣寫的好處是,以後引用的時候可以直接from '@/store',並且當文件多了,可以用通過webpack的require.context或者vite的import blob來自動處理
export {UserStore} from './user'

比vuex來說少了一個mutation,也不能說沒有,只是用$patch函數代替了,使用起來更靈活

import UserStore from  '@/store'
const user = UserStore()
user.name = 'test'
//or
user.$patch({
  name:'test',
  id:123
})
//or 
user.$patch(state =>{
  state.name = 'test'
  state.id = 123
})

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • # SpringCloud Sleuth+Zipkin-鏈路追蹤 官網:[spring-cloud/spring-cloud-sleuth: Distributed tracing for spring cloud (github.com)](https://github.com/spring-cl ...
  • # 對象流ObjectInputStream和ObjectOutputStream ## 引言 - 看一個需求 1. 將int num=100這個 int 數據保存到文件中,註意不是 100 數字,而是 int 100,並且,能夠從文件中直接恢復 int 100; 2. 將Dog dog = new ...
  • 某日二師兄參加XXX科技公司的C++工程師開發崗位6面: > 面試官: 如何在堆上申請一塊記憶體? > > 二師兄:常用的方法有malloc,new等。 > > 面試官:兩者有什麼區別? > > 二師兄:malloc是向操作系統申請一塊記憶體,這塊記憶體沒有經過初始化,通常需要使用memset手動初始化。 ...
  • # BufferedInputStream 和 BufferedOutputStream - BufferedInputStream ![](https://img2023.cnblogs.com/blog/3008601/202306/3008601-20230604103033021-44120 ...
  • 大家好,我3y啊。由於去重邏輯重構了幾次,好多股東直呼看不懂,於是我今天再安排一波對代碼的解析吧。`austin`支持兩種去重的類型:**N分鐘相同內容達到N次**去重和**一天內N次相同渠道頻次**去重。 > **Java開源項目消息推送平臺🔥推送下發【郵件】【簡訊】【微信服務號】【微信小程式】 ...
  • # 節點流 和 處理流 [TOC] - **節點流和處理流一覽圖:** ![img](https://img-blog.csdnimg.cn/img_convert/8ca5f4f2e434e5c05149bcb7ebc281a8.png) ​ 【圖片來源】http://t.csdn.cn/d52a ...
  • # 前言 生成器是Python的一種核心特性,允許我們在請求新元素時再生成這些元素,而不是在開始時就生成所有元素。它在處理大規模數據集、實現節省記憶體的演算法和構建複雜的迭代器模式等多種情況下都有著廣泛的應用。在本篇文章中,我們將從理論和實踐兩方面來探索Python生成器的深度用法。 ## 生成器的定義 ...
  • 在B站有許多坤坤的視頻,作為一名ikun,讓我們寫個爬蟲研究一下視頻的視頻的名字、鏈接、觀看次數、彈幕、發佈時間以及作者。我們用selenium來實現這個爬蟲,由於要獲取的數據比較多,我們寫幾個函數來實現這個爬蟲。 先倒入需要用到的庫,包括selenium, time ,BeautifulSoup ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...