Vue.js中的watch属性和computed属性有哪些注意事

在Vue.js中，watch属性和computed属性都是常用的响应式属性，但它们有不同的用途和注意事项。

1. watch属性

watch属性用来监听某个数据的变化，并在数据变化时执行一些操作。在使用watch属性时，需要注意以下几点：

• 不要在watch属性中修改监听的数据，否则会导致死循环。
• 如果监听的数据是对象或数组，可以使用deep选项来深度监听数据的变化。
• 可以使用immediate选项来在组件创建时立即执行watch函数。

// 监听message数据的变化
watch: {
  message (newValue, oldValue) {
    // 处理数据变化
  }
}

2. computed属性

computed属性用来计算一个新的响应式属性，并在计算结果发生变化时更新视图。在使用computed属性时，需要注意以下几点：

• computed属性会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。
• 不要在computed属性中修改依赖的数据，否则会导致计算结果不准确。
• computed属性可以使用get和set函数来实现计算属性的读写操作。

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

总之，在使用watch属性和computed属性时，需要注意不要修改监听的数据或依赖的数据，以避免出现意外的问题。同时，在处理复杂的响应式逻辑时，可以使用watch属性和computed属性来实现数据监听和计算。