Vue 中computed 与 methods的区别

最新推荐文章于 2022-07-18 10:54:05 发布

weixin_43844071

最新推荐文章于 2022-07-18 10:54:05 发布

阅读量123

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43844071/article/details/108239600

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

computed vs methods：使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

实例学习一

var cnt=1;
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  }
})

运行结果
原始字符串: Runoob!
计算后反转字符串: 2!boonuR
计算后反转字符串: 2!boonuR
使用方法后反转字符串: 3!boonuR
使用方法后反转字符串: 4!boonuR

cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样

实例学习二

<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>

    <body>
        <div class="test">    <!--computed计算属性-->
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <p>{{now}}</p>
            <hr />            <!--横线分割-->
</div>
        <div class="test2">   <!--methods方法，注意new（）加了括号-->
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</p>
        </div>
    </body>

    <script type="text/javascript">
        var myVue = new Vue({
            el: ".test",
            computed: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {     //延时
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        });
        var vue2 = new Vue({
            el: '.test2',
            methods: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        })
    </script>

</html>

运行结果
1598424652328
1598424652328
1598424652328
1598424652328
1598424652334
1598424652337
1598424652340
1598424652342

调用的不同，methods要加上（）

weixin_43844071

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 中computed 与 methods的区别

computed vs methods：使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。实例学习一var cnt=1;var vm = new Vue({ el: '#app', data: { message: 'Runoob
复制链接

扫一扫

专栏目录