vue3 高阶语法

1.2 h函数的基本使用

h函数接收三个参数：type，props 和 children。

type

• 类型：String | Object | Function

• 详细：

  HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。

props

• 类型：Object

• 详细：

  一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。可选。

children

• 类型：String | Array | Object

• 详细：

  子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。可选。

1.3 h函数计算器案例

<script>
import { ref, h } from "vue";
export default {
  setup() {
    let count = ref(0);
    return {
      count,
    };
  },
  render() {
    // 参数1
    // @returns {VNode}
    // {String | Object | Function} tag
    // 一个 HTML 标签名、一个组件、一个异步组件、或
    // 一个函数式组件。
    // 必需的。

    // 参数2
    // {Object} props
    // 与 attribute、prop 和事件相对应的对象。
    // 这会在模板中用到。
    //
    // 可选的。

    // 参数3
    // {String | Array | Object} children
    // 子 VNodes, 使用 `h()` 构建,
    // 或使用字符串获取 "文本 VNode" 或者
    // 有插槽的对象。
    //
    // 可选的。
    return h("div", null, [
      h("button", { onClick: () => this.count++ }, "金额增加"),
      h("button", { onClick: () => this.count-- }, "金额减少"),
      h("h3", null, `当前金额:${this.count}`),
    ]);
  },
};
</script>

2.JSX

在vue中我们很少使用h函数，如果非要使用一般都是用JSX，它可以让我们回到更接近于模板的语法上。主要h函数的阅读性…太差了。JSX本质上还是通过babel转为h函数。

2.1 JSX基本使用

2.2 JSX使用组件

3.自定义指令

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

注意：

• ​ 在 Vue 中，代码复用和抽象的主要形式是组件。

• ​ 然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

3.1 注册自定义指令

自定义指定划分为：

• ​ 全局自定义指令：app的 directive 方法，可以在任意组件中被使用；
• ​ 局部自定义指令：组件中通过 directives 选项，只能在当前组件中使用；

通过官网的一个案例: 聚焦输入框

1. 局部自定义指令：

​ 2.全局自定义指令：

​ 通常情况下要自定义指令的话都是通过全局自定义指令实现的，很少使用局部自定义指令。

3.2 自定义指令的生命周期

 directives: {
    focus: {
      // 指令是具有一组生命周期的钩子：
      // 在绑定元素的 attribute 或事件监听器被应用之前调用
      created() {},
      // 当指令第一次绑定到元素并且在挂载父组件之前调用；
      beforeMount() {},
      // 绑定元素的父组件被挂载时调用
      mounted() {},
      // 在包含组件的 VNode 更新之前调用
      beforeUpdate() {},
      // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
      updated() {},
      // 在绑定元素的父组件卸载之前调用
      beforeUnmount() {},
      // 卸载绑定元素的父组件时调用,只调用一次
      unmounted() {},
    },
  },

3.3 生命周期参数

• el: 指令绑定到的元素。这可用于直接操作 DOM。
• binding :包含以下 property 的对象:
  • instance:使用指令的组件实例
  • value：传递给组件的值，例如在 v-my-directive="1 + 1" 中，该值为 2。
  • oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。
  • arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 "foo"。
  • modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}
  • dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中
• vnode:上面作为 el 参数收到的真实 DOM 元素的蓝图。
• prevNode:上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

3.4 自定义指令修饰符

4. 插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function。

插件的功能范围没有严格的限制，一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局资源：指令/过渡等。如：vue-touch）
3. 通过全局 mixin 来添加一些组件选项。(如vue-router)
4. 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：

1. ​ 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
2. ​ 函数类型：一个function，这个函数会在安装插件时自动执行；

官网解释：

4.1 插件对象写法

1.在文件下创建插件文件

---

2.在main.js中引入，use

3. 在实例中引用

4.2 插件数组写法

1. 创建插件

2.在main.js引入

3.实例中使用