Vue的computed为什么使用闭包函数传值

如题,在使用Vue经常会遇到在computed传值,根据入参去渲染数据。找到的网上信息只是告诉我通过闭包传值,但是不知道为什么。

直接看代码

<script type="text/x-template" id="hello-world-template">
    <div>
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
      <p>Computed reversed message: "{{ reversedMessage1(2) }}"</p>
	</div>
</script>
<div id="example"></div>

<script>
var vm = new Vue({
    el: '#example',
    template: '#hello-world-template',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage: function() {
        return this.message.split('').reverse().join('')
      },
      // 计算属性的 getter
      reversedMessage1: function() {
        return function reversedMessageget(y) {
          return this.message.split('').reverse().join('')+'___'+y;
        }
      },
    },
    mounted(){
      console.log(this)
    }
  })
</script>

Vue解析computed,本质上是在当前组件this下通过Object.defineProperties()方法创建新建一个reversedMessagereversedMessage1变量。
打印出来的this
但是在js的代码看到reversedMessage是基本类型,reversedMessage1都是function。这是为什么呢?其实上面利用的就是definePropertiesget方法。
上面computed代码可以转换成这样:

reversedMessage: {
  get: function () {
    return this.message.split('').reverse().join('')
  },
},
reversedMessage1: {
  get: function () {
    return function reversedMessageget(y) {
      var str = this.message.split('').reverse().join('');
      return str;
    }
  }
}

这样就好理解,只是简写了变量的get方法,外面那层匿名函数就是个空壳子。
声明变量的类型就是通过get里的返回值,真正接收参数的是内部函数。

所以Vuecomputed是通过闭包函数进行传值。

https://cn.vuejs.org/v2/guide/computed.html#基础例子

嗨,没好好看官网!就发了吧

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值