这个语法是什么意思

Question

我正在使用vuetify，我需要运行服务器端控制的数据表。现在我在的文档中看到了这段代码

除此之外，我正在努力理解这是如何工作的，我对这段代码很感兴趣。

没有键的对象被this.options覆盖但是this.options是空的，你可以在文档中看到。

data () {
return {
totalDesserts: 0,
desserts: [],
loading: true,
options: {}, //<--------------------- HERE
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
}
},

const { sortBy, sortDesc, page, itemsPerPage } = this.options

Answer 1

代码是对象析构函数。此：

const { sortBy, sortDesc, page, itemsPerPage } = this.options

与此相同：

const sortBy = this.options.sortBy;
const sortDesc = this.options.sortDesc;
// etc.

如果你问this.options从哪里得到它的值，它来自模板的.sync修饰符：

<v-data-table
...
:options.sync="options"
...
></v-data-table>

设置选项时，v-data-table会发出一个包含选项数据的事件，甚至是默认选项。.sync修改器然后用所发射的选项数据更新绑定this.options。

这是你链接的演示的较短版本，显示了这个(查看控制台(