vue监控表单用watch还是computed

Question

<template>
<div id="main">
    <form>
        <p>用户名<input type="text" v-model="form.name"></p>
        <p>年龄<input type="text" v-model="form.age"></p>
        <p>
            爱好<select name="like" v-model="form.like">
                <option value="0">请选择</option>
                <option value="1">篮球</option>
                 <option value="2">足球</option>
            </select>
        </p>

        <button v-if="isc">测试</button>
    </form>
</div>
</template>

<script>

export default {
  data () {
    return {
      form: {
          name:'',
          age:'',
          like:'0'
      },
      //isc:false
      
    }
  },
  watch:{
      /*
      
     form:{
         handler: function () {
            this.check()
        },
        deep: true
     }
     */
  },
  computed:{
      isc(){
         return this.form.name && this.form.age>20 && this.form.like!=='0' 
      }
  },
  methods:{
      check(){
        this.isc=(this.form.name && this.form.age>20 && this.form.like!=='0')
        
      }
  }
  
  

}
</script>

上面的监控表单 用watch 、computed哪个比较好呢

Answer 1

1.如果你的监听只是为了输出计算结果，建议使用 computed
2.如果你的监听涉及 $data 的变更，建议使用 watch, computed 容易造成死循环