【VueJS】深入理解 computed 和 methods 方法

最新推荐文章于 2024-07-28 19:41:36 发布

abloume

最新推荐文章于 2024-07-28 19:41:36 发布

阅读量6.1k

点赞数 2

分类专栏： Vue 文章标签： bug 对象数据

本文链接：https://blog.csdn.net/u013451157/article/details/78957258

版权

本文探讨VueJS中的computed和methods的区别，重点讲解computed的缓存特性及其在不同版本中的变化。通过实例展示了如何使用computed进行顺序重排和格式编辑，对比了computed与methods在数据响应和性能上的差异。

摘要由CSDN通过智能技术生成

前言

　　模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
    {
   { message.split('').reverse().join('') }}
</div>

computed 方法

　　所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理，同时computed有缓存功能，防止复杂计算逻辑多次调用引起的性能问题。

在Vue中有多种方法为视图设置值：

使用指令直接将数据值绑定到视图

使用简单的表达式对内容进行简单的转换

使用过滤器对内容进行简单的转换

除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

版本区别

Vue1.x版本中，computed属性存在bug
Vue2.x版本中，修复了computed属性的此bug

在Vue1.x版本中

computed属性是一个大坑

如果我们在computed里声明的对象与data中的重名了，就会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。

<body>
    <h1>Vue 排序</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items">              // 注意对比这里
                {
   {
   item}}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                items:[20,23,18,65,32,19,55,54,56,41]
            },
            computed: {
                items:function(){
                         // 注意对比这里
                    return this.items.sort();
                }
            }
        })
    </script>
</body>

上例中在Vue1.x版本中是有问题的，不会渲染出排序的数据。下面是重命名过后的

<body>
    <h1>Vue 排序</h1>
    <hr>
    <div

最低0.47元/天解锁文章

abloume

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录