1.需要使用什么属性就在script标签内引入

例：使用onMounted 只有引用后才能使用

<script>
import { onMounted} from 'vue'
  onMounted()
</script>

2.全局引入

通过globalProperties将参数挂载在全局 ，页面内在通过globalProperties进行获取

//全局参数挂在

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//全局参数
import api from '@/api/api.js'

const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$api = api
app.mount('#app')

//页面中参数获取

// getCurrentInstance 页面中引入后进行全局参数获取
<script>
import { defineComponent,onMounted,getCurrentInstance} from 'vue'
export default defineComponent({
  setup(){
    onMounted(()=>{
      const { $api } = getCurrentInstance().appContext.config.globalProperties
      console.log($api)
    })
  },
})
</script>

3.setup 全局参数定义级初始化

<script>
import { defineComponent, toRefs ,reactive ,onMounted } from 'vue'
export default defineComponent({
  setup(){
    //初始化全局参数 通过reactive初始后参数发生变化后会同步ui部分刷新
    //所有变量及函数都可以在state内初始然后在项目中调用
    const state = reactive({
      num:0,
      initFun(){
          //  num 更新后可以直接刷新页面
        state.num = state.num + 1
      },
    })
    //初始化生命周期
    onMounted(()=>{
      //初始化调用方法
      state.initFun()
    })
    return {
       ...toRefs(state)
    }
  },
})
</script>

4.使用ref获取dom

<script>
import { defineComponent, toRefs ,reactive ,ref } from 'vue'
export default defineComponent({
  setup(){
    const state = reactive({
      draggableSelect:ref(),
      numFun(){
        console.log(state.draggableSelect)
      },
    })
    return {
       ...toRefs(state)
    }
  },
})
</script>