Vue グローバル API についての深い理解

みんなAPIって知ってますか？この記事では主に Vue 公式ドキュメントのグローバル API について詳しく紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Vue.extend

設定項目データは関数である必要があります。そうでない場合、設定は無効です。データ結合ルール (「Vue 公式ドキュメント - グローバル構成」を参照) のソース コードは次のとおりです:

関数型以外のデータを渡します (上の図のデータ構成は {a:1} です) )、オプションをマージした後、データが関数型でない場合、開発バージョンは警告を発行し、その後、parentVal を直接返します。これは、extend によって渡されたデータ オプションが無視されることを意味します。

Vue をインスタンス化するときに、データがオブジェクトになる可能性があることはわかっています。ここでのマージ ルールは普遍的なものではないでしょうか?上記の if(!vm) の判定があることに注意してください。vm はインスタンス化時に値を持つため、Vue.extend とは異なります。実際、次のコメントでも説明されています (Vue.extend のマージでは、両方とも関数である必要があります)。 ) 、これが、公式ドキュメントでデータが特殊なケースであると記載されている理由です。

なお、公式ドキュメントで「サブクラス」と記載されているのは、Vue.extend が Vue を「継承」した関数を返すためであり、ソースコードの構造は次のとおりです。
Vue を使用するので、当然データ駆動型で考える必要があります。いわゆるデータ駆動型とは、DOM 上のすべての操作を Vue のさまざまな命令を使用して完了することを意味します。データを dom に「バインド」する命令により、DOM の更新が可能になるだけでなく、より便利になります。

ブラウザが Promise をサポートしている場合、または Promise ライブラリを使用している場合 (ただし、ソース コード内の判断は typeof Promise !== 'unknown' であるため、外部に公開されるライブラリは Promise と呼ばれる必要があります)、nextTick は Promise オブジェクトを返します。

Vue.extend = function (extendOptions) {
  //***
  var Super = this;
  var SuperId = Super.cid;
  //***
  var Sub = function VueComponent(options) {
    this._init(options);
  };
  Sub.prototype = Object.create(Super.prototype);
  Sub.prototype.constructor = Sub;
  //***
  return Sub
};

nextTick を実行するための Vue のコールバックは、呼び出しメソッド cb.call(ctx) を使用します。ctx は現在の Vue インスタンスなので、これを直接使用してコールバック内のインスタンス構成を呼び出すことができます。
nextTick は、単に実行のために最後にコールバックを配置することとして理解できます。Promise と MutationObserver が現在ソース コードでサポートされていない場合、setTimeout がコードの実行を遅らせる一般的な方法ではありません。

Vue.nextTick().then(() => {
  // do sth
})

実際に見てみましょう:

 if (typeof Promise !== 'undefined' && isNative(Promise)) {
 } else if (typeof MutationObserver !== 'undefined' && (
     isNative(MutationObserver) ||
     // PhantomJS and iOS 7.x
     MutationObserver.toString() === '[object MutationObserverConstructor]'
   )) {
 } else {
   // fallback to setTimeout
   /* istanbul ignore next */
   timerFunc = function () {
     setTimeout(nextTickHandler, 0);
   };
 }

少し混乱するかもしれませんが、なぜ beforeChange は 2 ではなく 1 を出力するのでしょうか。 this .a=2 の背後でトリガーされる dom update も nextTick を使用します。上記のコードの実際の実行順序は、beforeChange>update dom>afterChange です。

Vue.set

Vue.set( target, key, value )、target は Vue インスタンスまたは Vue インスタンスのルート データ オブジェクトであってはなりません。これは、ソース コードで次の判断が行われるためです:

<p id="app">
  <p ref="dom">{{a}}</p>
</p>
new Vue({
  el: &#39;#app&#39;,
  data: {
    a: 1
  },
  mounted: function name(params) {
    console.log(&#39;start&#39;);
    this.$nextTick(function () {
      console.log(&#39;beforeChange&#39;, this.$refs.dom.textContent)
    })
    this.a = 2;
    console.log(&#39;change&#39;);
    this.$nextTick(function () {
      console.log(&#39;afterChange&#39;, this.$refs.dom.textContent)
    })
    console.log(&#39;end&#39;);
  }
})
// 控制台依次打印
// start
// change
// end
// beforeChange 1
// afterChange 2

target ._isVue は Vue インスタンスへの属性の追加を防ぎ、 ob && ob.vmCount は Vue インスタンスのルート データ オブジェクトへの属性の追加を防ぎます。

Vue.delete

Vue が削除操作を検出できる場合、この API は表示されません。 $data 属性を削除するために delete を使用する必要がある場合は、Vue.delete を使用してください。そうしないと、dom 更新がトリガーされません。

Vue.set と同様に、Vue.delete(target, key) のターゲットは Vue インスタンスまたは Vue インスタンスのルート データ オブジェクトであってはなりません。ソースコード上のブロック方法はVue.setと同じです。

バージョン 2.2.0 以降では、ターゲットが配列の場合、キーは配列の添字です。 Vue.delete は実際には splice を使用して配列を削除するため、delete を使用して配列を削除することはできますが、位置はまだ存在しており、真の削除とはみなされません。

var ob = (target).__ob__;
if (target._isVue || (ob && ob.vmCount)) {
"development" !== 'production' && warn(
  'Avoid adding reactive properties to a Vue instance or its root $data ' +
  'at runtime - declare it upfront in the data option.'
);
return val
}

Vue.use

Vue.use ソースコードは比較的シンプルなので全文掲載可能です。

var a = [1, 2, 3];
delete a[0];
console.log(a); // [undefined, 2, 3]

インストールされたプラグインは、installedPlugins に配置されます。プラグインをインストールする前に、installedPlugins.indexOf(plugin) を使用して、そのプラグインが以前にインストールされているかどうかを確認し、同じプラグインがインストールされることを防ぎます。複数回登録されることはありません。

プラグインのタイプはオブジェクトであり、プラグインをインストールするには install 属性を指定する必要があります (typeof plugin.install === 'function')。また、プラグインの実行には plugin.install.apply が使用されます。 (plugin, args); なので、これはオブジェクト属性の他の部分にアクセスします。ここでの引数は、Vue (args.unshift(this);) と Vue.use (toArray(arguments, 1), 1 は argument[1] からインターセプトすることを意味します) によって渡されるプラグイン以外のパラメーターです。

Vue.use = function (plugin) {
  var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args);
  }
  installedPlugins.push(plugin);
  return this
};

プラグインのタイプは function で、インストールは plugin.apply(null, args); を呼び出すため、厳密モードではプラグインのランタイム コンテキストは null になり、非厳密モードではウィンドウです。

Vue.use({
  a: 1,
  install: function (Vue) {
    console.log(this.a) // 1
    console.log(arguments) // [function Vue(options),"a", "b", "c"]
  }
}, 'a', 'b', 'c')

Vue.compile

和众多 JS 模板引擎的原理一样，预先会把模板转化成一个 render 函数，Vue.compile 就是来完成这个工作的，目标是将模板（template 或 el）转化成 render 函数。
Vue.compile 返回了{render:Function,staticRenderFns:Array}，render 可直接应用于 Vue 的配置项 render，而 staticRenderFns 是怎么来的，而且按照官网的例子，Vue 还有个隐藏的配置项 staticRenderFns，先来个例子看看。

var compiled = Vue.compile(
  &#39;<p>&#39; +
  &#39;<header><h1>no data binding</h1></header>&#39; +
  &#39;<section>{{prop}}</section>&#39; +
  &#39;</p>&#39;
)
console.log(compiled.render.toString())
console.log(compiled.staticRenderFns.toString())
// render
function anonymous() {
  with(this) {
    return _c(&#39;p&#39;, [_m(0), _c(&#39;section&#39;, [_v(_s(prop))])])
  }
}
// staticRenderFns
function anonymous() {
  with(this) {
    return _c(&#39;header&#39;, [_c(&#39;h1&#39;, [_v("no data binding")])])
  }
}

原来没有和数据绑定的 dom 会放到 staticRenderFns 中，然后在 render 中以_m(0)来调用。但是并不尽然，比如上述模板去掉4a249f0d628e2318394fd9b75b4636b1，staticRenderFns 长度为 0，header 直接放到了 render 函数中。

function anonymous() {
  with(this) {
    return _c('p', [_c('header', [_v("no data binding")]), _c('section', [_v(_s(prop))])])
  }
}

Vue.compile 对应的源码比较复杂，上述渲染 1aa9e5d373740b65a0cc8f0a02150c53 没有放到 staticRenderFns 对应源码的核心判断如下：

 // For a node to qualify as a static root, it should have children that
 // are not just static text. Otherwise the cost of hoisting out will
 // outweigh the benefits and it's better off to just always render it fresh.
 if (node.static && node.children.length && !(
     node.children.length === 1 &&
     node.children[0].type === 3
   )) {
   node.staticRoot = true;
   return
 } else {
   node.staticRoot = false;
 }

1aa9e5d373740b65a0cc8f0a02150c53 不符判断条件 !(node.children.length === 1 && node.children[0].type === 3)， 1aa9e5d373740b65a0cc8f0a02150c53 有一个子节点 TextNode（nodeType=3）。 注释也说明了一个 node 符合静态根节点的条件。

另外官网说明了此方法只在独立构建时有效，什么是独立构建？这个官网做了详细的介绍，不再赘述。对应官网地址：对不同构建版本的解释。

仔细观察编译后的 render 方法，和我们自己写的 render 方法有很大区别。但是仍然可以直接配置到 render 配置选项上。那么里面的那些 _c()、_m() 、_v()、_s() 能调用？随便看一个 Vue 的实例的 __proto__ 就会发现：

// internal render helpers.
// these are exposed on the instance prototype to reduce generated render
// code size.
Vue.prototype._o = markOnce;
Vue.prototype._n = toNumber;
Vue.prototype._s = toString;
Vue.prototype._l = renderList;
Vue.prototype._t = renderSlot;
Vue.prototype._q = looseEqual;
Vue.prototype._i = looseIndexOf;
Vue.prototype._m = renderStatic;
Vue.prototype._f = resolveFilter;
Vue.prototype._k = checkKeyCodes;
Vue.prototype._b = bindObjectProps;
Vue.prototype._v = createTextVNode;
Vue.prototype._e = createEmptyVNode;
Vue.prototype._u = resolveScopedSlots;
Vue.prototype._g = bindObjectListeners;

正如注释所说，这些方法是为了减少生成的 render 函数的体积。

全局 API 还剩 directive、filter、component、mixin，这几个比较类似，而且都对应着配置项，会在「选项」中再详细介绍。

相关推荐：

Vue官方文档梳理的全局配置详解

Vue拦截器vue-resource 拦截器使用详解

vue项目的构建，打包，发布详解

以上がVue グローバル API についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。