vue中computed和watched的区别

computed

computed在vue中起到计算属性作用。

<p>firstName: <input type="text" v-model="firstName"></p>
<p>lastName: <input type="text" v-model="lastName"></p>
<p>name: {{name}}</p>

data() {
    return {
        firstName: '',
        lastName: ''
    };
},
 
computed: {
    name: {
        set() {
            //set值触发
        },

        get() {
            return this.lastName + ' ' + this.firstName
        }
    }
}

// and

computed: {
    name() {
        return this.lastName + ' ' + this.firstName
    }
}

watched

watch在vue起到观察监听的作用

<template>
  <div>
      //我们在getFullName方法中改变了name的值，触发watch打印'invoked watch'
      <p>firstName: <input type="text" v-model="firstName" @input="getFullName"></p>
      <p>lastName: <input type="text" v-model="lastName" @input="getFullName"></p>
      <p>name: {{name}}</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '',
            lastName: '',
            name: ''
        };
    },
    
    watch: {
        name(newD, oldD) {    //newD最新的值，oldD改变之前的值
            console.log('invoked watch');
        }
    },
    
    methods: {
        getFullName() {
            this.name = this.lastName + this.firstName
        }
    }
};
</script>