网站培训费用宿迁网站建设宿迁
目录
一、计算属性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中过滤出>2const 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中过滤出>2const computedList = computed(() => {return list.value.filter(item => item > 2)})//修改数组list的方法const changeList = () => {//点击一次按钮，添加一个666list.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 = 1console.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的最佳实践。
- 官方解答与个人小结。
