computed -- 計算屬性 · vue3.x -- 系列學習

>[success] # computed -- 計算屬性 1. 在 `computed `中，可以定義一些屬性，這些屬性，叫做【計算屬性】，類型`{ [key: string]: Function | { get: Function, set: Function } }`，下面這種情況就可以使用計算屬性 ~~~ <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span> ~~~ 2. 當給`v-model` 綁定計算屬性的時候，注意這時候我們想做的是既可以賦值，又可以得到值，但是`computed`默認只能得到值也就是`get`，需要手動添加`set`方法 ~~~ export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName: { // getter get() { return this.firstName + ' ' + this.lastName }, // setter set(newValue) { // 注意：我們這里使用的是解構賦值語法 [this.firstName, this.lastName] = newValue.split(' ') } } } } ~~~ 3. 計算屬性的求值結果，會被緩存起來，方便下次直接使用；如果計算屬性方法中，所以來的任何數據，都沒有發生過變化，則，不會重新對計算屬性求值； 4. **不要在 getter 中做異步請求或者更改 DOM** 5. 源碼對`setter`和`getter`處理 ![](https://img.kancloud.cn/21/bb/21bb8b18e402a1dd2cbc529f14e7fbc6_784x495.png) >[danger] ##### 案例計算屬性會基于它們的依賴關系進行緩存，在數據不發生變化時，計算屬性是不需要重新計算的，是如果依賴的數據發生變化，在使用時，計算屬性依然會重新進行計算，但`method`調用就算，如果大量使用對屬性的重新賦值的地方會**消耗性能** ![](https://img.kancloud.cn/ff/9e/ff9ed5e388a64493c11bd5c6515d2df4_284x84.png) ~~~ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <h2>{{ getFullName() }}</h2> <h2>{{ getFullName() }}</h2> <h2>{{ getFullName() }}</h2>  <h2>{{ fullName }}</h2> <h2>{{ fullName }}</h2> <h2>{{ fullName }}</h2>  <button @click="changeLastName">修改lastName</button> </div> <script src="https://unpkg.com/vue@next"></script> <script> // 1.創建app const app = Vue.createApp({ // data: option api data() { return { firstName: 'bbb', lastName: 'ccc', } }, methods: { getFullName() { console.log('getFullName-----') return this.firstName + ' ' + this.lastName }, changeLastName() { this.lastName = 'aaa' }, }, computed: { fullName() { console.log('computed fullName-----') return this.firstName + ' ' + this.lastName }, }, }) // 2.掛載app app.mount('#app') </script> </body> </html> ~~~ >[info] ## 官方文檔 [文檔位置](https://cn.vuejs.org/guide/essentials/computed.html#basic-example)