data,methods,computed,watch之间的用法和区别

data,methods,computed,watch都是管理组件中的数据和行为的关键属性，它们之间的用法和区别如下所示：

1、data

• 用法：data 是用于定义组件中的初始数据的地方。它是一个函数或对象，返回组件中需要响应式跟踪的数据对象。
• 区别：在 data 中定义的属性会被 Vue 实例进行响应式处理，当这些属性发生变化时，相关联的视图会进行更新。

data() {
  return {
    message: 'Hello!',
    count: 0,
  };
},

2、methods

• 用法：methods 用于定义组件中的方法，可以在模板或其他方法中调用这些方法。
• 区别：Methods 是用于存储触发事件、执行逻辑操作或处理数据的函数。它们包含应用程序逻辑和方法，并且在需要时可以在模板中调用。

• methods: {
    increment() {
      this.count++;
    },
    greet() {
      alert('Hello!');
    },
  },
  

  3、computed

• 用法：computed 是用于派生或计算基于现有数据的属性的地方。它是一个计算属性，根据其所依赖的数据动态生成新的属性值。
• 区别：Computed 属性的值是基于其依赖的响应式数据动态计算得出的，并且会进行缓存，只有在依赖的响应式数据发生变化时才会重新计算。

• computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  

4、watch

• 用法：watch 用于监听数据的变化，当指定的数据变化时，执行相应的回调函数。
• 区别：与 computed 不同，watch 允许您观察并对数据的变化做出响应，而不是基于数据的值计算属性。它提供了更通用的方式来响应数据变化，可以执行异步操作或较复杂的逻辑。

• //Vue2中watch属性的使用
  // 简单写法
  watch:{
      // 函数接受两个参数，用于监视指定数据变化
      // -newValue:数据变化后的结果
      // -oldValue:数据变化前的结果
      sum(newValue, oldValue){
          console.log('求和的值变化了',"变化后的值是"+newValue, '变化前的值是'+oldValue);
      }
  },
  
  
  //完整写法
  watch:{
    sum:{
        // 深度监视，因为watch默认只是浅层监视
        depp:true,
        // 在初始化完成之后就触发监听
        immediate:true,
        // 监视属性的回调
        handler(newValue, oldValue){
            console.log('求和的值变化了',"变化后的值是"+newValue, '变化前的值是'+oldValue);
        }
    }
  },
  

• //Vue3中watch使用
  <template>
    <h2>我是TestA组件</h2>  
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点击按钮sum +1</button>
  </template>
  
  <script>
  import { ref, watch } from 'vue'
  export default {
      name:'TestA',
      setup(){
          // 数据
          let sum = ref(0)
  
          //监视属性
          watch(sum, (newValue, oldValue)=>{
              // 回调函数形式
              console.log('求和的值变了', '变化后的值是'+newValue, '变化前的值是'+oldValue);
          })
          //返回对象
          return{
              sum
          }
          
      }
  }
  </script>
  
  <style>
  
  </style>
  

• 另外：get 和 set 是 JavaScript 中的属性访问器方法，用于获取和设置对象的属性值。这两个方法通常与对象的属性一起使用，允许你在读取或设置属性值时执行自定义的逻辑。

• get方法：获取对象的属性值-只读

  const obj = {
    _value: 0,
    get value() {
      console.log("Getting the value");
      return this._value;
    }
  };
  
  console.log(obj.value); // 打印 "Getting the value"，然后输出 0
  

• set方法：设置对象的属性值-可修改

  const obj = {
    _value: 0,
    set value(newValue) {
      console.log("Setting the value to", newValue);
      this._value = newValue;
    }
  };
  
  obj.value = 42; // 打印 "Setting the value to 42"
  console.log(obj._value); // 输出 42
  

  一般来说，可以使用get方法计算属性值，根据对象的其他属性动态生成值；也可以通过set添加一些逻辑，确保设置的值符合特定条件