Vue中Computed和Watch的用法及其区别

计算属性（computed）

我们都知道vue在模板中使用表达式非常便利，比如{ {message}}；其实vue是支持更复杂的逻辑的，比如{ {message+message1+message2}}，但vue建议我们使用一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

示例

如：a=1,b=2,c=3，计算a+b+c并展示到页面上

写法1（多表达式）：

 <div id="example">
      <p>{
   
   {a+b+c}}</p>
 </div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1,
    b:2,
    c:3
  }
})
</script>

写法2（计算属性）：

<div id="example">
    <p>{
   
   {d}}</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    a: 1,
    b:2,
    c:3
  },
  computed: {
    d: function () {
      return this.a + this.b+ this.c
    }
  }
})

</script>

比较一下

1.这两种写法都能够得到我们想要的结果；

2.第一种多表达式的写法毫无疑问会监控a、b、c这3个属性，跟随属性而变化，第二种计算属性d也是依赖于a、b、c，当这3个属性发生变化，d也会跟着更新。

3.这里仅仅是a+b+c这里简单的逻辑，所以看不出这两种有多大区别，一旦过多的逻辑运算会让模板变得复杂且难以维护，而且这种转化无法复用；用计算属性的话逻辑简单清晰、好维护且易复用。

当然method也能实现，对，你肯定也想到了

下面的实例是将计算属性和方法的使用放到一起来做比较

  <div id="example">
        <p>计算属性第1次:{
   
   {d}}</p>
        <p>计算属性第2次:{
   
   {d}}</p>
        <p>计算属性第3次:{
   
   {d}}</p>
        <p>计算属性第4次:{
   
   {d}}</p>
        <p>方法调用第1次:{
   
   {modthod_d()}}</p>
        <p>方法调用第2次:{
   
   {modthod_d()}}</p>
        <p>方法调用第3次:{
   
   {modthod_d()}}</p>
        <p>方法调用第4次:{
   
   {modthod_d()}}</p>
    </div>
<script>
var vm = new Vue({
  el: '#example',
  data: { 
    a:1,
    b:2,
    c:3
  },
  methods:{
    modthod_d:function(){
        console.log('method_d')
        return this.a + this.b+ this.c
    }
  },
  computed: {
    d: function () {
        console.log('computed_d')
      return this.a + this.b+ this.c
    }
  }
})

</script>

运行到浏览器中，看输出

对比一下

都能正确的调用，并且如果我们改变其中的依赖就会产生更新；
使用method：使用几次就执行相应的函数几次，所以method_d被打印了4次；
使用计算属性：因为有缓存，如果依赖的数据未发生变化，多次访问则函数只执行一次，所以computed_d仅仅打印了一次，因为第一次计算后就有缓存了，后续无需再计算了；
计算属性因为有缓存的存在，所以可以节省一些资源，性能肯定就有所提高了，故更建议使用计算属性。

计算属性的setter getter

一般情况下，我们只是使用了计算属性中的gettter属性（如上面的几个例子），但它是支持setter属性的，如下：

 <div id="example">
        <p>计算属性:{
   
   {d}}</p>
        <button @click="incre">set计算属性</button>
    </div>

<script>
var vm = new Vue({
  el: '#example',
  data: { 
    a:1,
    b:2,
    c:3,
    n:1
  },
  methods:{
    incre:function(){
        this.d=++this.n;
    }
  },
  computed: {
    d:{
       get:function () {
         console.log('computed_d')
         return this.a + this.b+ this.c
        },
        set:function(newVal){
            this.a=newVal;
        }

    } 
  }
})

页面效果

如上实例中的，我们给计算属性d写了set，就可以通过this.d的方式来进行想要的操作了。

监听属性（watch）

单个属性实例

<div id="example">
        <p>{
   
   {a}}</p>
        <button @click="mod_a">修改a</button>
    </div>
<script>
var vm = new Vue({
  el: '#example',
  data: { 
    a:1
  },
  methods:{
    mod_a:function(){
        this.a++;
    }
  },
  watch:{
    a:function(newVal,oldVal){
      console.log("新值："+newVal+" 旧值："+oldVal);
    }
  }
})

</script>

页面效果

对象监控实例（一个一个的属性监控）

  <div id="example">
        <p>{
   
   {person}}</p>
        <input v-model="person.name">
    </div>

<script>
var vm = new Vue({
  el: '#example',
  data: { 
    a:1,
    person:{
      name:'张三',
      age:30
    }
  },
  methods:{
    mod_a:function(){
        this.a++;
    }
  },
  watch:{
    'person.name':function(newVal,oldVal){
      console.log("新值："+newVal+" 旧值："+oldVal);
    }
  }
})

</script>

测试一下：

深度监控对象（就是不用每个属性都单独写监控，一次监控此对象的所有属性）

 <div id="example">
        <p>{
   
   {person}}</p>
        name:<input v-model="person.name"><br>
        age:<input v-model="person.age">
    </div>

<script>
var vm = new Vue({
  el: '#example',
  data: { 
    a:1,
    person:{
      name:'张三',
      age:30
    }
  },
  methods:{
    mod_a:function(){
        this.a++;
    }
  },
  watch:{
    person:{
       handler(newVal,oldVal) {
         console.log("新值："+JSON.stringify(newVal)+" 旧值："+JSON.stringify(oldVal));
      },
      deep: true
    }
  }
})

</script>

页面效果：

计算属性和属性监听的区别：

1.计算属性变量在computed中定义，属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。