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オブジェクトに配置したりできます.
例:
	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
				}
			}
		}