問題
vue.jsを勉強していますが、コールバック関数について理解が乏しく、ご教示いただければと思います。
コード
<products.js>
jabascript
1const database = [ 2 { id: 1, name: '商品A', price: 100, content: '商品A詳細' }, 3 { id: 2, name: '商品B', price: 200, content: '商品B詳細' }, 4 { id: 3, name: '商品C', price: 300, content: '商品C詳細' } 5] 6 7export default { 8 asyncFind(id, callback) { 9 setTimeout(() => { 10 callback(database.find(el => el.id === id)) 11 }, 1000) 12 }
<Product.vue>
vue
1<script> 2 import products from 'products.js' 3 export default { 4 props: { 5 id: Number 6 }, 7 data() { 8 return { 9 item: null 10 } 11 }, 12 watch: { 13 id: { 14 handler() { 15 products.asyncFind(this.id, item => { 16 this.item = item 17 }) 18 }, 19 immediate: true 20 } 21 } 22 } 23</script>
現在の状態
「products.js」内のコールバックの引数database.find(el => el.id === id)
と、「Product.vue」のproducts.asyncFind
の二つ目の引数item => { this.item = item }
の関連付けが理解できません。
具体的には、「Product.vue」のproducts.asyncFind
の{ this.item = item }
は、「products.js」内のコールバックに定義されているような記載が無いのですが、この仕組みを理解しておりません。
また、item => { this.item = item }
のitem
は、callback
のel
(配列)という指しているのでは無いかと、推測しています。
試したこと
コールバック関数に数式(アロー関数)が入っていることで、理解に苦しんでいます。
自分なりに理解を整理するために、コードを変更してみました。
まず、アロー関数に慣れていないので、ES5の記載に変えました。
<products.js>
js
1export default { 2 asyncFind(id, callback) { 3 setTimeout(function() { // アロー関数をES5の書き方に変更 4 callback(database.find(el => el.id === id)) 5 }, 1000) 6 }
<Product.vue>
vue
1<script> 2 import products from 'products.js' 3 export default { 4 props: { 5 id: Number 6 }, 7 data() { 8 return { 9 item: null 10 } 11 }, 12 // 理解できていない「this.item = item」の部分を、関数として独立させました。 13 methods: { 14 xxx(item) { 15 this.item = item 16 } 17 }, 18 watch: { 19 id: { 20 handler() { 21 // 二つ目の引数に、上で追加した関数を指定 22 products.asyncFind(this.id, this.xxx) 23 }, 24 immediate: true 25 } 26 } 27 } 28</script>
こうすることで同じような動きが再現できました。
質問
-
callback
がfunction
(元々はアロー関数)でラップされていますが、これは必要なのでしょうか? -
this.item = item
が「Product.vue」のcallback(database.find(el => el.id === id))
に定義されていないのですが、これはどういう仕組みになっているのでしょうか(どこからこういう記載が出てくるのでしょうか)? -
最初に載せてある元のソースからですが、「Product.vue」の
products.asyncFind
の第二引数にあるitem =>
の部分のitem
ですが、これは「products.js」のcallbackで定義しているel
(database
配列)と考えてよろしいでしょうか?
回答1件
あなたの回答
tips
プレビュー