vue 中methods,watch,computed

最新推荐文章于 2025-04-10 20:27:59 发布

原创最新推荐文章于 2025-04-10 20:27:59 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue.js中的三种数据处理方式：watch监听、methods业务逻辑和computed计算属性。对比了它们在处理数据变化时的不同应用场景，强调了计算属性在避免重复计算和提高性能方面的优势。

1.watch 监听属性，常用来监听某些特定data数据的变化。
有些操作不方便或不能通过绑定事件来处理业务逻辑，如监听路由的变化，通过采用watch监听。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
2.methods 一般用来写业务逻辑代码。
3.computed 计算属性
计算属性，是把方法当做属性来使用的。属性的结果，可以基于它们的依赖进行缓存。多次调用同一属性，只有当它们的值发生变化，才会重新调用计算属性，否则就从缓存里取数据，只调用一次。
任何复杂逻辑，你都应当使用计算属性

下面举个例子
methods vs watch vs computed

<div id="app">                                        html                                                                                     
        中文名输写：
        <input type="text" v-model="firstname" @keyup="getname">+
        <input type="text" v-model="lastname" @keyup="getname">=
        <input type="text" v-model="fullname">
  </div>

methods 通过绑定事件来操作业务逻辑

let vm = new Vue({                              js
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
                fullname: ""
            },
            methods: {
                getname() {
                    this.fullname = this.firstname + this.lastname;
                }
            },
 }

watch
直接监听data的改变，键是需要观察的表达式：值是对应的回调函数

let vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: "",
                fullname: ""
            },
            watch:{// watch 监视data数据改变
            // newdata是改变后的新数据  olddata是改变前的数据
                firstname:function(newdata,olddata){ // 回调函数
                    this.fullname = newdata + this.lastname;
                },
                lastname:function(newdata,olddata){
                    this.fullname = this.firstname + newdata;
                }
            },
 }

computed
只需要一行代码即可搞定。
像这种业务逻辑采用计算属性更加合适。不会多次计算，消耗计算机性能。

let vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lastname: ""
            },
            computed:{
                fullname:function(){// 注意：属性名不能与data数据中属性名重复
                    return this.firstname + this.lastname; // 返回结果
                }
            }
        })