目录
一、计算属性computed。
Vue官方提供的案例。(普通写法与计算属性写法)
使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。
（1）计算属性computed小案例。
<1>需求说明。（筛选原数组——>得新数组）
<2>计算属性基本语法。
<3>代码示例。
<4>响应式依赖更新，才会重新更新计算属性。
（2）计算属性可支持getter、settter创建。(默认只读)
<1>只读计算属性。
<2>提供 getter 和 setter 创建可写计算属性。
（3）"计算属性缓存" vs "方法(函数)"。
（4）计算属性computed的最佳实践。
一、计算属性computed。
- 官方解释：使用计算属性来描述依赖响应式状态的复杂逻辑。
Vue官方提供的案例。(普通写法与计算属性写法)
- 向上面必须认真看好一会儿才能明白它的计算依赖于author.books。更重要的是，如果在模板中需要不止一次这样的计算，就需要将这样的代码在模板里重复好多遍。
使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。
（1）计算属性computed小案例。
<1>需求说明。（筛选原数组——>得新数组）
<2>计算属性基本语法。
- const 计算属性 = computed(()=>{..return计算返回的结果..})。
<3>代码示例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>原始数据：{{list}}</div> <div>=================================</div> <div>计算属性数据：{{computedList}}</div> </div> <script type="module"> import { createApp, ref, computed } from './vue.esm-browser.js' createApp({ setup() { const list = ref([1, 2, 3, 4, 5, 6, 7, 8]) //基于list派生一个计算属性，从list中过滤出>2 const computedList = computed(() => { return list.value.filter(item => item > 2) }) return { list, computedList } } }).mount('#app') </script> </body> </html>
- 效果如下。
<4>响应式依赖更新，才会重新更新计算属性。
- 当响应式依赖原始数组对象list更新，计算属性会跟着动态更新。
- 代码示例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>原始数据：{{list}}</div><button @click="changeList">更新list</button> <div>=================================</div> <div>计算属性数据：{{computedList}}</div> </div> <script type="module"> import { createApp, ref, computed } from './vue.esm-browser.js' createApp({ setup() { const list = ref([1, 2, 3, 4, 5, 6, 7, 8]) //基于list派生一个计算属性，从list中过滤出>2 const computedList = computed(() => { return list.value.filter(item => item > 2) }) //修改数组list的方法 const changeList = () => { //点击一次按钮，添加一个666 list.value.push(666) } return { list, computedList, changeList } } }).mount('#app') </script> </body> </html>
- 效果如下。
（2）计算属性可支持getter、settter创建。(默认只读)
- 官方解释。
<1>只读计算属性。
- 代码示例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>原始数据：{{count}}</div> <div>=================================</div> <div>计算属性数据：{{countComputed}}</div> </div> <script type="module"> import { createApp, ref, computed } from './vue.esm-browser.js' createApp({ setup() { const count = ref(1) const countComputed = computed(() => { return count.value + 1 }) return { count, countComputed } } }).mount('#app') </script> </body> </html>
- 效果如下。
- 尝试直接修改计算属性。（出现错误不生效）
<2>提供 getter 和 setter 创建可写计算属性。
- 代码示例。（根据官方文档的语法格式书写）
- 具体的过程计算可以看注释！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>原始数据：{{count}}</div> <!-- count的计算过程：1-2=-1 --> <div>=================================</div> <div>计算属性数据：{{countComputed}}</div> <!-- countComputed的计算过程：1-2+1=0 --> </div> <script type="module"> import { createApp, ref, computed } from './vue.esm-browser.js' createApp({ setup() { const count = ref(1) const countComputed = computed({ get() { return count.value + 1 }, set(newValue) { return count.value = newValue - 2 } }) countComputed.value = 1 console.log('set调用：' + count.value) return { count, countComputed } } }).mount('#app') </script> </body> </html>
- 效果如下。
（3）"计算属性缓存" vs "方法(函数)"。
- 官方解释：计算属性值会基于其响应式依赖被缓存。
- 为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法(函数)调用。
- 代码示例。(函数aaa与计算属性bbb的调用对比)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div> 调用1次方法(函数)aaa{{aaa()}}<br> 调用2次方法(函数)aaa{{aaa()}}<br> 调用3次方法(函数)aaa{{aaa()}} <div>=========================</div> 调用1次计算属性{{bbb}}<br> 调用2次计算属性{{bbb}}<br> 调用3次计算属性{{bbb}} </div> </div> <script type="module"> import { createApp, computed } from '/vue.esm-browser.js' createApp({ setup() { const aaa = () => { console.log('aaaa函数') } const bbb = computed(() => { console.log('bbb计算属性') }) return { aaa, bbb } } }).mount('#app') </script> </body> </html>
- 效果如下。
（4）计算属性computed的最佳实践。
- 官方解答与个人小结。
