vue3为什么没有this了 • Worktile社区

worktile

Worktile官方账号

Vue 3为什么没有this了？

Vue 3.x版本中，取消了以前版本中组件内的实例属性和方法访问方式中的this关键字。这是因为Vue 3采用了一种新的响应式系统 — Composition API，因此不再需要使用this来访问组件的内部属性和方法。

一、为什么取消this关键字？

解决作用域混淆问题

在Vue 2.x版本中，this指向的是组件的实例，当在嵌套的回调函数或异步函数中使用this时，常常会遇到作用域混淆的问题，导致无法正确访问组件实例的属性和方法。为了解决这个问题，需要通过bind、箭头函数等方式来绑定作用域，这增加了代码的复杂度和可读性。

提高可维护性和代码重用性

Vue 3采用Composition API，将组件内的逻辑封装成一个个的函数，通过引入reactive、ref等函数，将数据转换为响应式数据，可以更方便地定义和管理组件的状态和逻辑。通过分离逻辑代码，可以提高代码的可维护性和代码重用性。

二、Composition API的使用

Vue 3中的Composition API基于函数而非对象，可以在setup函数中直接返回一个对象，对象中包含了需要使用的属性和方法。

reactive和ref

Vue 3中提供了reactive和ref函数来创建响应式数据。reactive可以将一个普通的JavaScript对象转换为响应式对象，ref可以将一个普通的数据转换为响应式数据。

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: ref(0),
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment,
    };
  },
};

生命周期钩子

在Vue 3中，可以使用onBeforeMount、onMounted、onBeforeUnmount等函数来替代以前版本中的生命周期钩子函数。这些函数可以在setup函数中直接使用。

import { onBeforeMount, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before Mount');
    });

    onMounted(() => {
      console.log('Mounted');
    });

    onBeforeUnmount(() => {
      console.log('Before Unmount');
    });
  },
};

三、总结

Vue 3取消了使用this来访问组件实例的属性和方法，采用了Composition API来提高代码的可维护性和代码重用性。Composition API将组件内的逻辑封装成函数，通过reactive和ref函数可以创建响应式数据。此外，还可以使用onBeforeMount、onMounted等函数替代生命周期钩子函数。这使得Vue 3的代码更加简洁、清晰，并解决了以前版本中的作用域混淆问题。从长远来看，这样的改变也有助于推动Vue生态系统的发展和更新。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

简化代码：在Vue 3中，通过 composition API 来编写组件，这意味着可以使用函数来定义组件的逻辑，不再需要使用 this 来访问组件实例中的属性和方法。相比于Vue 2中使用选项API定义组件的方式，composition API更加灵活和直观，能够更好地组织和重用代码。
解决命名冲突：在Vue 2中，组件内部的 data、computed、methods 等属性都被挂载在组件实例对象的 this 上，当组件内部定义了与 Vue 实例属性同名的属性时，可能会导致命名冲突。而在Vue 3中，由于使用了composition API，不再使用this来访问组件实例的属性和方法，因此可以避免这种命名冲突的问题。
更好的TypeScript支持：Vue 3在编写组件时更加友好地支持TypeScript，使用composition API可以更好地推断和类型检查组件内部的属性和方法，能够提供更好的开发体验和代码质量。
清晰的数据来源：在Vue 3中，可以使用 reactive 函数将任意对象转换为响应式对象，通过 ref 函数包裹基本类型的数据，以及通过 provide 和 inject 在父子组件之间传递数据。这些功能使得数据来源更加清晰和明确，不再需要通过 this 来访问组件实例的属性。
更好的性能：由于不再需要通过 this 来访问组件实例的属性和方法，Vue 3 的编译器可以进行更好的优化，生成更高效的渲染代码，进而提升应用的性能。此外，去除了对于Proxy的嵌套使用，也能减少一定的性能开销。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue3之所以没有this，是因为在Vue3中采用了Composition API来替代Vue2中的Options API。Composition API是一种更灵活且易于维护的编码方式，可以将组件中的逻辑按功能进行组合。在Composition API中，可以使用ref和reactive来定义响应式数据，并使用setup函数来定义组件的逻辑。

下面我将从几个方面来详细说明Vue3中没有this的原因及如何使用Composition API来替代this的用法。

1. Vue3中的Composition API简介

Composition API是Vue3中的一种新的API，旨在解决Vue2中Options API的一些限制。使用Composition API，可以将组件的逻辑按照功能进行组合，而不是按照选项进行组合。这种方式更加灵活和可维护。

2. Composition API中的ref和reactive

在Vue3中，使用ref和reactive来定义响应式数据。ref用于定义单个的响应式数据，而reactive则用于定义包含多个属性的响应式对象。

import { ref, reactive } from 'vue';

// 定义单个的响应式数据
const count = ref(0);

// 定义响应式对象
const userdata = reactive({
   name: '张三',
   age: 18,
   address: '北京'
});

3. Composition API中的setup函数

在Composition API中，使用setup函数来定义组件的逻辑。setup函数会在组件初始化的时候被调用。

import { ref, reactive, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    // 在组件挂载后执行的函数
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 返回需要暴露给模板使用的数据和方法
    return {
      count
    };
  }
}

4. 使用ref替代this.$data

在Vue2中，可以使用this.$data来访问组件实例的数据。而在Vue3中，可以使用ref来替代。

import { ref } from 'vue';

export default {
  setup() {
    const name = ref('张三');
    
    return {
      name
    };
  }
}

5. 使用reactive替代this.$props和this.$options

在Vue2中，可以使用this.$props来访问组件实例的属性，使用this.$options来访问组件的选项。而在Vue3中，可以使用reactive来替代。

import { reactive } from 'vue';

export default {
  props: ['title'],
  
  setup(props) {
    const info = reactive({
      title: props.title
    });
    
    return {
      info
    };
  }
}

6. 使用setup函数替代this.$emit

在Vue2中，可以使用this.$emit来触发组件实例的自定义事件。而在Vue3中，可以使用setup函数来替代。

import { reactive } from 'vue';

export default {
  setup(_, context) {
    const info = reactive({
      title: 'Hello Vue3'
    });
    
    const handleClick = () => {
      context.emit('change', info.title);
    };
    
    return {
      info,
      handleClick
    };
  }
}

以上就是为什么Vue3没有this的原因，并且介绍了在Vue3中使用Composition API来替代this的用法。通过使用Composition API，我们可以更灵活地组织组件的逻辑，并且提高代码的可维护性。

1年前 0条评论