Vue箭头函数与普通函数的正确使用及说明

<script>
export default {
  data() {
    return { name: "Vue" };
  },
  created() {
    // 普通函数：由this（组件实例）调用，this指向实例
    const normalFunc = function() {
      console.log(this.name); // 输出"Vue"
    };
    normalFunc.call(this); // 主动绑定this为组件实例

    // 箭头函数：继承外层created的this（组件实例）
    const arrowFunc = () => {
      console.log(this.name); // 输出"Vue"
    };
    arrowFunc(); // 无需绑定，this已固定

    // 注意：如果箭头函数外层是普通函数，this会变
    const outerFunc = function() {
      const innerArrow = () => {
        console.log(this.name); // 这里的this是outerFunc的this（若未绑定则为window）
      };
      innerArrow();
    };
    outerFunc(); // 输出undefined（因为outerFunc的this是window）
  }
};
</script>

<template>
  <button @click="changeName">修改名称</button>
  <p>{{ name }}</p>
</template>

<script>
export default {
  data() {
    return { name: "初始名称" };
  },
  methods: {
    // 错误：箭头函数的this不是组件实例
    changeName: () => {
      this.name = "修改后名称"; // 报错：Cannot set property 'name' of undefined
    }
  }
};
</script>

methods: {
  // 普通函数：this指向组件实例
  changeName() {
    this.name = "修改后名称"; // 正常生效
  }
}

computed: {
  fullName() {
    // 普通函数：this能拿到firstName和lastName
    return `${this.firstName} ${this.lastName}`;
  }
}

watch: {
  // 监听name变化，更新日志
  name(newVal, oldVal) {
    this.log = `名称从${oldVal}变成${newVal}`; // this指向实例，正常更新
  }
}

// Vue 2 / Vue 3 Options API
export default {
  mounted() {
    this.initData(); // 普通函数：this指向实例，调用methods方法
  },
  methods: {
    initData() {
      // 初始化逻辑
    }
  }
};

methods: {
  handleList() {
    const list = [1, 2, 3];

    // 普通函数：需要手动保存this
    const normalResult = list.map(function(item) {
      return item * this.multiplier; // 这里的this是window，需绑定
    }.bind(this)); // 绑定this为组件实例

    // 箭头函数：自动继承外层this（handleList的this是实例）
    const arrowResult = list.map(item => {
      return item * this.multiplier; // 直接使用实例的multiplier
    });

    console.log(arrowResult); // 正确输出：[2,4,6]（若multiplier=2）
  },
  data() {
    return { multiplier: 2 };
  }
}

methods: {
  fetchUser() {
    // 外层this是组件实例
    axios.get("/api/user")
      .then(res => {
        // 箭头函数：this指向实例，更新data
        this.userInfo = res.data;
      })
      .catch(err => {
        // 箭头函数：this指向实例，更新错误信息
        this.errorMsg = err.message;
      });
  }
}

<script setup>
import { ref } from "vue";
const count = ref(0);

// 箭头函数：无需考虑this，直接操作ref
const increment = () => {
  count.value++; // 正确修改ref值
};

// 异步请求示例
const fetchData = () => {
  axios.get("/api/data")
    .then(res => {
      // 直接操作ref或reactive数据
    });
};
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
// 错误：setup中普通函数的this是undefined
const wrongFunc = function() {
  console.log(this.count); // 报错：Cannot read property 'count' of undefined
};
</script>