亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue 中 extend / component / mixins / extends 的區(qū)別

Kylin_Mountain / 575人閱讀

摘要：父組件在前，子組件在后。，，首先會在子組件里查找，如果沒有，才會沿著原型鏈向上，找父組件中對應的屬性。

在segmentfault上看到了一個問題vue.extend, vue.component 區(qū)別,突然有些方,好歹也寫了幾個小vue項目,自己都弄不清楚這些東西...

new Vue()、component

首先我們來約定一個選項對象 baseOptions,后面的代碼會用到.

let options = {
    template: "
{{firstName}} {{lastName}} aka {{alias}}
",
    data: function () {
        return {
            firstName: "Walter",
            lastName: "White",
            alias: "Heisenberg"
        }
    },
    created(){
        console.log("onCreated-1");
    }
};
new Vue() source:vue/src/core/instance/index.js 
實例化一個組件.
new Vue(baseOptions);
// -> onCreated-1
component source:vue/src/core/global-api/assets.js 
Vue.component 是用來注冊或獲取全局組件的方法，其作用是將通過 Vue.extend 生成的擴展實例構(gòu)造器注冊（命名）為一個組件.全局注冊的組件可以在所有晚于該組件注冊語句構(gòu)造的Vue實例中使用.
Vue.component("global-component", Vue.extend(baseOptions));
//傳入一個選項對象（自動調(diào)用 Vue.extend）,等價于上行代碼.
Vue.component("global-component", baseOptions);
// 獲取注冊的組件（始終返回構(gòu)造器）
var MyComponent = Vue.component("my-component")

當我們需要在其他頁面‘擴展’或者叫‘混合’baseOptions時,Vue中提供了多種的實現(xiàn)方式:extend,mixins,extends.

extend source:vue/src/core/global-api/extend.js 
可以擴展 Vue 構(gòu)造器，從而用預定義選項創(chuàng)建可復用的組件構(gòu)造器。
let BaseComponent = Vue.extend(baseOptions);
//基于基礎(chǔ)組件BaseComponent,再擴展新邏輯.
new BaseComponent({
    created(){
        //do something
        console.log("onCreated-2");
    }
    //其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2
mixins 
mixins 選項接受一個混合對象的數(shù)組。這些混合實例對象可以像正常的實例對象一樣包含選項,他們將在 Vue.extend() 里最終選擇使用相同的選項合并邏輯合并。
new Vue({
    mixins: [baseOptions],
    created(){
        //do something
        console.log("onCreated-2");
    }
    //其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2
extends 
這和 mixins 類似，區(qū)別在于，組件自身的選項會比要擴展的源組件具有更高的優(yōu)先級.

官方文檔是這么寫的,除了優(yōu)先級,可能就剩下接受參數(shù)的類型吧,mixins接受的是數(shù)組.

new Vue({
    extends: baseOptions,
    created(){
        //do something
        console.log("onCreated-2");
    }
    //其他自定義邏輯
});
// -> onCreated-1
// -> onCreated-2

從結(jié)果上看,三種方式都能實現(xiàn)需求,但是形式卻有不同.

Vue.extend

Vue.extend只是創(chuàng)建一個構(gòu)造器,他是為了創(chuàng)建可復用的組件.

mixins,extends

而mixins和extends是為了拓展組件.

從源碼來看通過extend,extends和mixins三種方式接收的options,最終都是通過mergeOptions進行合并的.差異只是官方文檔中提到的優(yōu)先級不同extend > extends > mixins. 所以,如果是簡單的擴展組件功能,三個方式都可以達到目的.

而這三種方式使用場景上細化的區(qū)分,目前我也蒙圈中...

//幾種方式的不同示例:
https://jsfiddle.net/willnewi...

選項對象合并策略 Vue.config.optionMergeStrategies

上面提到的選項對象,是在mergeOptions中按照一定策略進行合并的.

打印Vue.config.optionMergeStrategies,你會看默認的optionMergeStrategies如下:

mergeHook

子組件和父組件的生命周期事件會合并在一個數(shù)組里。父組件在前，子組件在后。

watch

子組件和父組件的watchers會合并在一個數(shù)組里。父組件在前，子組件在后。

mergeAssets(filters，components，directives)

首先會在子組件里查找，如果沒有，才會沿著原型鏈向上，找父組件中對應的屬性。

data 合并規(guī)則

無重復的屬性保留

同名覆蓋

data中的對象也是相同規(guī)則,無重復的屬性保留,同名覆蓋

props、methods、computed: 無重復保留,同名子組件覆蓋父組件

mergeAssets

mergeAssets合并方法里,用到了原型委托.他會先把父組件的屬性放在創(chuàng)建的新對象的原型鏈上.然后擴展新對象

對象里查找屬性的規(guī)則 :舉個例子，當查找一個屬性時，如 obj[a] ,如果 obj 沒有 a 這個屬性，那么將會在 obj 對象的原型里找，如果還沒有，在原型的原型上找，直到原型鏈的盡頭，如果還沒有找到，返回 undefined。
function extend (to, _from) {
  for (var key in _from) {
    to[key] = _from[key];
  }
  return to
}

function mergeAssets (parentVal, childVal) {
  var res = Object.create(parentVal || null);
  return childVal
    ? extend(res, childVal)
    : res
}
總結(jié)

Vue.component 注冊全局組件,為了方便

Vue.extend 創(chuàng)建組件的構(gòu)造函數(shù),為了復用

mixins、extends 為了擴展

如果按照優(yōu)先級去理解,當你需要繼承一個組件時,可以使用Vue.extend().當你需要擴展組件功能的時候,可以使用extends,mixins.但目前為止還沒有碰到完美詮釋他們的場景,抱歉,能力有限?

參考

Vue 代碼詳解

Vue官方文檔梳理-全局配置 合并策略

vue2.0源碼解讀之選項合并策略 optionMergeStrategies

vue源碼解讀－component機制

Tips

href 屬性用于保持光標形狀為正常的手形，也可以使用 css 實現(xiàn)

FOUC Flash Of Unstyled Content 文檔樣式閃爍

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83912.html

相關(guān)文章

  • vue中extend，mixins，extends，components,install的幾個操作

    摘要：前言你知道，用法嗎你知道他們的區(qū)別嗎你知道他們的執(zhí)行順序嘛下面都能找到這些答案使用構(gòu)造器創(chuàng)建一個子類參數(shù)是包含組件選項的對象是全局的創(chuàng)建構(gòu)造器實例傳入的數(shù)據(jù)為對應的標簽最外層必須只有一個標簽這是擴展的數(shù)據(jù)創(chuàng)建實例，并掛載到一個元素上。 前言 你知道extend,mixins,extends，components,install用法嗎? 你知道他們的區(qū)別嗎?你知道他們的執(zhí)行順序嘛? 下面...

    沈儉 評論0 收藏0

  • vue中extend，mixins，extends，components,install的幾個操作

    摘要：前言你知道，用法嗎你知道他們的區(qū)別嗎你知道他們的執(zhí)行順序嘛下面都能找到這些答案使用構(gòu)造器創(chuàng)建一個子類參數(shù)是包含組件選項的對象是全局的創(chuàng)建構(gòu)造器實例傳入的數(shù)據(jù)為對應的標簽最外層必須只有一個標簽這是擴展的數(shù)據(jù)創(chuàng)建實例，并掛載到一個元素上。 前言 你知道extend,mixins,extends，components,install用法嗎? 你知道他們的區(qū)別嗎?你知道他們的執(zhí)行順序嘛? 下面...

    beita 評論0 收藏0

  • 面試被問到Vue?想進一步提升?那就停下來看一下吧

    摘要：兩個對象鍵名沖突時，取組件對象的鍵值對。允許聲明擴展另一個組件可以是一個簡單的選項對象或構(gòu)造函數(shù)，而無需使用。這主要是為了便于擴展單文件組件。 Vue作為最近最炙手可熱的前端框架，其簡單的入門方式和功能強大的API是其優(yōu)點。而同時因為其API的多樣性和豐富性，所以他的很多開發(fā)方式就和一切基于組件的React不同，如果沒有對Vue的API（有一些甚至文檔都沒提到）有一個全面的了解，那么在...

    andot 評論0 收藏0

  • Vue with typescript

    摘要：想要使用語法的話，配合，這個插件，體驗更佳，這個插件在語法中實現(xiàn)了。這種方式最接近的單文件組件的寫法，如果一個完善項目從改成，用這種方法很快，只要加上和一些必要的變量類型就好了，然后用包裹就好。不推薦混入用這種方式寫，無法實現(xiàn)多繼承。 最近嘗試了一下 TypeScript，試著把一個 Vue 項目改成了 TypeScript 的，感覺還不錯 目前 Vue 和 TypeScript 的配...

    JerryWangSAP 評論0 收藏0

  • 在小程序中實現(xiàn) Mixins 方案

    摘要：明白了什么是以后，便可開始著手在小程序里面實現(xiàn)了。但是在小程序中，這套機制會和的有一點區(qū)別。代碼實現(xiàn)在小程序中，每個頁面都由函數(shù)定義，而則作用于這個函數(shù)當中的對象。函數(shù)即為小程序運行機制的具體實現(xiàn)，完全按照上一節(jié)總結(jié)的三條結(jié)論來進行。 原文來自我的博客：https://jrainlau.github.io/#/... showImg(https://segmentfault.com/...

    chunquedong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<