Vueでデータを初期化する方法は何ですか?-フロントエンドQ&A-php.cn

Vueでデータを初期化する方法は何ですか?

青灯夜游

リリース： 2022-12-26 18:09:35

オリジナル

3791 人が閲覧しました

Vue がデータを初期化するには 2 つの方法があります: 1. オブジェクトモード、構文 "var data = {key-valueペア}"; 2. 関数モード、構文 "data: function () {return { key -値のペア}" }"。コンポーネントおよび拡張でのデータの初期化はオブジェクトにすることができないことに注意してください。そうでない場合は、エラーが報告されます。コンポーネント内のデータに関数モードを使用する目的は、複数のコンポーネントインスタンスオブジェクトが同じデータを共有してデータ汚染を引き起こすことを防ぐことです。

Vueでデータを初期化する方法は何ですか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Vue データには関数とオブジェクトという 2 つの初期化メソッドがありますが、これら 2 つの状況に適用できるシナリオは何でしょうか?それは普遍的なものでしょうか？これら 2 つの質問を一緒に分析してみましょう

データ初期化

// 代码来源于官网示例

// 第一种定义方式
var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
// 第二种定义方式
  data: function () {
    return { a: 1 }
  }
})

ログイン後にコピー

上記のコードは、データを定義する 2 つの方法を簡単に説明しています

function
object

公式 Web サイトのデモでは、オブジェクトがデータの初期化に使用できないことも強調されています。伸ばす。。なぜ？

ソースコード解析

公式サイトのデモによると、Vue.extendのデータ初期化はオブジェクト化できないようです。強制的にオブジェクトとして書き込まれますか?

var Component = Vue.extend({
  data: { a: 1 }
})

ログイン後にコピー

実行後、Chrome のコンソールはエラーを直接報告します。情報は次のとおりです。

vue.esm.js?efeb:591 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

ログイン後にコピー

ソースコードとエラー情報を分析することで、Vue.extend がトリガーされるとマージが実行されます基本コンポーネント (vmode 内、トランジションなど) を操作してマージし、extend で定義した情報は、mergeField を介してオプションにマージされます。データにマージされると、データが関数であるかどうかをチェックする strats.data がトリガーされます。ここではこれが必要です。フィルタ、コンポーネントなど、およびデータは 2 セットのマージプロセスを通過することに注意してください。詳細については、次のコードコメントを参照してください。

// vue.extend 源码地址https://github.com/vuejs/vue/blob/dev/src/core/global-api/extend.js

  Vue.extend = function (extendOptions: Object): Function {
  ...
  // 在这里会触发mergeOptions方法
  Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
  ...
}

// mergeOptions 源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  ...

  const options = {}
  let key
  // parent对象内包含components、filter,、directive
  for (key in parent) {
    mergeField(key)
  }
  // child对象内对应的是Vue.extend内定义的参数
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
  // 这一步是根据传入的key找到不同的合并策略filter、components、directives用到合并策略是这个方法mergeAssets和data用到的不一样，当合并到data的时候会进入专属的合并策略方法内
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
}

// strats.data  源码地址https://github.com/vuejs/vue/blob/dev/src/core/util/options.js
strats.data = function (
  parentVal,
  childVal,
  vm
) {
  if (!vm) {
  // 如果data不是function的话会直接走下面的报错信息
    if (childVal && typeof childVal !== &#39;function&#39;) {
      process.env.NODE_ENV !== &#39;production&#39; && warn(
        &#39;The "data" option should be a function &#39; +
        &#39;that returns a per-instance value in component &#39; +
        &#39;definitions.&#39;,
        vm
      );

      return parentVal
    }
    return mergeDataOrFn(parentVal, childVal)
  }

  return mergeDataOrFn(parentVal, childVal, vm)
};

ログイン後にコピー

その他の状況

実際、上記のコードは単なる単純なプロセスです。実際の開発では、次のような同様の状況が発生します。サブコンポーネントとルートはすべて mergeOptions メソッドを呼び出すため、データをオブジェクトとして定義できません。一番下

いつオブジェクトとして定義できるか

vueが初期化されるとき、次のように

new Vue({
  data: {
    linke: &#39;//sinker.club&#39;
  }
})

ログイン後にコピー

意味

さて、上で多くのことを述べてきましたが、これを行うことにどのような意味があるのでしょうか?なぜこれらの状況をオブジェクトとして定義できないのでしょうか? 実際、この質問に答えるには、js 自体に戻る必要があります。ご存知のように、js のデータ型は参照型と基本型に分けられます。参照型には、オブジェクト、配列、関数が含まれます。参照型とは何かは説明されません。ここで説明されています。

  var obj = {link: &#39;//www.sinker.club&#39;}
  var obj2 = obj
  var obj3 = obj
  obj2.link = "//gitlab.sinker.club"
  console.log(obj3.link) // "//gitlab.sinker.club"

ログイン後にコピー

上記のコードは、obj3 と obj2 の両方がメモリ内のアドレスを指しているため、obj2 の変更が obj3 に影響を与えるという問題が 1 つあります。もちろん、ディープコピーを使用してこれに対処できます。問題。

JSON .parse(JSON.stringify(obj))
deepClone(obj)

しかし、これら 2 つの方法は毎回開発またはフレームワークが必要ですディープコピーが必要ですデータ量が多いとパフォーマンスに良くありません。では、Vue はどのように行うのでしょうか?データを関数として定義する

function data() {
  return {
   link: &#39;//sinker.club&#39;
  }
}

var obj = test()
var obj2 = test()

obj2.link ="//gitlab.sinker.club"
console.log(obj.link) &#39;//sinker.club&#39;

ログイン後にコピー

なぜこれを行うのですか?解決シナリオは何ですか?

たとえば、サブコンポーネントを定義すると、データはオブジェクトとして定義されます。このコンポーネントは複数の場所で参照されます。このコンポーネントを参照しているデータの 1 つが変更されると、そのデータも変更されます。このコンポーネントを参照する他のデータも同時に変更されます。

#拡張知識:vue インスタンスを定義するときは、データ属性は次のいずれかです。オブジェクトは関数にすることもできます。

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

ログイン後にコピー

コンポーネントで定義されるデータ属性は関数のみにすることができます。

コンポーネントデータがオブジェクトとして直接定義されている場合

Vue.component(&#39;component1&#39;,{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }})

ログイン後にコピー

警告メッセージ

Vueでデータを初期化する方法は何ですか?

説明:

[関連する推奨事項: vuejs ビデオチュートリアル、Web フロントエンド開発]

以上がVueでデータを初期化する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。