写文章
  1. 码农之家首页
  2. 前端教程

8-框架-Vue

我心飞翔 • • 前端教程 • 阅读 16

Vue3核心

单向数据流，如何越过检查

      在Vue3中，单向数据流是指从父组件向子组件传递数据的模式，子组件可以通过props属性接收父组件传递的数据，但是它不能直接修改这些数据。这是为了确保数据流的清晰和可预测性。如果你想绕过检查，强制在子组件中修改父组件传递的数据，可以使用$emit方法来触发一个自定义事件，并将要修改的数据作为参数传递给父组件。具体来说，你可以在子组件中定义一个方法，使用$emit方法触发一个自定义事件，并将要修改的数据作为参数传递给父组件。父组件可以在监听这个自定义事件时，修改数据并重新渲染子组件。
示例代码：

import { defineComponent, PropType, EmitsOptions } from "vue";

export default defineComponent({
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ["update:message"] as EmitsOptions,
  methods: {
    updateMessage() {
      this.$emit("update:message", "New Message");
    }
  },
  render() {
    return (
      <div>
        <p>{this.message}</p>
        <button onClick={this.updateMessage}>Update Message</button>
      </div>
    );
  }
});


import { defineComponent, reactive } from "vue";
import ChildComponent from "./ChildComponent";

export default defineComponent({
  name: "ParentComponent",
  setup() {
    const state = reactive({
      message: "Hello World"
    });
    const updateMessage = (newMessage: string) => {
      state.message = newMessage;
    };
    return {
      state,
      updateMessage
    };
  },
  render() {
    return (
      <div>
        <ChildComponent
          message={this.state.message}
          onUpdateMessage={this.updateMessage}
        />
      </div>
    );
  }
});

自定义v-model

      我们可以使用v-model指令来实现组件的自定义双向绑定功能。v-model指令本质上是一个语法糖，它可以将组件的value属性绑定到父组件的数据，并将组件的input事件绑定到一个自定义事件。在父组件中，我们可以通过监听这个自定义事件来更新数据。
自定义v-model功能的例子：

import { defineComponent, PropType, EmitsOptions } from "vue";

export default defineComponent({
  name: "ChildComponent",
  props: {
    value: {
      type: String,
      required: true
    }
  },
  emits: ["update:value"] as EmitsOptions,
  methods: {
    updateValue(event: Event) {
      this.$emit("update:value", (event.target as HTMLInputElement).value);
    }
  },
  render() {
    return (
      <div>
        <input type="text" value={this.value} onInput={this.updateValue} />
      </div>
    );
  }
});

import { defineComponent, ref } from "vue";
import ChildComponent from "./ChildComponent";

export default defineComponent({
  name: "ParentComponent",
  setup() {
    const inputValue = ref("");
    return {
      inputValue
    };
  },
  render() {
    return (
      <div>
        <ChildComponent v-model={this.inputValue} />
        <p>{this.inputValue}</p>
      </div>
    );
  }
});

动态组件

      我们可以使用标签来实现动态组件功能。
标签用于动态渲染组件，可以根据数据的不同渲染不同的组件。
动态组件功能组件示例：

import { defineComponent } from "vue";

import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default defineComponent({
  name: "DynamicComponent",
  props: {
    component: {
      type: String,
      required: true
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  render() {
    const componentName = this.component;
    const component = componentName === "ComponentA" ? ComponentA : ComponentB;
    return (
      <div>
        <component is={component} />
      </div>
    );
  }
});


import { defineComponent, ref } from "vue";
import DynamicComponent from "./DynamicComponent";

export default defineComponent({
  name: "ParentComponent",
  setup() {
    const component = ref("ComponentA");
    return {
      component
    };
  },
  render() {
    return (
      <div>
        <div>
          <label>
            <input
              type="radio"
              value="ComponentA"
              v-model={this.component}
            />
            ComponentA
          </label>
          <label>
            <input
              type="radio"
              value="ComponentB"
              v-model={this.component}
            />
            ComponentB
          </label>
        </div>
        <DynamicComponent component={this.component} />
      </div>
    );
  }
});

      当用户选择不同的单选框时，component变量的值会改变，DynamicComponent组件的渲染内容也会自动改变。

h与render函数

在Vue3中，h函数是创建虚拟节点的函数，它接收三个参数：

  • 标签名、组件选项或者一个函数
  • 可选的 props 或者组件的实例、或者一个函数的参数
  • 子节点

      h函数创建的虚拟节点，可以被渲染成真正的DOM节点，也可以被作为子节点传递给其他组件。除了使用h函数创建虚拟节点外，Vue3还提供了render函数，它用于将虚拟节点渲染成真正的DOM节点。与Vue2的render函数不同，Vue3的render函数使用h函数创建虚拟节点，而不是手动创建DOM节点。render函数是一个函数式组件，它接收一个h函数和一个Context对象作为参数，并返回一个虚拟节点。
以下是一个简单的使用h函数和render函数的例子：

import { defineComponent } from "vue";

export default defineComponent({
  name: "ExampleComponent",
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
});

      h函数和render函数的优劣取决于具体的场景和需求。在一些简单的组件中，使用h函数创建虚拟节点可以更加直观和便利。但是在一些复杂的组件中，使用render函数可以提供更多的控制和灵活性，允许我们根据不同的状态和数据，动态地创建和渲染虚拟节点。

IOC / DI

      在Vue3中，我们可以使用provide和inject函数来实现IoC容器功能。provide函数用于向下传递依赖关系，在组件中调用provide函数时，传递的数据可以被子孙组件通过inject函数来访问。
以下是一个简单的使用provide和inject函数实现依赖注入的例子：

import { defineComponent, provide, inject } from "vue";

interface Config {
  baseURL: string;
}

const config: Config = {
  baseURL: "https://example.com"
};

const ConfigKey = Symbol();

export const provideConfig = () => {
  provide(ConfigKey, config);
};

export const useConfig = () => {
  const config = inject<Config>(ConfigKey);
  if (!config) {
    throw new Error("config must be provided");
  }
  return config;
};

export default defineComponent({
  name: "ExampleComponent",
  setup() {
    provideConfig();
    const { baseURL } = useConfig();
    return {
      baseURL
    };
  },
  render() {
    return (
      <div>
        <p>Base URL: {this.baseURL}</p>
      </div>
    );
  }
});

      通过使用provide和inject函数，我们可以轻松地实现IoC容器的功能，从而更好地管理应用程序中的依赖关系。

新特性

Teleport

      它可以将组件的内容渲染到DOM树的任意位置，而不仅仅是组件所在的位置。这使得开发者可以更加灵活地控制组件的渲染位置，从而实现更加复杂的UI效果。
Teleport示例代码

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body">
      <Modal v-if="showModal" @close="showModal = false">
        <p>This is the content of the modal.</p>
      </Modal>
    </teleport>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Modal from './Modal.vue'

export default defineComponent({
  components: {
    Modal
  },
  setup() {
    const showModal = ref(false)

    return {
      showModal
    }
  }
})
</script>

Fragments

      它可以让开发者在组件中使用多个根元素，而不需要使用额外的包装元素。这样可以简化组件的结构，使得组件更加清晰和易于维护。
Fragments示例代码

<template>
  <>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    props: {
      title: {
        type: String,
        required: true
      },
      content: {
        type: String,
        required: true
      }
    } 
  }) 
</script>

Suspense

      它可以让开发者更加方便地处理异步组件和数据加载。通过使用Suspense组件，开发者可以在组件加载过程中显示占位符，直到组件加载完成后再显示真正的内容。这样可以提高用户体验，同时也可以简化代码逻辑。
Suspense示例代码：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>

    <template #fallback>
      <div>Loading...</div>
    </template>
   </Suspense>
</template>

 <script lang="ts">
   import { defineAsyncComponent } from 'vue';

  const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

  export default {
    components: {
      AsyncComponent
    }
  };
</script>

像使用普通的组件一样使用异步组件

<template>
  <AsyncComponent />
</template>

      需要注意的是，Suspense组件只能包裹一个异步组件或者多个异步组件的根节点。如果需要处理多个异步组件，可以使用多个Suspense组件来包裹它们。

tsx模板语法

      tsx一开始是一种在React中使用TypeScript的语法，它允许你在JSX中使用TypeScript的类型检查和其他特性。在Vue3中，你也可以使用tsx语法来编写组件。你可以使用Vue.js提供的@vue/babel-plugin-jsx插件来支持tsx语法。使用这个插件后，你就可以在Vue3中使用类似于React的tsx语法使用tsx语法编写组件模板，可以让你更好地利用TypeScript的类型检查和其他特性，从而提高代码的可读性和可维护性，并且tsx语法可以让你更好地管理组件的状态和属性。同时，tsx语法也更加灵活，可以让你更方便地组合组件和处理事件等操作。
      相对于tsx语法，使用传统的模板语法编写组件模板则更加简单和易于理解，特别是对于那些已经熟悉Vue.js的开发者来说。传统的模板语法也可以使用Vue.js提供的指令和组件等特性，从而实现更加复杂的功能。总的来说，选择使用tsx语法还是传统的template模板语法，取决于你的个人选择和项目的需求。如果你的项目需要更高的类型安全和可维护性，或者你已经熟悉了React和TypeScript的开发方式，那么使用JSX语法可能更适合你。如果你的项目需要更快的开发速度和更简单的模板语法，或者你已经熟悉了Vue.js的开发方式，那么使用传统的模板语法可能更适合你。无论你选择哪种语法，Vue3都提供了完整的支持。你可以在组件的选项中使用render函数来编写JSX语法的模板，也可以使用template选项来编写传统的模板语法。同时，Vue3还提供了一些新的API和组合式API，可以让你更好地管理组件的状态和属性，从而实现更加灵活和可复用的组件。

vue3插件开发

      开发Vue3插件的过程与开发Vue2插件的过程类似，但是在Vue3中，由于Composition API的引入，插件的编写方式有了一些变化。

  • 创建一个Vue插件
import { createApp } from 'vue';

const MyPlugin = {
  install(app) {
    // 在这里注册你的组件和指令等
  }
};

export default MyPlugin;

使用Vue的全局API来注册组件和指令等。例如：

import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';

const MyPlugin = {
  install(app) {
    app.component('my-component', MyComponent);
    app.directive('my-directive', {
      // 在这里定义你的指令逻辑
    });
  }
};

export default MyPlugin;

在应用中可以使用inject()方法来获取插件提供的数据和功能。
例如：

import { createApp, inject } from 'vue';
import MyPlugin from './MyPlugin';

const app = createApp(...);

app.use(MyPlugin);

const MyComponent = {
  setup() {
    const myData = inject('myData');

    // 在这里使用myData

    return {
      myData
    };
  }
};

app.component('my-component', MyComponent);

      以上就是开发Vue3插件的完整步骤。需要注意的是，由于Vue3的新特性和API的引入，插件的编写方式可能会有所不同，具体取决于你的具体需求和开发方式。如果你想使用Composition API来编写插件，可以参考Vue3官方文档中的相关内容。同时，Vue3还提供了一些新的API和组合式API，可以让你更好地管理组件的状态和属性，从而实现更加灵活和可复用的组件。

原文链接：https://juejin.cn/post/7223824593688428600 作者：高灯GFE

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年4月20日 上午10:32
下一篇 2023年4月20日 上午10:42

相关推荐

发表回复

登录后才能评论