Vue3 Setup中如何正确使用this和refs？

在Vue3 Setup中能像Vue2那样直接用this吗？

在Vue3的setup函数里,可不能像在Vue2中那样随心所欲地使用this哦，Vue3的setup函数是一个相对独立的函数式编程环境，它有自己的一套规则呢，在setup里面，this并不指向当前组件实例啦，要是你在setup里直接写this，那可是会报错的哟，比如说，你想在setup里通过this去访问data里的数据或者methods里的方法，那是行不通的。

那怎么办呢？其实啊，Vue3的setup函数会接收两个参数，一个是props，另一个就是context啦，通过context你可以获取到一些类似Vue2中this能获取到的东西呢，context.attrs能获取到组件的属性（类似Vue2中this.$attrs），context.slots能获取到插槽信息（类似Vue2中this.$slots），context.emit能用来触发自定义事件（类似Vue2中this.$emit），所以呀，虽然没有了传统意义上的this，但通过context也能很好地完成相关的操作啦。

Vue3 Setup里怎么使用refs呢？

在Vue3的setup函数中使用refs也是有讲究的哦,首先呢，要在模板里给需要获取引用的元素或者组件添加ref属性，就像在Vue2里那样，给个ref="myRef"之类的。

然后在setup函数里,要通过ref函数来创建对应的ref对象哦。

import { ref } from 'vue';
export default {
  setup() {
    const myRef = ref(null);
    // 这里的myRef就是用来获取模板里对应ref元素或组件的引用啦
    return {
      myRef
    };
  }
};

在上面的例子里,我们创建了一个叫myRef的ref对象，初始值设为null，等组件渲染完成后，这个myRef就会指向模板里设置了ref="myRef"的那个元素或者组件啦。

那怎么去使用这个获取到的引用呢？比如说你想获取一个input框的引用，然后在某个时刻去获取它的值或者设置它的焦点之类的，你可以在合适的时机，比如某个按钮的点击事件处理函数里（这个点击事件处理函数也是在setup里定义的哦），通过myRef.value来访问到input框的DOM元素或者组件实例啦，就像这样：

import { ref } from 'vue';
export default {
  setup() {
    const inputRef = ref(null);
    const handleClick = () => {
      if (inputRef.value) {
        // 这里假设是获取input框的值
        const inputValue = inputRef.value.value;
        console.log('input框的值是：', inputValue);
      }
    };
    return {
      inputRef,
      handleClick
    };
  }
};

在这个例子里,当点击按钮触发handleClick函数时，如果inputRef已经获取到了正确的引用（也就是input框已经渲染完成啦），那我们就能通过inputRef.value.value获取到input框的值啦。

所以呀,在Vue3的setup里使用refs，就是先创建ref对象，然后等组件渲染完成后通过ref对象的.value属性来访问对应的元素或者组件实例哦，是不是也挺简单的呀。

通过了解在Vue3 Setup中关于this和refs的这些用法，就能更顺畅地在Vue3项目里进行开发啦，可别再被它们搞迷糊咯。