深入浅析Vue中的 computed 和 watch

computed

计算属性：通过属性计算得来的属性

    计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值

a:<input type=\"number\" v-model.number=\"a\" />
 b:<input type=\"number\" v-model.number=\"b\" />
 <!--c:<input type=\"number\" v-model.number=\"c\" />-->
 总和：{{sum()}}
 总和：{{count}}
 平均值：{{avg}}
 <p v-once>单价：{{price}}</p>
 <p>数量：<input type=\"number\" v-model.number=\"count\"/></p>
 <p>总价：{{sum}}</p>
 <p>运费：{{free}}</p>
 <p>应付：{{pay}}</p>
  data: {
      a: \'\',
      b:\'\',
      c:\'\',
      price: 28.8,
      count: \'\',
      free: 10
  },
  computed: {
    count(){
      console.log(\'计算属性触发了\');
        return this.a+this.b;
    },
    avg(){
      return this.count/2;
    },
    sum(){
      return this.price * this.count;
    },
   pay(){
    if(this.count>0){
      if(this.sum>=299){
        return this.sum;
    }else{
      return this.sum + this.free;
    }
     }else{
        return 0;
    }
    }
   }

watch

属性变化，就会触发监听的函数。

监听属性变化，一般是用于跟数据无关的业务逻辑操作。

计算属性，适用于属性发生变化后，需要计算得到新的数据。        

<div id=\"app\">
      a: <input type=\"number\" v-model.number=\"a\" /><br />
      b: <input type=\"number\" v-model.number=\"b\" /><br />
      总和：{{count}}
      <br /><br /><br />
      name: <input type=\"text\" v-model=\"obj.name\" /><br />
      age: <input type=\"text\" v-model.number=\"obj.age\" /><br />
    </div>
    <script src=\"vue.js\"></script>
    <script>
      var vm = new Vue({
        el: \'#app\',
        data: {
          a: \'\',
          b: \'\',
          count: \'\',
          obj: {
            name: \'\',
            age: \'\'
          }
        },
        watch: {
          a(newVal, oldVal){
            console.log(\'触发了a-watch\');
            this.count = this.a + this.b;
          },
          b(newVal){
            console.log(\'触发了b-watch\');
            this.count = this.a + this.b;
          },
//          obj(newVal, oldVal){
//            console.log(\'触发了obj的监听\');
//          }
//
          obj: {
            //监听对象中的每一个值
            handler(newVal, oldVal){
              console.log(\'触发了obj的监听\');
            },
            deep: true//深度监听
          },
          //监听对象中的某个属性
          \'obj.name\': function(){
            console.log(\'触发了obj.name的监听\');
          }
        }
      })
    </script>

watch 也可以在methods里面进行监听配置

<div id=\"app\">
      a: <input type=\"number\" v-model.number=\"a\" /><br />
      b: <input type=\"number\" v-model.number=\"b\" /><br />
      总和：{{count}}
      <br /><br /><br />
      name: <input type=\"text\" v-model=\"obj.name\" /><br />
      age: <input type=\"text\" v-model.number=\"obj.age\" /><br />
      <button @click=\"btnAction()\">开始监听</button>
    </div>
    <script src=\"vue.js\"></script>
    <script>
      var vm = new Vue({
        el: \'#app\',
        data: {
          a: \'\',
          b: \'\',
          count: \'\',
          obj: {
            name: \'\',
            age: \'\'
          }
        },
        methods: {
          btnAction(){
            this.$watch(\'a\', (newVal, oldval)=>{
              console.log(\'监听到了a的变化\');
              console.log(newVal, oldval);
            })
            this.$watch(\'obj.name\', (newVal, oldval)=>{
              console.log(\'监听到了obj.name的变化\');
              console.log(newVal, oldval);
            })
            this.$watch(\'obj\', (newVal, oldval)=>{
              console.log(\'监听到了obj的变化\');
              console.log(newVal, oldval);
            }, {
              deep: true
            })
          }
        }
      })
//      vm.$watch(\'a\', (newVal, oldval)=>{
//        console.log(\'监听到了a的变化\');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch(\'obj.name\', (newVal, oldval)=>{
//        console.log(\'监听到了obj.name的变化\');
//        console.log(newVal, oldval);
//      })
//      
//      vm.$watch(\'obj\', (newVal, oldval)=>{
//        console.log(\'监听到了obj的变化\');
//        console.log(newVal, oldval);
//      }, {
//        deep: true
//      })
    </script>

下面在看下computed 和 watch

  都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性，而不是命令是的watch回调。

/*html:
  我们要实现 第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化
  */
<div id=\"myDiv\">
  <input type=\"text\" v-model=\"firstName\">
  <input type=\"text\" v-model=\"lastName\">
  <input type=\"text\" v-model=\"fullName\">
</div>
<!--js: 用watch方法来实现-->
//将需要watch的属性定义在watch中，当属性变化氏就会动态的执行watch中的操作，并动态的可以更新到dom中 
 new Vue({
 el: \'#myDiv\',
 data: {
  firstName: \'Foo\',
  lastName: \'Bar\',
  fullName: \'Foo Bar\'
 },
 watch: {
  firstName: function (val) {
   this.fullName = val + \' \' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + \' \' + val
  }
 }
})
<!--js: 利用computed 来写-->
  //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
  //这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
 new Vue({
    el:\"#myDiv\",
      data:{
        firstName:\"Den\",
        lastName:\"wang\",
      },
      computed:{
        fullName:function(){
          return this.firstName + \" \" +this.lastName;
        }
      }
  })

  很容易看出 computed 在实现上边的效果时，是更简单的。

以上所述是小编给大家介绍的Vue中的 computed 和 watch，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！