Vue官網(wǎng)教程疑難解析

wow_worktile 發(fā)布于2019-08-23 14:39 / 751人閱讀

摘要：利用可以對組件代碼進(jìn)行抽離及封裝。注如果傳入的是鉤子函數(shù)，則按照數(shù)組的順序依次執(zhí)行鉤子函數(shù)，且會(huì)在組件之前執(zhí)行跟淺拷貝的順序有出入頁面執(zhí)行時(shí)，依次會(huì)打印

主要摘錄的是Vue教程中的疑難點(diǎn)，結(jié)合demo來加深概念的理解（持續(xù)更新！）

箭頭函數(shù)在Vue中使用

不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)(demo01)

var vm1 = new Vue({
    data: {
        a: 1
    },
    created: function() {
        // `this` 指向 vm 實(shí)例
        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
    }
})

箭頭函數(shù)是沒有this的，this是根據(jù)父級的上下文且是靜態(tài)生成的

// 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

這兩個(gè)API都是vue2.4.0新增的，教程解釋的不是很清楚(demo02)
inheritAttrs屬性默認(rèn)為true時(shí)，子組件的根元素會(huì)繼承父作用域下（除卻props定義）的屬性，設(shè)置為false，子組件的根元素不會(huì)繼承父作用域的屬性（除class和style外）
$attrs包含的就是父作用域的特性綁定（除了props定義的之外）

Vue.component("component-demo", {
    inheritAttrs: true, // 設(shè)置true或false
    props: ["label", "value"],
    template: `
        
            
        
    `
})

var vueDemo = new Vue({ el: "#app-demo" })

渲染結(jié)果如下：

mixins

mixins接受一個(gè)混入對象的數(shù)組，實(shí)現(xiàn)一個(gè)類似淺拷貝的功能。利用mixins可以對組件代碼進(jìn)行抽離及封裝。(注：如果傳入的是鉤子函數(shù)，則按照數(shù)組的順序依次執(zhí)行鉤子函數(shù)，且會(huì)在組件之前執(zhí)行,跟淺拷貝的順序有出入)

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")
        }
    }
})

// 頁面執(zhí)行時(shí)，依次會(huì)打印"mixin01","mixin02","vm"
vm.name // "mixin02"
vm.foo() // "foo2"
vm.bar() // "bar"