第一个问题是
如果不使用ts 那么可以在vue组件里面使用装饰器@吗？
如果使用ts

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
function log(target: any, name: String,descriptor:any) {
  let oldValue:Function=descriptor.value
  descriptor.value=function(){
    alert('log')
    oldValue()
  }
}

@Component
export default class HelloWorld extends Vue {
  @Prop()
  private msg!: string
  test: String = 'test'

  @log
  alert() {
    alert('alert');
  }

那么这个样子在vscode中是不会报错的

而如果是在js里面

function log (target, name,descriptor) {
  let oldValue=descriptor.value
  descriptor.value=function(){
    alert('log')
    oldValue()
  }
}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function () {
    return {
      test: 'test'
    };
  },
  methods: {
    @log
    alert(){
      alert('alert')
    }
  }

在vscode中则会有一个红色的报错
但是实际运行效果确实ok的 感觉有点像是编辑器的问题,这样使用会有问题吗？因为Decorator的针对对象是class以及class的方法的

第二个问题是
如果我不使用es7的装饰器 而是使用回调函数
也就是

function log (fn) {
  return function () {
    alert('log')
    fn()

  }
}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function () {
    return {
      test: 'test'
    };
  },
  methods: {
    alert: log(() => {
      alert(this.test)
    })
  }
}

那么this指向就会出现问题，也就是不会指向vue实例
当然可以使用

alert(){
      log(()=>{
        alert(this.test)
      })()
    }

但是这种方式我感觉又不是很优雅并且在前面使用Decorator也会出现这样的问题。也就是说
1、怎么在非ts项目里面使用Decorator
2、怎么解决装饰器的this指向问题