vue.js——computed属性与methods属性的区别

最新推荐文章于 2023-03-28 00:04:35 发布

knqiufan

最新推荐文章于 2023-03-28 00:04:35 发布

阅读量515

点赞数

分类专栏： vue JavaScript HTML 文章标签： vue

本文链接：https://blog.csdn.net/knqiufan/article/details/79193261

版权

JavaScript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue

8 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

methods是一种交互方法，通常是把用户的交互动作写在methods中

computed是一种数据变化时mvc中的module 到 view 的数据转化映射

简单点讲就是methods是需要去人为触发的，而computed是在检测到data数据变化时自动触发的，还有一点就是，性能消耗的区别，这个好解释。

首先，methods是方式，方法计算后垃圾回收机制就把变量回收，所以下次在要求解筛选偶数时它会再次的去求值。而computed会是依赖数据的，就像闭包一样，数据占用内存是不会被垃圾回收掉的，所以再次访问筛选偶数集，不会去再次计算而是返回上次计算的值，当data中的数据改变时才会重新计算。

简而言之，methods是一次性计算没有缓存，computed是有缓存的计算。

例如以下这段代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <body>
        <div id="app">
            <li v-for="v in stus">
                {{v.name}} - {{v.sex}}
            </li>
            <br>
            {{type}}
            <input type="radio" v-model="type" value="girl"> 女孩子
            <input type="radio" v-model="type" value="boy">男孩子
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            // 用methods属性不行，必须用computed算数属性，返回一个数组
            // computed属性检测到数据变化自动触发函数
            computed:{
                // ES6的写法
                stus(){
                    if(this.type=='all'){return this.user;}
                    else{
                        // filter方法为过滤，只选择符合条件的内容
                        return this.user.filter((v)=>{
                            return v.sex==this.type;
                        });
                    }
                }
            },
            data:{
                type:'all',
                user:[
                    {name:'小明',sex:'boy'},
                    {name:'小9',sex:'girl'},
                    {name:'小4',sex:'boy'},
                    {name:'小gdr',sex:'girl'},
                    {name:'小w',sex:'girl'}
                ]
            }
        });
    </script>
</html>

实现的功能是选择radio的时候显示男孩还是女孩。结果图片如下

在这个例子当中就应该选择computed属性而不是methods属性，用computed自动检测到数据变化去触发，而methods需要人为的去调用触发，用在这里不合适

knqiufan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js——computed属性与methods属性的区别

methods是一种交互方法，通常是把用户的交互动作写在methods中computed是一种数据变化时mvc中的module 到 view 的数据转化映射简单点讲就是methods是需要去人为触发的，而computed是在检测到data数据变化时自动触发的，还有一点就是，性能消耗的区别，这个好解释。首先，methods是方式，方法计算后垃圾回收机制就把变量回收，所以下次在要求解筛选偶
复制链接

扫一扫

专栏目录