第五节：Vue的计算属性使用

最新推荐文章于 2024-03-27 14:17:50 发布

binggoling

最新推荐文章于 2024-03-27 14:17:50 发布

阅读量836

点赞数

分类专栏： VueJS 文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_30442207/article/details/108455385

版权

VueJS 专栏收录该内容

43 篇文章 7 订阅

订阅专栏

文章目录

前言
系列文章目录，Vue学习目录，每一章都有代码例子说明
一、什么是计算属性
二、计算属性VS方法
- 但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。
三、计算属性set和get
总结

前言

本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网

系列文章目录，Vue学习目录，每一章都有代码例子说明

一、什么是计算属性

如果我们要把data这两个值拼接一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达式来实现效果

    <h1>{{name1}} {{name2}}</h1>
    <h1>{{name1 + ' ' + name2}}</h1>

其实Vue的设计初衷就是为了把界面的逻辑最简单化，太多的逻辑放在界面上，后续如果修改起来会难以维护，这时候Vue给了我们更好的一个功能可以显示这个问题就是 计算属性 computed。

看下面的列子，说明一下计算属性使用，其实计算属性就是相当于一个属性，只是多了一层运算步骤。
在例子中 name3就是我们说的计算属性，它的值是通过data的name1和name2值处理得到的。vue的计算属性有一个很好的地方就是计算属性使用的data值，会形成绑定，就说你在计算属性用了那个data的值计算，如果data的值改变了，计算属性的计算值也会跟着改变，不需要做其他操作，都是响应式的

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <h1>{{name1}} {{name2}}</h1>
    <h1>{{name1 + ' ' + name2}}</h1>
    <!-- 计算属性使用 -->
    <h1>{{name3}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3 : function () {
                return this.name1 + ' ' + this.name2;
            }
        }
    });
</script>
</html>

二、计算属性VS方法

计算属性的使用我们都知道了，根据之前我们写的实现模式中，我们把计算属性改成方法实现也是可以实现同样的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <h1>{{name3}}</h1>
    <h1>{{getName3()}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3 : function () {
                console.log("使用计算属性computed")
                return this.name1 + ' ' + this.name2;
            }
        },
        methods:{
            getName3: function () {
                console.log("使用方法methods")
                return this.name1 + ' ' + this.name2;
            }
        }
    });
</script>
</html>

但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。

计算属性是基于它们的响应式依赖进行缓存，只有相关响应式依赖发生改变时才会重新计算值。其他时候都是直接返回的，不需要在次计算。
通过例子说明：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3 : function () {
                console.log("使用计算属性computed")
                return this.name1 + ' ' + this.name2;
            }
        },
        methods:{
            getName3: function () {
                console.log("使用方法methods")
                return this.name1 + ' ' + this.name2;
            }
        }
    });
</script>
</html>

控制台输出结果：

在这里插入图片描述
控制台修改name1的值，输出结果：

在界面上多次使用了name3 和getName3。根据控制台的输出情况，计算属性只执行了一次，而方法是你用了几次就会执行几次。当name1和name2发生改变时，也是一样的情况，计算属性只执行了一次，而方法是你用了几次就会执行几次
注意
1.如果你的一个属性使用很频繁，而且运算量很大，如果是你用方法就有一个问题，就是性能开销特别大，就会界面出现卡顿的现象
2.两者之前的使用，都是开具体需求决定的，你不想缓存起来就用方法，想缓存起来就用计算属性

三、计算属性set和get

是属性都会有set、get方法，计算属性也是一样。只是我们平时都是直接使用它的get，那我们要怎么写set呢
看下面例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 每个属性都会有set、get方法，只是我们平时都是直接使用它的get -->
    <h1>{{name3}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3: {
                get: function () {
                    console.log("get值")
                    return this.name1 + ' ' + this.name2
                },
                /*控制台直接修改 app.name3 = 'a b'，name1改成a, name2改成b */
                set: function (value) {
                    console.log("set值")
                    let names = value.split(' ');
                    this.name1 = names[0];
                    this.name2 = names[1];
                }
            }
        }
    });
</script>
</html>

总结

本节是认识Vue对象里多一个参数使用，就是计算属性computed，它的意思就是在data里属性原来没有的，增加一个扩展的属性值，这属性有更好的灵活性，在请求数据没法满足展示要求的情况，自己可以在一些处理，可以减少界面上的逻辑处理，简化界面，让界面更久好看，和维护。

binggoling

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
第五节：Vue的计算属性使用

文章目录前言系列文章目录，Vue学习目录，每一章都有代码例子说明一、什么是计算属性二、计算属性VS方法但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。三、计算属性set和get总结前言本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习 Vue官网系列文章目录，Vue学习目录，每一章都有代码例子说明一、什么是计算属性如果我们要把data这两个值拼接一起显示的时候，我之前的写法就是这个直接使用两个插值文本或者是表达式来实现效果 <h1>{{n
复制链接

扫一扫