computed（计算属性）、watch（侦听器）和methods

• 1、computed（计算属性）、watch（侦听器）和methods的区别：

（1）coputed和watch是自动调用相关函数去实现数据的变动，当一个数据发生变动，所有依赖这个数据的相关数据都会发生变动
（2）methods是定义函数，需要手动调用

• 2、computed和watch的区别

computed适用于一个数据受多个数据影响，自动监听数据的变动，watch适用于一个数据影响多个数据，没有computed那么‘自动’

• 3、computed的使用

<template>
  <div id=''>
    <div class="computed">
      <p>
        <input type="text" v-model="num" placeholder="数字">
      </p>
      <p>+</p>
      <p>
        <input type="text" v-model="nums" placeholder="数字">
      </p>
      <p>=</p>
      <p>{{count}}</p>
    </div>
  </div>
</template>
<script>
export default {
 data() {
   return {
     num:0,
     nums:0
   }
 },
 computed: {
   count(){
     return parseInt(this.num)+parseInt(this.nums)
   }
 },
}

• watch的使用

<template>
  <div id=''>
    <div class="watch">
      <p><input type="text" v-model="name" placeholder="输入姓名"></p>
      <p>{{nameOne}}</p>
      <p>{{nameTwo}}</p>
    </div>
  </div>
</template>

<script>
export default {
 data() {
   return {
     name:"",
     nameOne:"",
     nameTwo:""
   }
 },
 watch: {
   name(newName){
     if(newName==""){
       this.nameOne="";
       this.nameTwo=""
       return;
     }
     this.nameOne=newName+"好帅";
     this.nameTwo=newName+"好棒啊"
   }
 },
}