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

怼烎@ 2021-07-24 12:10 547阅读 0赞

## ** 计算属性（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>

**运行到浏览器中，看输出**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 对比一下 ###

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

### 计算属性的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;
            }
    
        } 
      }
    })

**页面效果**

![20210316185617362.gif][]

**如上实例中的，我们给计算属性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>

**页面效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

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

<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>

**测试一下：**

![20210316200259931.gif][]

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

<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>

**页面效果：**

![20210316201254994.gif][]

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

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

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

### **这两者选择和使用没有对错之分，只是希望能更好的使用，而不是滥用，我个人更喜欢用计算属性。** ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/4bb1fd44436345d680a3fcbefb338b73.png
[20210316185617362.gif]: /images/20210724/50d32161b1a44ba48c1c00c478e30aa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/be37d57f8ae24b3ab826b5b61abc9040.png
[20210316200259931.gif]: /images/20210724/51302cfd0a4e488db041f21ae3d4110c.png
[20210316201254994.gif]: /images/20210724/1e43f8162a6b46a7b0ddb0dd6545fad0.png