杂记之computed和watch

computed（计算属性）

computed 是 Vue.js 中一个计算属性的 API，它能够帮助我们定义计算属性和缓存计算结果。

• computed 可以定义函数式的计算属性，也可以定义对象式的计算属性。例如：

  // 对象式的计算属性
  computed: {   
  	fullName() {
       return this.firstName + ' ' + this.lastName   
       } }

   // 函数式的计算属性 
   computed: {   
   fullName: function() {
       return this.firstName + ' ' + this.lastName   
       } }

• computed 的计算属性可以依赖于一个或多个响应式数据，只有当依赖的数据发生变化时，才会触发计算属性重新计算值。例如：

data: {   
firstName: 'John',   lastName: 'Doe' 
},
computed: {   
	fullName() {
       return this.firstName + ' ' + this.lastName   
       },   
    age() {
       return new Date().getFullYear() - this.birthYear  
       } }, 
watch: {   
	birthYear: function(val) {
       // birthYear 改变时，age 会重新计算
       this.age = new Date().getFullYear() - val   
       } }

• computed 的计算属性会缓存计算结果，有当依赖的数据发生变化时，才会重新计算值，否则会接返回缓的值，提高了性能和效率。
• computed 的计算属性可以设置 get 和 set 方法，用于获取和设置计算属性的值。例如：

computed: {   
	fullName: {
       get() {
         return this.firstName + ' ' + this.lastName
       },
       set(value) {
         let names = value.split(' ')
         this.firstName = names[0]
         this.lastName = names[1]
       }   
   	} 
}

• computed 的计算属性可以与 watch 监听器配合使用，实现更加复杂的数据操作。例如：

data: {  
   firstName: 'John',   lastName: 'Doe',   fullName: '' 
   }, 
computed: {  
   fullName() {
       return this.firstName + ' ' + this.lastName   
       } }, 
watch: {   
	fullName: function(val) {
       console.log('Full name changed to:', val)   
    } } 

在上面的代码示例中，我们定义了一个 fullName 计算属性，它依赖于 firstName 和 lastName 两个响应式数据，并返回一个拼接后的字符串。在 watch监听器中，我们监听了 fullName 计算属性的变化，并输出了变化后的值。

通过 computed 和 watch 的组合，我们可以实现更加复杂的数据操作，例如： watch 监听器中更新其他数据，或者在 computed 计算属性中对数据进行过滤或排序等操作，从而实现更加灵活和高效的数据处理方式。

watch（监视属性）

在 Vue.js 中，watch 的格式通常为一个对象，对象的属性为要监听的属性名称，值为一个回调函数。例如：

watch: {
  // 监听 message 属性
  message: function (newValue, oldValue) {
    console.log('message 属性发生变化了，新值为：', newValue)
  }
}

在上述代码中，我们定义了一个 watch 属性，用于监听 message 属性的变化。当 message 属性发生变化时，回调函数会被执行，同时会传入两个参数 newValue 和 oldValue，分别表示变化后的值和变化前的值。

除了使用简单的函数形式，watch 还支持使用字符串形式和对象形式进行定义和配置。其中，字符串形式可以用来监听方法名，对象形式可以用来配置更多选项，例如深度监听、立即执行等。例如：

// 字符串形式
watch: {
  'message': 'handleMessageChange'
}

// 对象形式
watch: {
  // 监听 message 属性
  message: {
    handler: function (newValue, oldValue) {
      console.log('message 属性发生变化了，新值为：', newValue)
    },
    deep: true
  }
}

需要注意的是，当 watch 监听的属性是一个对象或数组时，需要设置 deep 选项为 true 才能深度监听内部属性的变化。

computed 和 watch 的区别

computed 和 watch 都是 Vue 中用来响应数据变化并更新视图的机制，二者的区别如下：

• computed 是计算属性，它会根据依赖的数据属性进行计算，并缓存计算结果，只有依赖的数据属性发生变化时才会重新计算；而 watch
  是监听属性，它会在监听的数据属性发生变化时立即执行回调函数。
• computed 是声明式的，它的值是通过计算得到的，而不是手动赋值的；而 watch 是命令式的，它需要手动编写回调函数来处理数据变化。
• computed 通常用于计算一个值，而 watch 通常用于监听一个值的变化并进行相应的操作。

因此，当需要计算一个值并在模板中使用时，应该使用 computed；当需要监听一个数据属性的变化并进行相应的操作时，应该使用 watch。