Vue 如何使用面向对象的风格来编程

vue的脚本语法是组合式和API选项式，在开发复杂度较高的组件时会感觉代码不直观，阅读起来比较费劲而且模板的使用也不像JSX那样灵活，但如果用JSX的话又丢失了模板中便捷的操作，那么如何解决以上的不足呢？请看下面的栗子

package com;
import web.components.Component
class Person extends Component{
    @Reactive
    private name:string = 'Zhang San'
    private task:{name:string,work:string}[] = []
    private createTask(){
        return <ul>
                   <li d:for="item in task">
                        <d:if condition={item.work=='it'}>
                            <span>name:{item.name}</span>
                            <span>work:{item.work}</span>
                        </d:if>
                        <span d:else>Hidden</span>
                    </li>
                </ul>
    }
    @Override
    render(){
      return <div>
            <div><span>{name}</span></div>
            <div>
                {this.createTask()}
            </div>
            <ui:Button>Click Me</ui:Button>
        </div>
    }
}

这是一个实现了Vue接口的组件，默认集成了 element-plus ui 不需要手动导入，用VSCode编辑器可以友好的代码提示。具体文档可以参考 EaseScript