こんにちは、Xiao Suoqi です。慎重に作成された Vue チュートリアルは常に更新されています。学び、定着させ、落とし穴を避けたい場合は、一緒に学びましょう~
オブジェクト定義の設定方法
コード
データ エージェントを導入するには、まずコードを記述してから説明を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>回顾Object.defineproperty方法</title>
</head>
<body>
<script type="text/JS" >
let number = 18
let person = {
name:'张三',
sex:'男',
}
// 它的功能是给person配置一个age属性
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false,f12可以看到颜色为浅色，用Object.keys(person)获取不到age的key（不可枚举）
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
//get:function(){}=
get(){
// 如果不这样关联，number值不变，从上往下执行完结束，是修改不了的必须关联
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
// console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
画像-20230812002421058
writable:false デフォルト値は false で、変更できません。
画像-20230812003530814
書き込み可能：true
画像-20230812003444218
オブジェクトへの直接書き込みは任意に変更・削除が可能ですが、設定項目の追加はオプションではなくなり、変更・削除したい場合には設定が必要となります。
ゲッターが追加されると、定義された属性は変更に応じて変更され、属性は属性 get - を呼び出すことによって制御されます。invoke property getter
画像-20230812004517285
データブローカー
オブジェクト プロキシを介して別のオブジェクトのプロパティを変更する
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/JS" >
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
-
getメソッド内で のobj2.x値を読み取ると、メソッドは内部的に を使用するobj.xため、実際には の値が返されます。getobj.x -
このメソッドで
setは、 の値を設定するとobj2.x、この値を実際に に割り当てobj.x、それによってobjオブジェクトのプロパティを変更します。x
データ内のすべてのデータはデータ エージェントを通過します。
Vue インスタンスのオプションでデータ プロパティを定義するとdata、Vue はこれらのデータ プロパティを Vue インスタンスに自動的にプロキシします。
具体的には、dataVue でプロパティを定義すると、Vue はそのプロパティを Vue インスタンスに追加し、このプロパティへの変更を追跡する内部リアクティブ データ オブジェクトを作成します。その後、この属性を使用するときに、Vue はこの属性へのバインディングを確立します。応答性の高いデータ オブジェクトを使用すると、データが変更されたときにテンプレートが自動的に更新されます。
このプロセスはデータ プロキシの概念を実装します。つまり、 で定義されたプロパティは Vue インスタンス上でプロキシされるdataため、Vue インスタンスのこれらのプロパティに直接アクセスできます。実際、これらのプロパティは内部のリアクティブ データ オブジェクトに保存されます。
以下の名前と年齢をクリックすると値が表示されます。これらはすべてデータエージェントであり、内容は変更される可能性があります。
画像-20230813001425128
ソチ Q&A
Q: メソッドをデータに入れるとどうなりますか? プロキシを使用しますか?
A: プロキシを使用します。定義されたメソッドはプロキシを使用すべきではありませんが、プロキシはデータとは異なります。データは変更されますが、メソッドは変更されません。これにより、コードの煩雑さが確実に増加します。
これは意味がなく、セッターとゲッターを使用する場所がありません。
なので、普通にメソッドに記述してみましょう。
お役に立ちましたら、高評価をお願いします~