computed方法生成計算屬性 · vue筆記

[TOC] >[success] # computed方法生成計算屬性下面講解一下 **composition API** 的新版 **computed計算屬性** 如何使用。 >[success] ## computed 普通用法 1. **Vue2.x 版本 computed 使用方法** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // vue2.x 版本 computed 計算屬性 const app = Vue.createApp({ data(){ return{ cd: 'cd' } }, computed: { abc(){ return this.cd + 'efg' } }, template: ` <div> {{ abc }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **Vue 3 版本 computed 使用方法** 在 **composition API** 中使用 **computed 計算屬性** ，只需要引入一個 **computed 方法** ，在使用時候返回一個計算后的值即可。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 const countAddFive = computed(() => { return count.value + 5 }) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 或者可以寫的復雜一些，用 **get** 方法來寫。 >[success] ## computed 的 get set方法 1. **get** **get** 實現的效果， **與上面的普通寫法實現的效果是一樣的** ， **get** 表示獲取返回的這個值。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 const countAddFive = computed({ get: () => { return count.value + 5 } }) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **set** **當計算屬性被修改時**，會觸發 **set** 這個方法，如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 let countAddFive = computed({ get: () => { return count.value + 5 }, set: () => { count.value = 10 } }) // 2s 后修改 countAddFive 計算屬性 setTimeout(() => { countAddFive.value = 100 }, 3000) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## computed 的 get set使用實例 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed方法生成計算屬性</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 計算屬性 const app = Vue.createApp({ setup(){ const { ref, computed } = Vue const count = ref(0) // 點擊事件 const handleClick = () => { count.value += 1 } // 計算屬性 let countAddFive = computed({ get: () => { return count.value + 5 }, set: (param) => { count.value = param - 5 } }) // 2s 后修改 countAddFive 計算屬性 setTimeout(() => { countAddFive.value = 100 }, 3000) return { count, countAddFive, handleClick } }, template: ` <div> <span @click="handleClick">{{ count }}</span> -- {{ countAddFive }} </div> ` }) const vm = app.mount('#root') </script> </html> ~~~