浅析vue |
您所在的位置:网站首页 › vue3为什么不用class组件 › 浅析vue |
vue-class-component 是 vue 的官方库,作用是用类的方式编写组件。这种编写方式可以让 .vue 文件的 js 域结构更扁平,并使 vue 组件可以使用继承、混入等高级特性。 vue2.x 对 TS 的支持并不友好,所以 vue2.x 跟 TS 的整合,通常需要基于 vue-class-component 来用基于 class(类) 的组件书写方式。 vue英文官网推荐了一个叫 vue-class-component 的包,可以以 class(类) 的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利: methods,钩子都可以直接写作class的方法 computed 属性可以直接通过 get 来获得 初始化data可以声明为class的属性 其他的都可以放到 Component 装饰器里 官方文档:https://class-component.vuejs.org/vue-property-decorator 是一个非官方库,是 vue-class-component 的很好的补充。它可以让vue的某些属性和方法,通过修饰器的写法让它也写到vue组件实例的类里面。比如 @Prop @Watch @Emit。 1、安装下载 npm install vue-class-component vue-property-decorator --save-dev2、区别与联系 (1)vue-property-decorator - 社区出品;vue-class-component - 官方出品 (2)vue-class-component 提供了Vue、Component等; (3)vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch; 3、使用方式:开发时正常引入vue-property-decorator就行,引入后写 vue 代码就是如此 import {Component, Prop, Vue} from 'vue-property-decorator' @Component export default class App extends Vue { name:string = 'Simon Zhang' // computed get MyName():string { return `My name is ${this.name}` } // methods sayHello():void { alert(`Hello ${this.name}`) } mounted() { this.sayHello(); } }具体如何使用直接看官网文档吧。这里有一篇文章翻译可以参考学习:《Vue中的Class Component使用指南》 然后现在 vue3.x 已出,对 TS 很友好的支持,所以使用 vue3.x 的话暂时就不需要这种写法了。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |