Vue學習筆記進階篇之函數化組件解析

2019-11-19 16:01:41

字體：大中小

來源：轉載

供稿：網友

這兩天學習了Vue.js 感覺函數化組件這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記

介紹

之前創(chuàng)建的錨點標題組件是比較簡單，沒有管理或者監(jiān)聽任何傳遞給他的狀態(tài)，也沒有生命周期方法。它只是一個接收參數的函數。

在這個例子中，我們標記組件為 functional，這意味它是無狀態(tài)（沒有 data），無實例（沒有 this 上下文）。

一個函數化組件就像這樣：

Vue.component('my-component', { functional: true, // 為了彌補缺少的實例 // 提供第二個參數作為上下文 render: function (createElement, context) {  // ... }, // Props 可選 props: {  // ... }})

組件需要的一切都是通過上下文傳遞，包括：

props: 提供props 的對象
children: VNode 子節(jié)點的數組
slots: slots 對象
data: 傳遞給組件的 data 對象
parent: 對父組件的引用
listeners: (2.3.0+) 一個包含了組件上所注冊的 v-on 偵聽器的對象。這只是一個指向 data.on 的別名。
injections: (2.3.0+) 如果使用了 inject 選項, 則該對象包含了應當被注入的屬性。

在添加 functional: true 之后，錨點標題組件的 render 函數之間簡單更新增加context參數，this.$slots.default 更新為 context.children，之后this.level 更新為 context.props.level。

因為函數化組件只是一個函數，所以渲染開銷也低很多。另外，這也意味著函數化組件不會出現(xiàn)在 VueJS Chrome 開發(fā)者工具的組件樹里。

在作為包裝組件時它們也同樣非常有用，比如，當你需要做這些時：

程序化地在多個組件中選擇一個

在將 children, props, data 傳遞給子組件之前操作它們。

下面是一個依賴傳入 props 的值的smart-list組件例子，它能代表更多具體的組件：

var EmptyList = { /* ... */ }var TableList = { /* ... */ }var OrderedList = { /* ... */ }var UnorderedList = { /* ... */ }Vue.component('smart-list', { functional: true, render: function (createElement, context) {  function appropriateListComponent () {   var items = context.props.items   if (items.length === 0)      return EmptyList   if (typeof items[0] === 'object') return TableList   if (context.props.isOrdered)   return OrderedList   return UnorderedList  }  return createElement(   appropriateListComponent(),   context.data,   context.children  ) }, props: {  items: {   type: Array,   required: true  },  isOrdered: Boolean }})

slots()和children對比

你可能想知道為什么同時需要 slots()和children。slots().default 不是和 children 類似的嗎？在一些場景中，是這樣，但是如果是函數式組件和下面這樣的 children 呢？

<my-functional-component> <p slot="foo">  first </p> <p>second</p></my-functional-component>

對于這個組件，children 會給你兩個段落標簽，而 slots().default 只會傳遞第二個匿名段落標簽，slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots() ，因此你可以選擇讓組件通過 slot() 系統(tǒng)分發(fā)或者簡單的通過 children 接收，讓其他組件去處理。

示例

漸進過渡

之前的Vue學習筆記進階篇――列表過渡及其他中可復用的過渡提到用函數組件實現(xiàn)合適，下面就用函數化組件來實現(xiàn)那個漸進過渡

<div id="app5">  <input v-model="query">  <my-transition :query="query" :list="list">    <li v-for="(item, index) in computedList"      :key="item.msg"      :data-index="index">      {{item.msg}}    </li>  </my-transition></div>  Vue.component('my-transition', {    functional:true,    render:function (h, ctx) {      var data = {        props:{          tag:'ul',          css:false        },        on:{          beforeEnter:function (el) {            el.style.opacity = 0            el.style.height = 0          },          enter:function (el, done) {            var delay = el.dataset.index * 150            setTimeout(function () {              Velocity(el, {opacity:1, height:'1.6em'},{complete:done})            }, delay)          },          leave:function (el, done) {            var delay = el.dataset.index * 150            setTimeout(function () {              Velocity(el, {opacity:0, height:0}, {complete:done})            }, delay)          }        }      }      return h('transition-group', data, ctx.children)    },    props:['query', 'list']  })  var app5 = new Vue({    el:'#app5',    data:{      query:'',      list:[        {msg:'Bruce Lee'},        {msg:'Jackie Chan'},        {msg:'Chuck Norris'},        {msg:'Jet Li'},        {msg:'Kung Furry'},        {msg:'Chain Zhang'},        {msg:'Iris Zhao'},      ]    },    computed:{      computedList:function () {        var vm = this        return this.list.filter(function (item) {          return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1        })      }    },  })

運行結果：