ref用法，defineAsyncComponent异步导入

一、ref可实现数据动态监听，也可用于获取dom节点，父组件调用子组件方法或变量

基本用法，本页面获取dom元素

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

调用子组件中的方法

子组件：

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }
};
</script>

二、在使用vue-cli构建项目，在默认情况下，执行 npm run build/yarn build会将所有的js打包成一个整体，vue为单页面应用，同步加载大量的页面代码会导致页面长时间处于空白情况。使用该方法来异步加载所需页面来提升加载速度。此适用于项目比较大的情况下，如果就只有几个页面的情况，不建议使用该功能。

写法对比：

import { defineAsyncComponent, defineComponent,reactive,ref } from 'vue';
import sonVue from '../components/son.vue';

export default defineComponent({
    components:{
       sonVue,
       'sonVue2': defineAsyncComponent(()=>import('../components/son2.vue'))
    },
   setup:{}
})