商丘哪里做网站,vue.js做网站,手机设计软件下载,wordpress相册效果在vue3中定义组件的5种方式
Vue 正在不断发展#xff0c;目前在 Vue3 中定义组件的方法有多种。从选项式到组合式再到类API#xff0c;情况截然不同。本文将会定义一个简单的组件并使用所有可用的方法重构它。
选项式
这是在 Vue 中声明组件的最常见方法。从 Vue1 就开始存…在vue3中定义组件的5种方式
Vue 正在不断发展目前在 Vue3 中定义组件的方法有多种。从选项式到组合式再到类API情况截然不同。本文将会定义一个简单的组件并使用所有可用的方法重构它。
选项式
这是在 Vue 中声明组件的最常见方法。从 Vue1 就开始存在了我们很可能已经熟悉它了。一切都在对象内部声明并且数据在Vue中会定义成响应式。这种方式不是那么灵活因为它使用 mixins 来共享行为。
script
import TheComponent from ./components/TheComponent.vue
import componentMixin from ./mixins/componentMixin.jsexport 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
templatediv classwrapperTheComponent /AsyncComponent v-ifobject.variable /div classstatic-class-name :class{ dynamic-class-name: object.variable }动态数据/divbutton clickemitEvent触发事件/button/div
/templatestyle langscss scoped
.wrapper {font-size: 20px;
}
/style使用这种混合方法需要大量样板代码并且设置的功能会随着项目越来越大越难以维护。
组合式
Vue3 中引入了 Composition API 。目的自然是提供更灵活的 API 和更好的 TypeScript 支持。这种方法在很大程度上依赖于安装生命周期挂钩(hooks)。
script
import {ref,reactive,defineComponent,computed,watch,
} from vueimport useMixin from ./mixins/componentMixin.js
import TheComponent from ./components/TheComponent.vueexport 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)},
})
/scripttemplatediv classwrapperTheComponent /AsyncComponent v-ifobject.variable /div classstatic-class-name :class{ dynamic-class-name: object.variable }动态数据/divbutton clickemitEvent触发事件/button/div
/templatestyle scoped
.wrapper {font-size: 20px;
}
/style使用组合式的方式可以项目逻辑更加清晰。
script setup
在 Vue 3.2 中引入了更简洁的语法。通过在 script 标签中添加 setup 属性脚本部分中的所有内容都会自动暴露给模板。通过这种方式同样可以删除很多样板文件。
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;
}
/scriptscript
export default {name: ComponentVue3,
};
/scripttemplatediv classwrapperTheComponent /AsyncComponent v-ifobject.variable /div classstatic-class-name :class{ dynamic-class-name: object.variable }动态数据/divbutton clickemitEvent触发事件/button/div
/templatestyle scoped
.wrapper {font-size: 20px;
}
/style响应性语法糖 2023 年 1 月 26 日更新这是非常有争议的因此被删除不过我们也可以稍微了解一下 以下使用script setup代码片段中演示的内容存在问题
script setup
import { ref, computed } from vueconst counter ref(0)
counter.valuefunction increase() {counter.value
}const double computed(() {return counter.value * 2
})
/scripttemplatediv classwrapperbutton clickincreaseIncrease/button{{ counter }}{{ double }}/div
/template使用.value访问反应式计数器感觉不自然并且是造成混乱和错误输入的常见原因。有一个实验性解决方案利用编译时转换来解决此问题。反应性转换是一个可选的内置步骤它会自动添加此后缀并使代码看起来更干净。
script setup
import { computed } from vuelet counter $ref(0)
counterfunction increase() {counter
}const double computed(() {return counter * 2
})
/scripttemplatediv classwrapperbutton clickincreaseIncrease/button{{ counter }}{{ double }}/div
/template$ref.value需要构建步骤但消除了访问变量时的必要性。启用后它在全局范围内可用。
class api
Class API 已经存在很长时间了。通常与 Typescript 搭配使用。并且被认真考虑过作为默认的 Vue 3 语法。但经过多次长时间的讨论后它被放弃了取而代之的是 Composition API。它在 Vue 3 中可用但工具明显缺乏官方建议放弃它。
script langts
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;}
}
/scripttemplatediv classwrapperbutton clickincreaseIncrease/button{{ counter }}{{ double }}/div
/template
