Vue3弱化this

在Vue3中，setup语法糖和组合式API的引入，的确改变了Vue的开发模式，使得this的使用变得不再必要或推荐。this通常在Vue2中用于访问组件实例的属性和方法，如data、props、computed、methods等等。而在Vue3中，这些内容的获取和使用方式发生了一些变化。

1. 访问 data

Vue2 使用 this 访问 data

在Vue2中，你可以通过this来访问data中的响应式数据：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Vue3 中的 ref 和 reactive

在Vue3中，setup语法中使用ref或reactive来定义响应式数据，然后直接在setup返回值中暴露这些数据供模板使用。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
// 定义响应式数据
import { ref } from 'vue';

const count = ref(0);

// 定义方法
function increment() {
  count.value++;
}
</script>

解释：

• Vue3中没有this的概念，你可以直接在setup中定义并操作响应式数据，并在模板中直接使用这些数据。

2. 访问 props

Vue2 使用 this 访问 props

在Vue2中，props可以通过this来访问：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
};
</script>

Vue3 中的 defineProps

在Vue3中，使用defineProps函数来获取props，并且直接在setup中使用，而不需要this。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
// 获取 props
const props = defineProps({
  title: String
});
</script>

解释：

• 在Vue3中，props通过defineProps函数获取，并且可以直接在setup中使用，而无需通过this访问。

3. 访问 computed

Vue2 使用 this 访问 computed

在Vue2中，计算属性通过this来访问：

<template>
  <div>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 2
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
};
</script>

Vue3 中的 computed

在Vue3中，使用computed函数来定义计算属性，并在模板中直接使用。

<template>
  <div>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script setup>
// 使用 computed 定义计算属性
import { ref, computed } from 'vue';

const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

解释：

• 在Vue3中，计算属性不再需要通过this访问，而是直接通过computed函数定义，并在模板中使用。

4. 访问 methods

Vue2 使用 this 访问 methods

在Vue2中，方法可以通过this来调用组件中的其他属性或方法：

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Vue3 中的 setup 函数

在Vue3中，方法直接在setup中定义，并且可以直接操作setup中的数据。

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
// 定义响应式数据和方法
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

解释：

• 在Vue3中，方法直接在setup中定义，并可以操作setup中定义的响应式数据，无需通过this来访问。

5. 访问 watch

Vue2 使用 this 访问 watch

在Vue2中，watch用于监听响应式数据的变化，并通过this访问这些数据：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>

Vue3 中的 watch

在Vue3中，watch函数可以直接在setup中使用，并且不需要this。

<script setup>
// 定义响应式数据并使用 watch 监听
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

解释：

• 在Vue3中，watch函数直接在setup中使用，无需通过this访问数据。

6. 访问生命周期钩子

Vue2 使用 this 访问生命周期钩子

在Vue2中，生命周期钩子如created、mounted等，通过this访问组件实例中的属性和方法。

<template>
  <div>Check the console for lifecycle logs.</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('Component created, count is:', this.count);
  },
  mounted() {
    console.log('Component mounted');
  }
};
</script>

Vue3 中的生命周期钩子

在Vue3中，使用onMounted、onCreated等函数来注册生命周期钩子，不需要this访问组件实例。

<template>
  <div>Check the console for lifecycle logs.</div>
</template>

<script setup>
// 定义响应式数据和使用生命周期钩子
import { ref, onMounted, onCreated } from 'vue';

const count = ref(0);

onCreated(() => {
  console.log('Component created, count is:', count.value);
});

onMounted(() => {
  console.log('Component mounted');
});
</script>

解释：

• 在Vue3中，生命周期钩子使用特定的函数，如onMounted，这些函数直接操作setup中的数据，无需this。

总结

在Vue3中，this的概念被大大削弱，取而代之的是直接在setup函数中定义和使用响应式数据、计算属性、方法、props、watch等。这不仅简化了代码结构，也提升了可读性和维护性，同时消除了this绑定问题，让开发者更专注于逻辑实现。