Vue.js学习（二）：computed响应数据变化与其他几种方法的比较

本文链接：https://blog.youkuaiyun.com/michael8512/article/details/78975783

本文介绍了Vue中methods、computed、watch及v-model四种数据侦听方式的特点与应用场景。methods适用于简单计算；computed基于依赖缓存，高效计算；watch用于异步或高开销操作；v-model实现数据双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue重methods、computed、watch以及v-model都能侦听数据，并相应数据的变化

1）methods：每次获取都会重新计算求值

    <div id="app">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" v-model="first" @keypress="change">
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" v-model="last" @keypress="change">

        <h2>methods: {{name}}</h2>
    </div>

let vm=new Vue({
    el:'#app',
    data:{
        price: 1
    },
    methods:{
        change(){
            this.price
        }
    }
})

2）computed：基于数据依赖进行缓存，只有当数据变化时，才会重新求值；

    <div id="app">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" v-model="first">
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" v-model="last">

        <h2>computed: {{cap}}</h2>
    </div>

let vm=new Vue({
    el:'#app',
    data:{
        first:'',
        last: "",
        name:""
    },
    computed:{
        cap:function(){
            return this.first+" "+this.last
        }
    }
})

3）watch：当需要在数据变化时执行异步或者开销较大的操作时，这个方式最有用；

    <div id="app">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" v-model="first">
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" v-model="last">

        <h2>watch: {{cap}}</h2>
    </div>

let vm=new Vue({
    el:'#app',
    data:{
        first:'',
        last: "",
        name:""
    },
    watch:{
        first(value){
            this.name=value+' '+this.last
        },
        last(value){
            this.name=this.first+" "+value
        }
    }
})

4）v-model：这是基于数据双向绑定的

    <div id="app">
        <label for="firstName">First Name:</label>
        <input type="text" id="firstName" v-model="first">
        <label for="lastName">Last Name:</label>
        <input type="text" id="lastName" v-model="last">

        <h2>v-model：{{first+' '+last}}</h2> 
    </div>