vue中computed和watch的写法，以及区别

<template>
  <div class="print">
      <div style="color: red">
        <p class="gooe">初始数据--》{{hasOut}}</p>
        <p class="gooe" style="margin-top: 90px">watch监听到的数据----》<span style="color: rebeccapurple">{{watcher}}</span></p>
        <p class="gooe" style="margin-top: 90px">computed监听到的数据----》<span style="color: royalblue">{{gogo}}</span></p>
//这里gogo名字随意，不要加（）
      </div>
  </div>
</template>
<script>

  export default {
    name: 'print',
    data () {
      return {
        hasOut:0,
        watcher:0,
      }
    },
    mounted(){
      setTimeout(()=>{
        this.testPrint(0)
      },2000)
    },
    watch: {
      hasOut(val) {
        if(val<10000){
            this.watcher=val
            this.testPrint()
           console.log(this.hasOut,'watch监听')

        }
      }
    },
    computed:{
　　　　//写法跟method里面一样。这个名字随意取
      gogo:function(){
           return this.hasOut
      }
    },

    methods:{
       testPrint(){
          console.log(this.hasOut,'打印出来++++++++++++')
          setTimeout(()=>{
              this.hasOut++
            },1000)
      },
    },
  }
</script>

 

写法如上下次直接copy

/***************************************************************************************************************************************************/

如果是对象呢，比如监听对象其中的某一个属性变化呢

return {
  hasOut:0,
  watcher:0,
  test:{
      num:0,
      val:100
  }
}
监听对象单一属性变化computed写法

computed:{
testText () {
    return this.test.num
  }
},

监听对象单一属性变化watch写法

  watch: {

//      如果只是对象的某一个属性怎么写，computed又怎么写
      'test.num':{
        deep: true,//进行深度监听，当对象中的属性发生变化时，会调用 handler 方法。
        handler(newVal,oldVal){
//          console.log(newVal,oldVal,'做你想做的事情')
        }
      },
}
页面上写法，特别注意testText 不加括号

<span>{{test.num}}我是watch</span>
<span>{{testText}}我是计算属性</span>

如果是对象呢，比如监听对象其中的全部属性变化呢

watch：{

　　

test:{
  deep: true,
  handler: function (newVal,oldVal){
    console.log( newVal.num,oldVal.num,'新旧对比，但是打印出来确实一样的WHY');
  }
}

}
这么写的话打印出来是一样的，

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听test这个属性它的引用的变化，我们只有给test赋值的时候它才会监听到,比如下面添加一个方法重新赋值，

methods:{
  numClick(){
    this.test = {
      num: 100,
      val:150
    }
  },
}

console.log( newVal.num,oldVal.num,'新旧对比，但是打印出来确实一样的WHY');这个打印出来的东西才是不一样的

其实打印出来不变的根本就是：指向了同一个地址（因为对象指向的是同一地址）；你重新赋值的话，他的地址变了，所以打印不同

a={
　　b:1
}
this.a={
　　b:5
}
这里重新赋值了，虽然这个对象都有b属性，但是地址不同了




区别：********（watch耗性能，computed会缓存，一般用computed，性能考虑）

计算属性computed和侦听属性watch（说实话，现在都还搞啥懂，只要你有变化的我都用watch）

计算属性有缓存，如果你不需要缓存的话，就用方法代替吧，反正方法你用时候都会去调用的，

计算属性的最大特点是它的结果会被vue.js缓存处理，依赖项不变化的话，就直接使用上一次的计算结果。

 

其实计算属性和watcher的区别主要在于适用场景的不同，这从他们的命名就很容易的看出来：
当你需要一个值，一个属性，它是变动的且逻辑比较复杂，写在模板里不直观，或者你需要多次使用这个值，就用计算属性；
当你需要监控某个变量，当其改变后进行某些操作，就用watch

转载于:https://www.cnblogs.com/myfirstboke/p/10251181.html