Vue3学习(组合式API——计算属性computed详解)

目录

一、计算属性computed。

Vue官方提供的案例。(普通写法与计算属性写法)

使用计算属性computed重构------>简化描述响应式状态的复杂逻辑。

(1)计算属性computed小案例。

<1>需求说明。(筛选原数组------>得新数组)

<2>计算属性基本语法。

<3>代码示例。

<4>响应式依赖更新,才会重新更新计算属性。

(2)计算属性可支持getter、settter创建。(默认只读)

<1>只读计算属性。

[<2>提供 getter 和 setter 创建可写计算属性。](#<2>提供 getter 和 setter 创建可写计算属性。)

[(3)"计算属性缓存" vs "方法(函数)"。](#(3)"计算属性缓存" vs "方法(函数)"。)

(4)计算属性computed的最佳实践。


一、计算属性computed。

  • 官方解释:使用计算属性来描述依赖响应式状态的复杂逻辑。
Vue官方提供的案例。(普通写法与计算属性写法)

  • 向上面必须认真看好一会儿才能明白它的计算依赖于author.books。更重要的是,如果在模板中需要不止一次这样的计算,就需要将这样的代码在模板里重复好多遍。

使用计算属性computed重构------>简化描述响应式状态的复杂逻辑。
(1)计算属性computed小案例。
<1>需求说明。(筛选原数组------>得新数组)

<2>计算属性基本语法。
  • const 计算属性 = computed(()=>{..return计算返回的结果..})。

<3>代码示例。
html 复制代码
<!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更新,计算属性会跟着动态更新。
  • 代码示例。
html 复制代码
<!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>只读计算属性。
  • 代码示例。
html 复制代码
<!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 创建可写计算属性。
  • 代码示例。(根据官方文档的语法格式书写)
  • 具体的过程计算可以看注释!
html 复制代码
<!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的调用对比)
html 复制代码
<!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的最佳实践。
  • 官方解答与个人小结。
相关推荐
超人不会飛8 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦11 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想14 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat16 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景18 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z22 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982428 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴33 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干37 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗39 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端