Vue的methods、computed、watch、filter对比分析

最新推荐文章于 2025-02-14 10:45:15 发布

张可盐

最新推荐文章于 2025-02-14 10:45:15 发布

阅读量635

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_44091773/article/details/112687832

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

前言

本文主要是对之前提到过的methods，computed，watch，filter进行区别对比，相应的实例已经在之前的文章提及，如果有忘记的可以回顾康康呀！

methods

methods大家应该都会用，是vue中的方法属性，里面的方法会在数据发生变化的时候，只要引用了此里面的方法，方法就会自动执行。这个属性没有依赖缓存。平常用的最多也是在类似在click点击事件这样事件调用中使用，但是很多人都忽视methods的另一个用法，就是在{{ }}中使用methods：

<body>
<div id="app">
    <ul v-for="item in arrays">
        <li>{{ obj[item] }}</li>
        <li>{{method(item)}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "",
            arrays:["A","B","C"],
            obj:{
                "A":"I am A",
                "B":"I am B",
                "C":"I am C"
            }
        },
        methods: {
            method(value){
                if(this.obj[value] != undefined)
                    return this.obj[value]
                else
                    return "没有匹配到！"
            }
        }
    })
</script>
</body>

当然，这个案例可以直接使用<li>{{ obj[item] }}</li>解决。当模版中的某个循环的值需要进行一定逻辑运算时，这时候就可以使用methods方法，将对应的值传入，然后计算出结果返回到模版显示，这个时候用computed是没法实现的，computed中无法传参，因为在computed定义的不是一个方法，在计算属性的那篇文章中也提及了。methods和computed除了这个不一样之外，还有就是在methods中的计算是不会做缓存的，也就是你调用多少次就会计算多少次，相对computed的开销要大一些。

computed

计算属性顾名思义，是用来对数据属性进行计算的，大体上有二大特性：

计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行；
计算属性是基于依赖进行缓存的，就是说在依赖没有更新的情况，调用计算属性并不会重新计算，而是直接调用缓存中的数据，可以减少开销。

当然对于computed的理解大体上可以有以下两点：

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择；
计算属性默认只有getter（只读），可以在需要的时候自己设定setter（写）。

watch

侦听属性是专门用来观察和响应vue实例上的数据变动，能使用watch属性的场景基本上都可以使用computed属性，而且computed属性开销小，性能高，因此能使用computed就尽量使用computed属性，那么watch属性是不是就没用武之地了呢？

当执行异步操作的时候你可能就必须用watch而不是computed了，大家可以看官网的例子：Ask a yes/no question，并在线体验；
watch除了侦听data中的数据属性，另外还可以监听其他几种方法所侦听不了的，比如侦听路由'$route.path'。其他方法属性最少需要一个可以挂载的DOM，而watch则可以直接侦听。