国外网站 国内做镜像,电商网站项目经验介绍ppt模板,微网站建设公司首选公司,免费wordpress托管服务商此文已由作者张汉锐授权网易云社区发布。欢迎访问网易云社区#xff0c;了解更多网易技术产品运营经验。前言#xff1a;对于我们而言#xff0c;typescript 更像一个工具官方指南从 vue2.5 之后#xff0c;vue 对 ts 有更好的支持。根据官方文档#xff0c;vue 结合 type…此文已由作者张汉锐授权网易云社区发布。欢迎访问网易云社区了解更多网易技术产品运营经验。前言对于我们而言typescript 更像一个工具官方指南从 vue2.5 之后vue 对 ts 有更好的支持。根据官方文档vue 结合 typescript 有两种书写方式Vue.extend import Vue from vueconst Component Vue.extend({ // type inference enabled})Class-style Vue Components import Vue from vueimport Component from vue-class-component// The Component decorator indicates the class is a Vue componentComponent({ // All component options are allowed in heretemplate: button clickonClickClick!/button})export default class MyComponent extends Vue { // Initial data can be declared as instance propertiesmessage: string Hello!// Component methods can be declared as instance methodsonClick (): void { window.alert(this.message)}}理想情况下Vue.extend 的书写方式是学习成本最低的。在现有写法的基础上几乎 0 成本的迁移// 现在常见的写法export default { // your code }但「理想丰满现实骨感」问题出在Vue.exend 在和 vuex 和 mixins 结合使用的时候无法发挥 ts 的作用vuex 和 mixins 会在项目中大量使用这个问题不能忽视。Vue.extend vuex mixins 问题的介绍Vue.extend vuex 的问题由于 vuex 使用 mapState mapActions 等方法的时候通过字符串形式做映射这个过程中丢失了类型信息。下面的 gif 可以看到整个过程中无法做代码提示无法对对应的 actions 和 state 做类型声明使得类型检查生效无法使用重构显然如果只有一部分的方法和属性得到了代码提示和类型检查就是失去了使用 typescript 意义。在 Vue.extend vuex 写法下这个问题暂时没有解决方案。Vue.extend mixins 的问题同样的问题在 mixin 中定义的方法不会被 typescript 识别到下面 gif 可以看到不仅仅「代码提示」「类型检查」「代码重构」没有工作甚至因识别不到 test 而报错Class-Style Components那么就剩下 Class-Style Components 方案。当然这个方案需要做额外的工作才能够让「vue 全家桶 ts」良好的工作。原理将属性直接挂载在 class 上使得 typescript 能够良好的进行「代码提示」和「类型检查」。然后再通过装饰器将属性转成 vue 上的属性。例如 Prop, Watch, Action 等装饰器将属性做相应的转换成 props, watch, mapActions 里面的值具体后面例子展示。vue-class-component这里库提供最基础的 vue 装饰器Component 。其他的 vue 装饰器库都在这个库的基础上做扩展和修改。看看官网的例子import Vue from vueimport Component from vue-class-component// Component 会将 MyComponent 中的属性转换成 vue 对应的属性Component({ // Vue 所有的属性都可以在这里声明一般用到的比较少template: button clickonClickClick!/button})
export default class MyComponent extends Vue { // Component 将 message 转成成 data message: string Hello!// Component 会将这里的 getter 属性转换成 computedget name(){ return anders} // Component 识别到 created 是声明周期关键字不做处理created(){} // Component 识别到 onClick 不是关键字将它转成 methods onClick (): void { window.alert(this.message)}
}vue-property-decorator这个库提供了EmitInjectModelPropProvideWatch其中常用的 PropWatchEmit。 看例子import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from vue-property-decoratorconst s Symbol(baz)Component
export class MyComponent extends Vue {Emit()addToCount(n: number){ this.count n }Emit(reset)resetCount(){ this.count 0 }Prop()propA: numberProp({ default: default value })propB: stringProp([String, Boolean])propC: string | booleanWatch(child)onChildChanged(val: string, oldVal: string) { }Watch(person, { immediate: true, deep: true })onPersonChanged(val: Person, oldVal: Person) { }
}上面的使用就相当于const s Symbol(baz)export const MyComponent Vue.extend({name: MyComponent,props: {checked: Boolean,propA: Number,propB: {type: String, default: default value},propC: [String, Boolean],},methods: {addToCount(n){ this.count n this.$emit(add-to-count, n)},resetCount(){ this.count 0this.$emit(reset)},onChildChanged(val, oldVal) { },onPersonChanged(val, oldVal) { }},watch: { child: {handler: onChildChanged,immediate: false,deep: false}, person: {handler: onPersonChanged,immediate: true,deep: true}}
})更加全面的用法参考文档vue-property-decorator免费体验云安全(易盾)内容安全、验证码等服务更多网易技术、产品、运营经验分享请点击。相关文章【推荐】 年轻设计师如何做好商业设计
