<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I often find myself writing code like this:</p>
<p dir="auto"><code class="notranslate">&lt;component :data='data' :name='name' :email='email'&gt;&lt;/component&gt;</code></p>
<p dir="auto">This code is redundant and isn't fun to write.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Using es6 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer" rel="nofollow">Object Literal Shorthand</a> as inspiration, the component could instead be written like this:</p>
<p dir="auto"><code class="notranslate">&lt;component :data :name :email&gt;&lt;/component&gt;</code></p>
<blockquote>
<p dir="auto">如果在VUE组件中使用继承了Array的子类<br>
只要改对象赋值进入VUE组件中 VUE会把该对象改为VUE能够监听的对象</p>
</blockquote>
<ol dir="auto">
<li>list类 继承 Array<br>
<code class="notranslate">export class List extends Array {</code><br>
<code class="notranslate">constructor(){</code><br>
<code class="notranslate">super()</code><br>
<code class="notranslate">}</code><br>
<code class="notranslate">test()</code><br>
<code class="notranslate">}</code><br>
<code class="notranslate">}</code></li>
</ol>
<p dir="auto">2.某个VUE组件中<br>
<code class="notranslate">import { List } from './list'</code><br>
<code class="notranslate">export default {</code><br>
<code class="notranslate">data () {</code><br>
<code class="notranslate">return {</code><br>
<code class="notranslate">list: null</code><br>
<code class="notranslate"> }</code><br>
<code class="notranslate">},</code><br>
<code class="notranslate">created () {</code><br>
<code class="notranslate">this.list = new List()</code><br>
<code class="notranslate">console.log(new List().test)  // =&gt; function....</code><br>
<code class="notranslate">console.log(this.list.test)  // =&gt; undefined</code><br>
<code class="notranslate">}</code><br>
<code class="notranslate">}</code></p>