Vue初学-计算属性computed

最新推荐文章于 2022-03-08 11:23:05 发布

不会写文章的猴子

最新推荐文章于 2022-03-08 11:23:05 发布

阅读量188

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41809137/article/details/105876959

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

计算属性的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{computedNum}}
    </div>
    <script>
        const vue=new Vue({
            el:"#app",
            data :{
                num:1
            },
            computed: {
                computedNum(){
                	this.num++;
                    return this.num;
                }
            }
        })
    </script>
</body>
</html>

计算属性中通常都会放一些对属性的进行处理的逻辑代码，就比如this.num++ 。如果，将这些代码放到模板中就会使得模板难以重用，并且难以维护。

计算属性的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="numAdd">用方法将数字加1</button>
        {{computedNum}}
    </div>
    <script>
        const vue=new Vue({
            el:"#app",
            data :{
                num:1
            },
            computed: {
                computedNum(){
                    console.log("计算属性中的num的值是"+this.num);
                    return this.num;
                }
            },
            methods: {
                numAdd(){
                    this.num++;
                }
            }
        })
    </script>
</body>
</html>

当我们点击按钮让num自增的时候，运行结果如下图：
在这里插入图片描述
当我们让num自增的时候，发现他还执行了计算属性中的代码。所以，得到结论当我们更新了计算属性关注的属性的值之后，对应的也会执行计算属性中的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="numAdd">用方法将数字加1</button>
        <button @click="computedMothod">查看计算属性的值</button>
    </div>
    <script>
        const vue=new Vue({
            el:"#app",
            data :{
                num:1
            },
            computed: {
                computedNum:function(){
                    console.log("计算属性中的num的值是"+this.num);
                    return this.num;
                }
            },
            methods: {
                numAdd(){
                    this.num++;
                    console.log(this.num);
                },
                computedMothod(){
                   var number= this.computedNum;
                   console.log(number);
                }
            }

        })
    </script>
</body>
</html>

我们通过方法去改变num的值，然后在另一个方法中去调用自动属性。多级让num自增，然后点击查看计算属性的按钮，运行结果，如图：
在这里插入图片描述
多次点击方法，每一次方法都会执行，但是多次点击查看计算属性的按钮，发现它只是在第一次点击的时候执行了计算属性中的代码。
所以，得到结论计算属性是有缓存的。如果计算属性中关注的数据没有发生变化，当我们再次访问该计算属性时，并不会执行计算属性中的代码，而是将上一次的运行结果返回给我们。
还有一点就是：计算属性并不是一个方法，而是一个属性。
查看vue对象，如图：
在这里插入图片描述
计算属性是和$data是同一级的，而$data是vue的一个属性，所以说计算属性并不是一个方法，而是一个属性。

不会写文章的猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初学-计算属性computed

计算属性的基本用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
复制链接

扫一扫

专栏目录