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

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

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

1. props驗證

1）props驗證

在封裝組件時對外界傳遞過來的props數(shù)據(jù)進行合法性的校驗，從而防止數(shù)據(jù)不合法的問題。

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

2）對象類型的props節(jié)點

使用對象類型的props節(jié)點，可以對每個prop進行數(shù)據(jù)類型的校驗。

<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驗證

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

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

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

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

②多個可能的類型

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

③必填項校驗

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

④屬性默認(rèn)值

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

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

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

2. 計算屬性

1）計算屬性

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

2）聲明計算屬性

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

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

3）計算屬性的使用注意點

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

4）計算屬性和方法

相對于方法來說，計算屬性會緩存計算的結(jié)果，只有計算屬性的依賴項發(fā)生變化時，才會重新進行運算，因此相對來說計算屬性的性能更好。

  <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() {
            // 計算屬性會緩存計算的結(jié)果
            console.log('計算屬性被執(zhí)行了');
            return this.count*2;
        }
    }