Vue入门——Vue计算属性

Vue的计算属性computed，就是一个函数

简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），类似缓存！

代码示例：这里编写两个返回当前时间戳的方法，分别在methods属性和计算属性computed中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>compute</title>
</head>
<body>

<div id="compute">
    currentTime1: {
   
   {currentTime1()}}	<!--方法-->
    <br>
    currentTime2: {
   
   {currentTime2}}		<!--属性-->
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vue = new Vue({
     
     
        el: "#compute",
        methods: {
     
     
            currentTime1: function () {
     
     
                return Date.now();  //返回当前时间戳
            }
        },
        computed: {
     
      //计算属性computed
            currentTime2: function () {
     
     
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

注意：methods 和 computed 中的方法不能重名

效果演示：

可见两种实现都返回了当前时间戳，区别：

currentTime1是一个方法，通过.方法名()调用，需要带括号
currentTime2不是一个方法，而是一个计算属性，直接.属性名调用，不需要带括号

计算属性调用后，直接被缓存在内存中，所以再次调用值不会改变

如果我们将currentTime2修改为：

<script>
    var vue = new Vue({
     
     
        el: "#compute",
        data: {
     
     
            message: "hello"
        },
        methods: {
     
     
            currentTime1: function () {
     
     
                return Date.now();  //返回当前时间戳
            }
        },
        computed: {
     
      //计算属性computed
            currentTime2: function () {
     
     
                this.message;
                return Date.now();
            }
        }
    })
</script>

我们在控制台调用currentTime2，值不会发生变化，但是当我们修改message的值后，再次调用currentTime2，此时可以看到值发生变化，也就是进行了重新的计算；

这里的this.message是为了能够让currentTime2观察到数据变化而变化，如果方法中的值发生变化，则会刷新重新计算
这就和缓存一模一样，比如MyBatis的缓存，第一次计算存在结果里面，一旦有增删改，缓存立马失效，重新计算
这也就是虚拟Dom的概念，，减少了真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率

结论：

currentTime1和currentTime2看起来都是函数function，但是通过计算属性可以用内存去做：比如计算1+1，第二次再计算的时候就没必要再通过函数，直接从内存中获取结果即可；这便从侧边节省了浏览器的成本；如果有大量方法调用，浏览器就会卡死，但是如果从内存中调用，速度就会很快
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

Vue入门——Vue计算属性

猜你喜欢