Vue.jsにおけるdata,propsおよびcomputedデータ
1221 ワード
Vueを使っています.jsが開発をするとき、data、props、computedを知っているに違いない.こんなに長い間Vueを使ってこの3つのものをまとめて、まず公式サイトがどのように彼らを定義するかを見てみましょう.https://cn.vuejs.org/v2/api/#data .
dataは、Vueインスタンスのデータオブジェクトです.Vueはdataの属性をgetter/setter、すなわちObjectに変換する.definePropertyメソッド(公式サイトでは応答式の原理を深く紹介しています).オブジェクトは純粋なオブジェクト(ゼロまたは複数のkey/valueペアを含む)でなければなりません.この中のデータはすべて監視されているので、この中のデータはビューレイヤに表示されているデータが望ましい.ビューレイヤに表示されていない変数といえば.外に定義したりvmオブジェクトに配置したりできます.
例:
bar変数はページに表示されるフィールドで、bazは関数で使用されるデータです.ビューに表示されなければdataに書く必要はありません.このように
コストを削減し、パフォーマンスを向上させることができます.
propsはpropsであり、親コンポーネントからのデータを受信するために配列またはオブジェクトであってもよい.propsは単純な配列であってもよいし、代替としてオブジェクトを使用してもよい.
オブジェクトを使用すると、タイプ検出、カスタムチェック、デフォルト設定などの高度なオプションを設定できます.
computedでは、計算プロパティがVueインスタンスに混入します.すべてのgetterとsetterのthisコンテキストは、自動的にVueインスタンスにバインドされます.計算属性も
に置き換えられます.
dataは、Vueインスタンスのデータオブジェクトです.Vueはdataの属性をgetter/setter、すなわちObjectに変換する.definePropertyメソッド(公式サイトでは応答式の原理を深く紹介しています).オブジェクトは純粋なオブジェクト(ゼロまたは複数のkey/valueペアを含む)でなければなりません.この中のデータはすべて監視されているので、この中のデータはビューレイヤに表示されているデータが望ましい.ビューレイヤに表示されていない変数といえば.外に定義したりvmオブジェクトに配置したりできます.
例:
let baz = ''
export default {
data() {
return {
bar: 'bar'
}
},
methods: {
testFn() {
// baz
}
}
}
bar変数はページに表示されるフィールドで、bazは関数で使用されるデータです.ビューに表示されなければdataに書く必要はありません.このように
コストを削減し、パフォーマンスを向上させることができます.
propsはpropsであり、親コンポーネントからのデータを受信するために配列またはオブジェクトであってもよい.propsは単純な配列であってもよいし、代替としてオブジェクトを使用してもよい.
オブジェクトを使用すると、タイプ検出、カスタムチェック、デフォルト設定などの高度なオプションを設定できます.
computedでは、計算プロパティがVueインスタンスに混入します.すべてのgetterとsetterのthisコンテキストは、自動的にVueインスタンスにバインドされます.計算属性も
に置き換えられます.
computed: {
// ,
aDouble: function () {
return this.a * 2
},
//
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}