Vue 開發基礎（下）04
阿新 • • 發佈：2021-07-10
Vue 開發基礎（下）
元件進階
元件是對結構的抽象，元件可複用性很強，每個元件都有自己的作用域，區域之間獨立工作互不影響，從而降低了程式碼的耦合度。Vue 還刻有對元件的選項輕鬆完成合並，讓元件的功能變得靈活，使用起來更加方便。
mixins
分發 Vue 元件中科複用功能的方式。其物件可以包含任何元件選項，當前元件使用 mixins 時，將定義的 mixins 物件引入元件中即可使用，mixins 中的所有選項會混入到元件自己的選項中。
<script>
// 定義 myMixins 物件
var myMixin = {
created() {
經過 mixins 混合之後會發生元件選項重用，為解決這一問題，mixins 提供了相應的合併測策略
<script>
var mixin = {
data() {
return {msg: 'hello'}
}
}
var vm = new Vue({
mixins: [mixin],
// 如果該例項中沒有資料的建立，則列印的值將會是混入的 mixin 的資料值
data() {
return {
msg: 'goodbye'
}
},
created() {
console.log((
mixin 中的鉤子函式將在元件自己的鉤子函式之前呼叫
<script>
var mixin = {
created() {
console.log('mixin 鉤子函式呼叫')
}
}
var vm = new Vue({
mixins: [mixin],
created() {
console.log(' 元件鉤子函式呼叫 ')
}
})
</script>
rend
使用 Vue.render() 實現對虛擬 DOM 的操作。在 Vue 中一般使用 template 來建立 HTML ，但是可程式設計性不強，而使用 Vue.render() 可以更好地發揮 JavaScript 的程式設計能力
<body>
<div id="app">
<my-component>成功渲染</my-component>
</div>
</body>
<script>
Vue.component('myComponent', {
// 定義渲染函式
render(createElement) {
// 引數 p 等同於 標籤 p
return createElement('p', {
style: {
color: 'red',
fontsize: '16px',
backgroundColor: '#eee'
}
// 插槽 使得 “成功渲染” 可以顯示
},this.$slots.default)
}
})
var vm = new Vue({
el: '#app'
})
</script>
createElement
// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
createElement方法實際上是對_createElement方法的封裝，它允許傳入的引數更加靈活，在處理這些引數後，呼叫真正建立 VNode 的函式_createElement
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef((data: any).__ob__)) {
process.env.NODE_ENV !== 'production' && warn(
`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
'Always create fresh vnode data objects in each render!',
context
)
return createEmptyVNode()
}
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// warn against non-primitive key
if (process.env.NODE_ENV !== 'production' &&
isDef(data) && isDef(data.key) && !isPrimitive(data.key)
) {
if (!__WEEX__ || !('@binding' in data.key)) {
warn(
'Avoid using non-primitive value as key, ' +
'use string/number value instead.',
context
)
}
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
if (normalizationType === ALWAYS_NORMALIZE) {
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
children = simpleNormalizeChildren(children)
}
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
_createElement方法有 5 個引數，context表示 VNode 的上下文環境，它是Component型別；tag表示標籤，它可以是一個字串，也可以是一個Component；data表示 VNode 的資料，它是一個VNodeData型別，可以在flow/vnode.js中找到它的定義，這裡先不展開說；children表示當前 VNode 的子節點，它是任意型別的，它接下來需要被規範為標準的 VNode 陣列；normalizationType表示子節點規範的型別，型別不同規範的方法也就不一樣，它主要是參考render函式是編譯生成的還是使用者手寫的。
<body>
<div id="app">
<my-component>
<template v-slot:header>
<div style="background-color: #ccc; height: 50px">
導航欄
</div>
</template>
<template v-slot:content>
<div style="background-color: #ddd; height: 50px">
資訊欄
</div>
</template>
<template v-slot:footer>
<div style="background-color: #eee; height: 50px">
底部資訊
</div>
</template>
</my-component>
</div>
</body>
<script>
Vue.component('myComponent', {
// 定義渲染函式
render(createElement) {
return createElement('div', [
createElement('header', this.$slots.header),
createElement('content', this.$slots.content),
createElement('footer', this.$slots.footer)
])
}
})
var vm = new Vue({
el: '#app'
})
</script>