Vue官網教程疑難解析

主要摘錄的是Vue教程中的疑難點,結合demo來加深概念的理解(持續更新!javascript

箭頭函數在Vue中使用

不要在選項屬性或回調上使用箭頭函數(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);
}

inheritAttrs $attrs

這兩個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接受一個混入對象的數組,實現一個相似淺拷貝的功能。利用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'
相關文章
相關標籤/搜索