您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

五种在 Vue 3 中定义组件的方法

时间:2023-04-25 13:57:22  来源:微信公众号  作者:web前端开发

Vue 正在不断发展,目前,在Vue 3  中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方法重构它。

1.  Options API

这是在 Vue 中声明组件的最常见方式。从版本 1 开始可用,您很可能已经熟悉它。一切都在对象内声明,数据在幕后由 Vue 响应。它不是那么灵活,因为它使用 mixin 来共享行为。

<script>
import TheComponent from './components/TheComponent.vue'
import componentMixin from './mixins/componentMixin.js'


export default {
  name: 'OptionsAPI',
  components: {
    TheComponent,
    AsyncComponent: () => import('./components/AsyncComponent.vue'),
  },
  mixins: [componentMixin],
  props: {
    elements: {
      type: Array,
    },
    counter: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      object: {
        variable: true,
      },
    }
  },
  computed: {
    isEmpty() {
      return this.counter === 0
    },
  },
  watch: {
    counter() {
      console.log('Counter value changed')
    },
  },
  created() {
    console.log('Created hook called')
  },
  mounted() {
    console.log('Mounted hook called')
  },
  methods: {
    getParam(param) {
      return param
    },
    emitEvent() {
      this.$emit('event-name')
    },
  },
}
</script>
<template>
  <div class="wrApper">
    <TheComponent />
    <AsyncComponent v-if="object.variable" />
    <div class="static-class-name" :class="{ 'dynamic-class-name': object.variable }">
      Dynamic attributes example
    </div>
    <button @click="emitEvent">Emit event</button>
  </div>
</template>


<style lang="scss" scoped>
.wrapper {
  font-size: 20px;
}
</style>

2.Composition API

经过多次讨论、来自社区的反馈,以及令人惊讶的是,在这个 RFC 中,有很多戏剧性的内容,在 Vue 3 中引入了 Composition API。 目的是提供更灵活的 API 和更好的 TypeScript 支持。这种方法在很大程度上依赖于设置生命周期挂钩。

<script>
import {
  ref,
  reactive,
  defineComponent,
  computed,
  watch,
} from 'vue'


import useMixin from './mixins/componentMixin.js'
import TheComponent from './components/TheComponent.vue'


export default defineComponent({
  name: 'CompositionAPI',
  components: {
    TheComponent,
    AsyncComponent: () => import('./components/AsyncComponent.vue'),
  },
  props: {
    elements: Array,
    counter: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    console.log('Equivalent to created hook')


    const enabled = ref(true)
    const object = reactive({ variable: false })


    const { mixinData, mixinMethod } = useMixin()


    const isEmpty = computed(() => {
      return props.counter === 0
    })


    watch(
      () => props.counter,
      () => {
        console.log('Counter value changed')
      }
    )


    function emitEvent() {
      emit('event-name')
    }
    function getParam(param) {
      return param
    }


    return {
      object,
      getParam,
      emitEvent,
      isEmpty
    }
  },
  mounted() {
    console.log('Mounted hook called')
  },
})
</script>


<template>
  <div class="wrapper">
    <TheComponent />
    <AsyncComponent v-if="object.variable" />
    <div class="static-class-name" :class="{ 'dynamic-class-name': object.variable }">
      Dynamic attributes example
    </div>
    <button @click="emitEvent">Emit event</button>
  </div>
</template>


<style scoped>
.wrapper {
  font-size: 20px;
}
</style>

如您所知,使用这种混合方法需要大量样板代码,而且设置函数很快就会失控。在迁移到 Vue 3 时,这可能是一个很好的中间步骤,但是语法糖可以让一切变得更干净。

3.Script setup

在 Vue 3.2 中引入了一种更简洁的语法。通过在脚本元素中添加设置属性,脚本部分中的所有内容都会自动暴露给模板。通过这种方式可以删除很多样板文件。

<script setup>
import {
  ref,
  reactive,
  defineAsyncComponent,
  computed,
  watch,
  onMounted,
} from "vue";


import useMixin from "./mixins/componentMixin.js";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(() =>
  import("./components/AsyncComponent.vue")
);


console.log("Equivalent to created hook");
onMounted(() => {
  console.log("Mounted hook called");
});


const enabled = ref(true);
const object = reactive({ variable: false });


const props = defineProps({
  elements: Array,
  counter: {
    type: Number,
    default: 0,
  },
});


const { mixinData, mixinMethod } = useMixin();


const isEmpty = computed(() => {
  return props.counter === 0;
});


watch(() => props.counter, () => {
  console.log("Counter value changed");
});


const emit = defineEmits(["event-name"]);
function emitEvent() {
  emit("event-name");
}
function getParam(param) {
  return param;
}
</script>


<script>
export default {
  name: "ComponentVue3",
};
</script>


<template>
  <div class="wrapper">
    <TheComponent />
    <AsyncComponent v-if="object.variable" />
    <div
      class="static-class-name"
      :class="{ 'dynamic-class-name': object.variable }"
    >
      Dynamic attributes example
    </div>
    <button @click="emitEvent">Emit event</button>
  </div>
</template>


<style scoped>
.wrapper {
  font-size: 20px;
}
</style>

4. Reactivity Transform

这是非常有争议的,被删除了!这使得脚本设置成为本文的明确答案。(26/1/2023 更新)

以下代码段中演示的脚本设置存在问题。

<script setup>
import { ref, computed } from 'vue'


const counter = ref(0)
counter.value++


function increase() {
  counter.value++
}


const double = computed(() => {
  return counter.value * 2
})
</script>




<template>
  <div class="wrapper">
    <button @click="increase">Increase</button>
    {{ counter }}
    {{ double }}
  </div>
</template>

正如您所注意到的,使用 .value 访问反应式计数器感觉不自然,并且是混淆和错误输入的常见来源。 

有一个实验性解决方案利用编译时转换来解决此问题。反应性转换是一个可选的内置步骤,它会自动添加此后缀并使代码看起来更清晰。

<scr
ipt setup>
import { computed } from 'vue'
let counter = $ref(0)
counter++
function increase() {
  counter++
}
const double = computed(() => {
return counter * 2
})
</script>
<template>
<div class="wrapper">
<button @click="increase">Increase</button>
    {{ counter }}
    {{ double }}
</div>
</template>

$ref 需要一个构建步骤,但在访问变量时删除了 .value 的必要性。启用后它在全球范围内可用。

5.Class API

Class API 已经可用很长时间了。通常与 Typescript 搭配使用是 Vue 2 的可靠选择,并且被认真考虑为默认的 Vue 3 语法。 

但经过多次长时间的讨论后,它被放弃了,取而代之的是 Composition API。 

它在 Vue 3 中可用,但工具严重缺乏,官方建议远离它。无论如何,如果您真的喜欢使用类,您的组件将看起来像这样。

<script lang="ts">
import { Options, Vue } from 'vue-class-component';


import AnotherComponent from './components/AnotherComponent.vue'  


@Options({
  components: {
    AnotherComponent
  }
})
export default class Counter extends Vue {
  counter = 0;


  get double(): number {
    return this.counter * 2;
  }
  increase(): void {
    this.quantity++;
  }
}
</script>




<template>
  <div class="wrapper">
    <button @click="increase">Increase</button>
    {{ counter }}
    {{ double }}
  </div>
</template>

结论

那哪个最好呢?这取决于典型的反应,尽管在这种情况下并非如此。从 Vue 2 迁移时,选项和类 API 可以用作中间步骤,但它们不应该是您的首选。 

如果您没有构建阶段,则组合 API 设置是唯一的选择,但由于大多数项目都是使用 Webpack 或 Vite 生成的,因此使用脚本设置既是可能的,也是鼓励的,因为大多数可访问的文档都使用这种方法。



Tags:Vue 3   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方...【详细内容】
2023-04-25  Tags: Vue 3  点击:(0)  评论:(0)  加入收藏
Vue 提供了一种简单优雅的处理动画的方法。你可以通过添加一个指令轻松应用它们,该指令为你完成所有繁重的工作。或者,你可以利用 JavaScript 钩子将更复杂的逻辑纳入你的动...【详细内容】
2023-03-30  Tags: Vue 3  点击:(31)  评论:(0)  加入收藏
想要在 2023 年构建出色的 Vue.js 应用程序吗?如果你的回答是 YES,那么一定要试一试这篇文章整理的 7 个 Vue 3 插件和库。无需编写大量代码,这些令人难以置信的插件和库就可以...【详细内容】
2023-03-29  Tags: Vue 3  点击:(36)  评论:(0)  加入收藏
大家好,我是Echa .今天给大家盘点12个Vue 3的高颜值UI组件库,凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库,用广东话讲:个个都靓。创作不易,喜...【详细内容】
2022-12-10  Tags: Vue 3  点击:(605)  评论:(0)  加入收藏
Vue 创始人尤雨溪宣布,新版 Vue 3 中文文档上线了!地址:cn.vuejs.org其他变化:原先的 Vue 2 文档现在迁移到了 v2.cn.vuejs.org 之前的临时 v3 文档 ( http://v3.cn.vuejs.org )...【详细内容】
2022-08-14  Tags: Vue 3  点击:(212)  评论:(0)  加入收藏
整理 | 屠敏头图 | CSDN 下载自东方 IC快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持。CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有...【详细内容】
2020-07-20  Tags: Vue 3  点击:(251)  评论:(0)  加入收藏
熟悉vue的小伙伴应该都知道,谈到vue的原理,最重要的莫过于:响应式,虚拟dom及diff算法.随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其...【详细内容】
2020-04-13  Tags: Vue 3  点击:(176)  评论:(0)  加入收藏
▌简易百科推荐
Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方...【详细内容】
2023-04-25  web前端开发  微信公众号  Tags:Vue 3   点击:(0)  评论:(0)  加入收藏
近年来,随着互联网技术的兴起,人们对其的用户体验要求也越来越高,这让Web前端一度成为炙手可热的就业岗位。由于其门槛低、薪资高,不少人纷纷转行,让不少还在观望的小白想了解一...【详细内容】
2023-04-21  金信润天  搜狐号  Tags:前端   点击:(12)  评论:(0)  加入收藏
随着前端项目中使用的依赖包越来越多,而其中一部分依赖包可能并未被项目所使用,手动查找这些依赖包既耗时又繁琐。那么,有没有工具能够快速地帮助我们识别和清理项目中未使用的...【详细内容】
2023-04-21  前端充电宝  微信公众号  Tags:前端   点击:(13)  评论:(0)  加入收藏
现在因为有个上传组件他用到了这个mixin文件,这个mixin文件中mounted请求了接口,这样一个页面中如果有多个上传组件的话,那么就会导致一上来就会一次性请求多个重复的接口,有什...【详细内容】
2023-04-18  前端阳光  微信公众号  Tags:Vue   点击:(10)  评论:(0)  加入收藏
1.什么是 esm?esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和 webpack,babel 不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现...【详细内容】
2023-04-11  高级前端进阶  今日头条  Tags:前端   点击:(23)  评论:(0)  加入收藏
大家好,我是沐华。最近一个粉丝公司项目由 Vue2 升级到 Vue3 了,他一下子不适应,有好多不会用的,所以我就写了这篇开发文档,包含了 Vue3 开发中使用的所有语法,希望所有像他一样还...【详细内容】
2023-04-10  沐华    Tags:Vue3   点击:(11)  评论:(0)  加入收藏
在Web前端工程化开发中,我们通常需要多个环境,至少需要开发和生产环境,也可能还需要不同的测试环境。那么,我是怎样配置多环境的呢?通常,一些脚手架都有配置多环境的解决方案,比如...【详细内容】
2023-04-07  前端梁哥  今日头条  Tags:Web前端   点击:(10)  评论:(0)  加入收藏
今天给大家带来的主题是Farm,即一个快速、强大、本地与生产环境保持一致的 Web 打包器,目标是解决 Vite 面临的主要问题。话不多说,直接开始!1.Vite 的不足随着 web 项目规模的...【详细内容】
2023-04-04  高级前端进阶  今日头条  Tags:Farm   点击:(31)  评论:(0)  加入收藏
大家好,我卡颂。最近AIGC​(AI Generated Content,利用AI​生成内容)非常热,技术圈也受到了很大冲击。目前来看,利用LLM​(Large Language Model,大语言模型)辅助开发还停留在非常早...【详细内容】
2023-03-31  卡颂  微信公众号  Tags:前端   点击:(31)  评论:(0)  加入收藏
当你在转转咨询客服时,你的问题是如何发送到客服的?客服又是如何快速精准回答的呢?这篇文章将从前端的视角,带你了解转转客服通信的整体流程。客服通信的整体架构​首先看一看用...【详细内容】
2023-03-31  大转转FE  微信公众号  Tags:前端   点击:(18)  评论:(0)  加入收藏
站内最新
站内热门
站内头条