1.以下装饰器沿用vue2.0，无改动，语法一致。
Prop
PropSync
Ref
Watch
WatchMounted
Emit
Inject
Provide
InjectReactive
ProvideReactive
2.vue-class-component 的@Options @mixins 内置进插件包
import { Options, mixins } from 'vue-decorator-plus-jousenzhou';
3.新增装饰器
@Computed
参数 : Object
<template>
<span>{{ a }}</span>
<span>{{ b }}</span>
</template>
<script>
import { reactive } from 'vue';
import { Options, mixins, Computed } from 'vue-decorator-plus-jousenzhou';
// 这里可以是响应式对象 或者vuex-store绑定
let object = reactive({
a: 10,
b: 11
});
const computed = function (keyAttrs) {
return keyAttrs.reduce((x, y) => {
return {
...x,
[y]: {
get: function () {
return object[y];
},
set: function (value) {
object[y] = value;
}
}
};
}, {});
};
@Options({
name: 'App',
components: {}
})
@Computed(computed(['a', 'b']))
export default class App extends mixins() {}
</script>@Setup
参数 : function | obejct
<template>
<span>{{ a }}</span>
</template>
<script>
import { ref } from 'vue';
import { Options, mixins, Setup } from 'vue-decorator-plus-jousenzhou';
// 参数类型1 对象
let setup = {
a: ref(10)
};
// 参数类型2 函数
let setup2 = function (prop) {
let a = ref(10);
return { a };
};
@Options({
name: 'App'
})
@Setup(setup)
export default class App extends mixins() {}
</script>ps: 使用了setup class内的变量声明(data) 就是无意义。
script setup yyds