Vue データの応答性の概要

obj0 = {
 姓：「高」
 名前：「袁袁」
 年齢: 18
};

// 要件 1、名前を取得する let obj1 = {
 姓：「高」
 名前：「袁袁」
 名前（） {
  this.surname + this.name を返します。
 },
 年齢: 18
};

console.log("要件 1: " + obj1.Name()); //Gao Yuanyuan

// 要件 2: 名前は括弧なしで取得できる let obj2 = {
 姓：「高」
 名前：「袁袁」
 取得名() {
  this.surname + this.name を返します。
 },
 年齢: 18
};

console.log("要件 2: " + obj2.Name); //Gao Yuanyuan

// 要件 3: 名前は次のように記述できます。let obj3 = {
 姓：「高」
 名前：「袁袁」
 取得名() {
  this.surname + this.name を返します。
 },
 名前を設定する(xxx){
  this.surname = xxx[0]
  this.name = xxx.slice(1)
 },
 年齢: 18
};

obj3.Name = '高元元'

console.log(`要件 3: 姓 ${obj3.last name}、名 ${obj3.first name}`) // Gao Yuanyuan

var_xxx = 0
オブジェクト.defineProperty(obj3,'xxx',{
 得る（）{
  _xxxを返す
 },
 設定(値){
  _xxx=値
 }
})

データ0 = {
 0 です
}

データ1 = {} とします

オブジェクト.defineProperty(data1, 'n', {
 値: 0
})

console.log(`要件 1: ${data1.n}`) //要件 1: 0

データ2 = {} とします

data2._n = 0 // _n は n の値を秘密裏に保存するために使用され、デフォルト値は 0 です

オブジェクト.defineProperty(data2, 'n', {
 得る（）{
  これを返す。_n
 },
 設定(値){
  if(値 < 0) 戻り値
  this._n = 値
 }
})

console.log(`要件2: ${data2.n}`)//0
データ2.n = -1
console.log(`要件 2: ${data2.n} が -1 に設定され、失敗します`) //0 が -1 に設定され、失敗します data2.n = 1
console.log(`要件 2: ${data2.n} が 1 成功に設定されています`) //0 が 1 成功に設定されています

let data3 = proxy({ data:{n:0} }) // 括弧は匿名オブジェクトなのでアクセスできません function proxy({data}){
 定数オブジェクト = {}
 // ここでの 'n' はハードコードされています。理論的には、データのすべてのキーをトラバースする必要があります。ここでは簡略化しています // 理解できないかもしれないので Object.defineProperty(obj, 'n', { 
  得る（）{
   データを返す.n
  },
  設定(値){
   if(値<0) 戻り値
   data.n = 値
  }
 })
 return obj // obj はプロキシです}

// data3はobjです
console.log(`要件3: ${data3.n}`)
データ3.n = -1
console.log(`要件 3: ${data3.n}、-1 に設定が失敗しました`)
データ3.n = 1
console.log(`要件 3: ${data3.n}、成功を 1 に設定`)

myData = {n:0} とします
let data4 = proxy({ data:myData }) // 括弧内のオブジェクトは匿名であり、アクセスできません // data3 は obj です
console.log(`引数: ${data4.n}`) //0
私のデータ.n = -1
console.log(`議論: ${data4.n}、-1 に設定できませんでした!?`)

myData5 = {n:0} とします
let data5 = proxy2({ data:myData5 }) // 括弧は匿名オブジェクトなのでアクセスできません function proxy2({data}){
 // ここでの 'n' はハードコードされています。理論的には、データのすべてのキーをトラバースする必要がありますが、ここでは単純化します。let value = data.n // 開始 n を保存します
 Object.defineProperty(data, 'n', //新しいnを宣言する
  得る（）{
   戻り値
  },
  set(新しい値){
   if(newValue<0) 戻り値
   値 = 新しい値
  }
 })

定数オブジェクト = {}
 オブジェクト.defineProperty(obj, 'n', {
  得る（）{
   データを返す.n
  },
  設定(値){
   if(value<0)return//この文は冗長データです。n = value
  }
 })
 
 return obj // obj はプロキシです}

// data3はobjです
console.log(`要件5: ${data5.n}`) //0
myData5.n = -1
console.log(`要件 5: ${data5.n}、-1 に設定失敗`) //0
myData5.n = 1
console.log(`要件 5: ${data5.n} を 1 に設定しました`) //1