computed和watch的区别和理解

迈不过友情╰ 2022-09-02 11:59 250阅读 0赞

### 这里写目录标题 ###

*  1、计算属性：computed
 *   *   *  初步了解computed
         *  computed例子
         *  computed属性
 *  2、侦听属性:watch
 *   *   *  初步了解watch
         *  watch例子
         *  watch属性

# 1、计算属性：computed #

### 初步了解computed ###

*  1、支持缓存，只有依赖数据发生改变，才会重新进行计算
 *  2、不支持异步，computed是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果
 *  3、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
 *  4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个‘多对一’或者‘一对一’，一般用computed

### computed例子 ###

写一个简单例子

<div id="example">
      <p>Original message: "{
       { message }}"</p>
      <p>Computed reversed message: "{
       { reversedMessage }}"</p>
    </div>

var vm = new Vue({ 
      el: '#example',
      data: { 
        message: 'Hello'
      },
      computed: { 
        // 计算属性的 getter
        reversedMessage: function () { 
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })

渲染结果我们会发现得到  
Original message: “Hello”  
Computed reversed message: “olleH”

### computed属性 ###

如果computed属性的属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

computed: { 
      fullName: { 
        // getter
        get: function () { 
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) { 
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

现在运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

# 2、侦听属性:watch #

### 初步了解watch ###

*  1、不支持缓存，数据改变，直接会触发相应的操作；
 *  2、watch支持异步；
 *  3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
 *  4、当一个属性发生变化时，需要执行对应的操作，但是在初始化中，默认是不执行，只有变化的时候才执行；一对多；
 *  5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作

> 注意： deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

### watch例子 ###

写一个简单例子

<div id="demo">{
       { fullName }}</div>

var vm = new Vue({ 
      el: '#demo',
      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
        }
      }
    })

渲染结果我们会发现得到  
Foo Bar

### watch属性 ###

函数有三个参数：

*  handler：watch执行函数，同时有两个参数，第一个是改变后的值，第二个是改变前的值
 *  immediate：组件加载立即触发回调函数执行，但是在初始化中，默认是不执行，只有变化的时候才执行，使用immediate则初始化也会触发；
 *  deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的不需要这么做。

写法如下：

var vm = new Vue({ 
      el: '#root',
      data: { 
        firstName: { id: 1, name: 'Foo'}
      },
      watch: { 
        firstName: { 
          handler(newName, oldName) {       
          	// ... 
          },
        deep: true,
        immediate: true
        }
      } 
    })