主要摘录的是vue教程中的疑难点，结合demo来加深概念的理解（持续更新！）箭头函数在vue中使用不要在选项属性或回调上使用箭头函数(demo01)var vm1 = new Vue({ data: { a: 1 }, created: function() { // this 指向 vm 实例 console.log(‘a is: ’ + this.a) // a is: 1 }})var a = ‘123’;var vm2 = new Vue({ data: { a: 1 }, created: () => { // this 指向 window console.log(‘a is: ’ + this.a) // a is: 123 }})箭头函数是没有this的，this是根据父级的上下文且是静态生成的// ES6function foo() { setTimeout(() => { console.log(‘id:’, this.id); }, 100);}// ES5function foo() { var _this = this; setTimeout(function () { console.log(‘id:’, _this.id); }, 100);}inheritAttrs $attrs这两个API都是vue2.4.0新增的，教程解释的不是很清楚(demo02)inheritAttrs属性默认为true时，子组件的根元素会继承父作用域下（除却props定义）的属性，设置为false，子组件的根元素不会继承父作用域的属性（除class和style外）$attrs包含的就是父作用域的特性绑定（除了props定义的之外）Vue.component(‘component-demo’, { inheritAttrs: true, // 设置true或false props: [’label’, ‘value’], template: <div> <input :value="$attrs.value" :placeholder="$attrs.placeholder" @input="$emit('input', $event.target.value)" > </div> })var vueDemo = new Vue({ el: ‘#app-demo’ })<div id=“app-demo”> <component-demo label=“父作用域” value="" name=“组件” placeholder=“请输入”></component-demo></div>渲染结果如下：<!– 设置为true时: –><div name=“组件” placeholder=“请输入”> <input placeholder=“请输入”></div><!– 设置为false时: –><div> <input placeholder=“请输入”></div>