主要摘錄的是Vue教程中的疑難點,結合demo來加深概念的理解(持續更新!)javascript
不要在選項屬性或回調上使用箭頭函數(demo01)html
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是根據父級的上下文且是靜態生成的vue
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
這兩個API都是vue2.4.0新增的,教程解釋的不是很清楚(demo02)
inheritAttrs屬性默認爲true時,子組件的根元素會繼承父做用域下(除卻props定義)的屬性,設置爲false,子組件的根元素不會繼承父做用域的屬性(除class和style外)
$attrs包含的就是父做用域的特性綁定(除了props定義的以外)java
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>
渲染結果以下:git
<!-- 設置爲true時: --> <div name="組件" placeholder="請輸入"> <input placeholder="請輸入"> </div> <!-- 設置爲false時: --> <div> <input placeholder="請輸入"> </div>
mixins接受一個混入對象的數組,實現一個相似淺拷貝的功能。利用mixins能夠對組件代碼進行抽離及封裝。(注:若是傳入的是鉤子函數,則按照數組的順序依次執行鉤子函數,且會在組件以前執行,跟淺拷貝的順序有出入)github
var mixin01 = { created() { console.log('mixin01') }, data() { return { name: 'mixin01' } }, methods: { foo: function() { console.log('foo1') }, conflicting: function() { console.log('from mixin1') } } } var mixin02 = { created() { console.log('mixin02') }, data() { return { name: 'mixin02' } }, methods: { foo: function() { console.log('foo2') }, conflicting: function() { console.log('from mixin2') } } } var vm = new Vue({ mixins: [mixin01, mixin02], created() { console.log('vm') }, methods: { bar: function() { console.log('bar') }, conflicting: function() { console.log('from self') } } }) // 頁面執行時,依次會打印'mixin01','mixin02','vm' vm.name // 'mixin02' vm.foo() // 'foo2' vm.bar() // 'bar'