AOP与设计模式以及Vue

最新推荐文章于 2024-08-27 12:05:09 发布

AboyL

最新推荐文章于 2024-08-27 12:05:09 发布

阅读量1.4k

点赞数

分类专栏：前端 Vue javascript 文章标签：设计模式 JavaScript

本文链接：https://blog.csdn.net/AboyL/article/details/83388488

版权

本文探讨了在Vue中使用AOP遇到的this执行问题，由于Vue实例对data的代理，导致在methods中使用箭头函数时无法正确获取数据。提出了通过包装和使用call绑定this的解决方案。同时，作者引入了Java中的AOP注解和装饰器模式，指出在ES7/8中的装饰器提案并不完全适用于Vue的组件，因为它们针对的是类和类方法。尽管如此，通过TypeScript在Vue中使用类可以利用装饰器实现AOP，但由于装饰器在对象字面量中的支持尚不成熟，目前推荐使用回调函数形式。作者从这个问题的研究中，学习到了很多，并发现了设计模式在实际开发中的应用。

摘要由CSDN通过智能技术生成

我们在上节中提到了，我们的代码实现还是存在问题，这个问题在哪里？

这个是需要去结合vue来看的，因为我写这个东西的时候就是希望在vue中使用，如果最后不能再vue中使用
那么就没有意义了。

而在vue中的使用的实际使用的时候给我出了一个难题，那就是vue的this的执行问题。我们知道vue对自己的实例是做了一层代理的。
我们在创建一个vue实例的时候，走的是data:{属性} 但是实际上我们可以通过this.属性拿到这个属性值。这就说明了vue的实例对data做了一次代理，使得我们可以快速的拿到值。
因此，我们在使用写methods中的方法的时候，是不能使用箭头函数的，因为如果使用了箭头函数，那么this就会指向当前的环境，最终导致我们获取不到数据。

而在使用AOP的时候，我们并没有去处理this的执行问题，因此如果我们在vue中使用了我们的Action

<script>
let strategy={
  strategy1(text='strategy1'){
    console.log(text); // eslint-disable-line
  },
  strategy2(text='strategy2'){
    console.log(text); // eslint-disable-line
  },
  strategy3(text='strategy3'){
    console.log(text); // eslint-disable-line
  },
}

async function actuator (obj) {
  if (obj) {
    if (typeof obj === 'function'