vue3.0-props、computed、自定義事件方式

更新時(shí)間：2023年04月22日 16:22:24 作者：qq_52822043

這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1. props驗(yàn)證

1）props驗(yàn)證

在封裝組件時(shí)對(duì)外界傳遞過(guò)來(lái)的props數(shù)據(jù)進(jìn)行合法性的校驗(yàn)，從而防止數(shù)據(jù)不合法的問(wèn)題。

使用數(shù)組類型的props節(jié)點(diǎn)的缺點(diǎn)：無(wú)法為每個(gè)prop指定具體的數(shù)據(jù)類型。

2）對(duì)象類型的props節(jié)點(diǎn)

使用對(duì)象類型的props節(jié)點(diǎn)，可以對(duì)每個(gè)prop進(jìn)行數(shù)據(jù)類型的校驗(yàn)。

<template>
  <h1>App</h1>
 
  <my-count :count="count" :state="state"></my-count>
</template>
 
<script>
import MyCount from './Count.vue'
 
export default {
    name: 'MyApp',
    data() {
        return {
            count: 1,
            state: true
        }
    },
    components: {
        MyCount
    }
}
</script>

3）props驗(yàn)證

對(duì)象類型的props節(jié)點(diǎn)提供了多種數(shù)據(jù)驗(yàn)證方案，例如：

基礎(chǔ)的類型檢查
多個(gè)可能的類型
必填項(xiàng)校驗(yàn)
屬性默認(rèn)值
自定義驗(yàn)證函數(shù)

①基礎(chǔ)的類型檢查

可以直接為數(shù)組的prop屬性制定基礎(chǔ)的校驗(yàn)類型，從而防止組建的使用者為其綁定錯(cuò)誤類型。

②多個(gè)可能的類型

如果某個(gè)prop屬性值的類型不一致，此時(shí)可以通過(guò)數(shù)組的形式，為其指定多個(gè)可能的類型，示例代碼如下：

③必填項(xiàng)校驗(yàn)

如果組建的某個(gè)prop屬性是必填項(xiàng)，必須讓組建的使用者為其傳遞屬性的值，此時(shí)，可以通過(guò)如下的方式將其設(shè)置為必填項(xiàng)：

④屬性默認(rèn)值

在封裝組件時(shí)，可以為某個(gè)prop屬性指定默認(rèn)值。

⑤自定義驗(yàn)證函數(shù)

在封裝組件時(shí)，可以為prop屬性指定自定義的驗(yàn)證函數(shù)，從而對(duì)prop屬性的值進(jìn)行更加精確的控制。

2. 計(jì)算屬性

1）計(jì)算屬性

計(jì)算屬性本質(zhì)上就是一個(gè)function函數(shù)，它可以實(shí)時(shí)監(jiān)聽(tīng)data中數(shù)據(jù)的變化，并return一個(gè)計(jì)算后的新值，供組件渲染DOM時(shí)使用。

2）聲明計(jì)算屬性

計(jì)算屬性需要以function函數(shù)的形式聲明到組件的computed選項(xiàng)中。

計(jì)算屬性側(cè)重于得到一個(gè)計(jì)算的結(jié)果，因此計(jì)算屬性中必須有return返回值。

3）計(jì)算屬性的使用注意點(diǎn)

計(jì)算屬性必須定義在computed節(jié)點(diǎn)中
計(jì)算屬性必須是一個(gè)function函數(shù)
計(jì)算屬性必須有返回值
計(jì)算屬性必須當(dāng)做普通屬性使用

4）計(jì)算屬性和方法

相對(duì)于方法來(lái)說(shuō)，計(jì)算屬性會(huì)緩存計(jì)算的結(jié)果，只有計(jì)算屬性的依賴項(xiàng)發(fā)生變化時(shí)，才會(huì)重新進(jìn)行運(yùn)算，因此相對(duì)來(lái)說(shuō)計(jì)算屬性的性能更好。

  <p>數(shù)量:{{ count }}乘以2的值為:{{ plus() }}</p>
  <p>數(shù)量:{{ count }}乘以2的值為:{{ plus() }}</p>
 
  methods: {
        plus() {
            console.log('方法被執(zhí)行了');
            return this.count*2;
        }
    }

   <p>數(shù)量:{{ count }}乘以2的值為:{{ plus }}</p>  
   <p>數(shù)量:{{ count }}乘以2的值為:{{ plus }}</p> 
 
  computed: {
        plus() {
            // 計(jì)算屬性會(huì)緩存計(jì)算的結(jié)果
            console.log('計(jì)算屬性被執(zhí)行了');
            return this.count*2;
        }
    }