Ref操作Dom在Vue2.x和Vue3.x的不同点有哪些

或者
dd

// $refs
showManagerModal () {
  this.$refs.avaUserTreeSelect.showModal(this.form.managers)
  console.log(this.$refs.user.text)
},

//普通Dom

import { ref } from 'vue';
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);

也许这里有人疑问，为什么声明了一个和template的ref中同名的常量变量就绑定了对应的dom? 在这里再补充说明一下：

• Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。而相应式的变量都是通过在setup()方法中return {写入需要在模版中使用的变量或方法}

• 在 3.0.0-beta.21 版本中增加了

  子组件ExchangeValidModalVue.vue

  
  
  const visibleExchange = ref(false);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  });
  watch(
    () => props.visible,
    (cur, pre) => {
      visibleExchange.value = cur;
      if (cur) {
        firstTag.value = 1;
      }
    },
  );
  watch(
    () => visibleExchange.value,
    (cur, pre) => {
      emits('update:visible', cur);
    },
  );
  

  从代码里面我们就可以发现通过用父子组件单向传递的方式去实现一个组件的显示和隐藏功能，我们需要如此费劲地声明多个变量，还要做两次监听，万一后面不止一个这样的参数进行传递，那么代码量可想而知，而且也不易维护。

  其实显示和隐藏的功能可以直接在内部中进行值的响应即可，并不需要在父级别中操作，如下将上面代码改变一下：

  子组件ExchangeValidModalVue.vue

  
  
  import { ref } from 'vue';
  const visible = ref(false);
  const emits = defineEmits(['call']);
  const onEmitSelectSuperiod = () => { // 省略
    emits('call');
  }；
  const onOpen = () => {
    visible.value = true;
  };
  const onClose = () => {
    visible.value = false;
  };
  
  defineExpose({
    onOpen,
    onClose,
  });
  

  那么在父组件中，我们只需要通过ref得到该组件Dom，然后操作Dom内部的方法即可；

  如：父组件改写

  
  
  // 转让管理员组件
  import ExchangeValidModalVue from './modal/ExchangeValidModal.vue';
  // modal弹层
  const exchangeRef = ref(null); // 转让管理员可视化
  const onExchangeOpen = () => {
     exchangeRef.onOpen() // 直接操作dom里defineExpose暴露出来的方法
  };
  

  如此，是不是比父子单向数据传递的方式更加高效易用？当然上面所说的只是我举的一个例子，当后续需要在组件内扩展功能也可按类似的方法代替单向数据流的方式扩展

  但，请注意；这种操作dom方式，并不是什么场景下都是最佳的选择；我们可以分情况选择，比如当一些数据只需要在子组件的范畴中实现，而不需要父组件外加干涉的情况下，选择ref操作dom更为高效；

  补充知识点：

  defineExpose

  在 Vue3.2 中，默认不会暴露任何在