new Vue({
el: "#app",
data: {
value: "text",
},
computed:{
all: function({value}){
return value
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ value }}
<br>
{{ all }}
</div>Unexpectedly found this unconventional usage within my Vue project.
Although not documented, it seems to be functioning as expected.
computed:{
all: function({value}){
return value
}
}
Initially assumed that when no argument was passed to the function, 'this' would automatically be used as an argument. Referencing the example below:
However, contrary to expectations, the destructuring assignment works even when computed values do not receive any explicit arguments.
var value = "couldn't fly";
function ref ({value}){
console.log(value)
}
ref({
value : "could fly"
})
// did not output window
try{
ref();
}catch(e){
console.log('error')
}
// ===================================================
class cal {
constructor(){
value : "couldn't walk"
}
ref({value}){
console.log(value, "in Class")
}
}
let calRef = new cal;
calRef.ref({
value: "could walk"
})
// did not output the constructor's initial value
try{
calRef.ref()
}catch(e){
console.log('error')
}