松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › computed属性的使用

computed属性的使用

迦娜王
3年前Vue2.x从零开始
1,336 0 1

computed顾名思义就是计算属性。vue设计计算属性的本意是希望开发者在html代码中减少js代码,因为混合的代码不容易阅读和维护。通过使用计算属性,可以把原本复杂的代码封装为1个属性,然后调用该属性即可。你可以在数据绑定的时候调用,还可以在vue实例中调用,不过这里需要注意,计算属性中的数据是否响应将会决定该计算属性是否是响应的,并且计算属性会进行缓存,依赖的数据不是响应的,那么计算属性会立刻返回缓存,这是一把双刃剑 。在实际开发中,需不需要使用,还是看情况吧。

[loginview]

利用computed缩短代码

<template>
    <div>
        <p> {{person.car.name}}</p>
        <p> {{carName}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                person: {
                    name: '张珊',
                    age: 30,
                    car: {
                        name: '奥迪A7',
                        band: '奥迪'
                    }
                }
            }
        },
        computed: {
            carName() {
                return this.person.car.name
            }
        }
    }
</script>

这段代码中,我们使用了计算属性把person.car.name“重命名”为carName了,达到了缩短代码的目的。一般情况下我们也会对vuex的调用使用计算属性进行简化。如果你还有一些简单的逻辑需要编写在计算属性内也是可以的。

利用计算属性的缓存

现在我们来写一段比较对比下:

<template>
    <div>
       <p>{{aa}}</p>
       <p>{{aa}}</p>
       <p>{{bb()}}</p>
       <p>{{bb()}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                a:'aaaa',
                b:'bbbb'
            }
        },
        computed: {
            aa(){
                console.log('aaa')
                return this.a
            },
        },
        methods:{
            bb(){
                console.log('bbb')
                return this.b
            }
        }
    }
</script>

代码中分别使用计算属性和函数的方式来包装a,b属性,同时把调用过程输出到控制台。我们分别来查看页面和控制台的输出:

页面上输出:

控制台输出:

我们发现页面上输出了2次aaaa,但是控制台却只输出了1次aaa,印证了计算属性确实会使用缓存,而通过函数的方式调用,每次都会输出bbb。

计算属性赋值

计算属性默认只能获取数据,不能够直接对它赋值。这是因为计算属性默认只有getter,没有setter。当然想要赋值也比较简单,我们可以人为的添加setter。
代码:

<template>
    <div>
        <p>{{aa}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 'aaaa',
            }
        },
        computed: {
            aa: {
                get() {
                    return this.a
                },
                set(value) {
                    this.a = value
                }
            },
        },
        mounted() {
            this.aa = '11'
        }
    }
</script>

此时我们发现页面并没有输出aaaa,而是输出了我们赋值的11,说明成功赋值了。

[/loginview]

1
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
vuex的简单使用
上一篇
watch属性的使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 利用computed缩短代码
  • 利用计算属性的缓存
  • 计算属性赋值
1
相关文章
router的使用
watch属性的使用
vuex的简单使用
filters的使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 1
  • 0
  • Top