Vue常用的Api

Vue常用的Api

#

异步组件

#

官方文档

1.是什么

是按需加载的组件,动态的从服务器中读取,有利于减少初始化加载时间,提高应用性能

2.使用方法

使用dedefineAsyncComponent来定义异步组件,函数的参数为一个对象

对象的属性

{
  // loader为一个函数,函数返回值为import('组件路径')
  loader: () => import('../components/AsyncComNew.vue'),
  // loadingComponent 组件加载的延迟时间
  delay: 1000,
  // 组件没有加载时显示的组件
  loadingComponent: Loading,
  // 组件加载失败时显示的组件
  errorComponent: Error,
  // 组件的加载时间超过了timeout则显示错误组件
  timeout: 4000
}

示例:

<template>
  <div>my-view</div>
  <AsyncCom />
</template>

<style lang="scss" scoped></style>

查看浏览器控制台,等待2s,从服务器获取组件

自定义插件

#

官方文档

1.是什么

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

2.使用

• 定义一个插件

  options是安装插件的时候传入的参数

  const myPlugin = {
    install(app, options) {
      // 配置此应用
      console.log("我的第一个插件", options);
      // 挂载全局方法或者变量
      app.config.globalProperties.$bingwu = "bingwu";
      console.log("app", app);
    },
  };

• 安装插件

  传入参数{ name: 'bingwu' }

  const app = createApp(App);
  app.use(myPlugin, { name: "bingwu" });

  控制台输出

  

• 使用挂载的变量/函数

  在模板中使用

  <template>
    <div>我是{{ $bingwu }}</div>
  </template>

  $bingwu最终会被替换为'bingwu'

自定义指令

#

官方文档

1.是什么

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令

2.使用

a.全局

• 定义指令

  通过app.directive('指令名称',{钩子函数})来定义指令

  通常在mounted和updated钩子中处理

  binding详细见文档

  binding.value(常用)代表在使用指令时传递的参数

  const app = createApp(App);
  // 自定义指令
  // 使 v-my 在所有组件中都可用
  app.directive("my", {
    // 在mounted钩子中处理
    mounted(el, binding, vnode) {
      // dom节点
      console.log("el", el);
      // 钩子参数
      console.log("binding", binding);
      // 代表绑定元素的底层 VNode。
      console.log("vnode", vnode);
    },
  });

• 使用

  binding.value的值为'bingwu'

  <template>
    <div v-my="'bingwu'">我是</div>
  </template>

  

自定义hooks

#

官方文档

1.是什么

利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

2.使用

• 定义hooks

  函数通常以useXXX来命名

  import { ref, onMounted } from "vue";
  export const useAdd = () => {
    const count = ref(0);
    const decrease = (num1, num2) => num1 + num2;
    onMounted(() => {
      console.log("mounted!!!");
    });
    return {
      count,
      decrease,
    };
  };

• 使用

  <template>
    <div>{{ count }}</div>
    <div>{{ decrease(2, 7) }}</div>
  </template>