如题,在使用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()
方法创建新建一个reversedMessage
,reversedMessage1
变量。
但是在js的代码看到reversedMessage
是基本类型,reversedMessage1
都是function。这是为什么呢?其实上面利用的就是defineProperties
的get
方法。
上面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里的返回值,真正接收参数的是内部函数。
所以Vue
的computed
是通过闭包函数进行传值。
https://cn.vuejs.org/v2/guide/computed.html#基础例子
嗨,没好好看官网!就发了吧