チャットパート
まず、双方向のデータバインディング、つまり、データがビューに変更され、ビューがデータに変更される機能について説明します。この機能を React で実現するには、制御されたフォームを記述する必要があります。 vue のコマンド、とても便利です
v-model 命令、この命令は非常に強力であると言えます。双方向のデータ バインディングを実現できます。まずは簡単な使用法を見てください。
<div id="app">
<input type="text" v-model="message">
<p>您输入的内容是: {
{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
このようにして双方向のデータバインディングが実現できるのですが、それが何なのかご存知ですか？
家にもっと近い
この問題に関してはバージョンごとに話さなければなりませんが、Xiaobi も最近 vue3 を完成させたので、最初にそれについて話しましょう。
vue2.x では Object 上のメソッドを使用して応答性を実装していますが、vue3 では Proxy を使用して応答性を実装しています。
vue2.xではv-model命令をObject.defineProperty()メソッドに基づいて変換しgetter/setter、データが変化した場合はsetter関数が該当するビューに更新を通知することで双方向のデータバインディングを実現しています。data 関数によって返されるデータが応答性があることは誰もが知っています。これは、大きなフロントエンド フレームワークの主な機能でもあります。では、応答性とは何でしょうか?
データが変更されると、フレームワークがそれを検出し、ページの更新に役立つことを理解してください。
上記を理解した上で、疑似コードを書いてみましょう
let person = {
name: '张三',
age:20
}
let vm = {
};
Object.defineProperty(vm, 'name', {
set(value) {
console.log(`有人新增或修改了vm身上的属性name,我要去更新页面了`)
person.name = value
},
get(){
return person.name
}
})
Object.defineProperty(vm, 'age', {
set(value) {
console.log(`有人新增或修改了vm身上的属性age,我要去更新页面了`)
person.age = value
},
get(){
return person.age
}
})
vm の値が変更されると、ページを更新するロジックがトリガーされ、レスポンシブを実現します。
では、これの何が問題なのでしょうか。なぜ vue3 はそれを最適化するのでしょうか?
1. まず第一に、このメソッドは一度に 1 つのオブジェクトの 1 つのプロパティしか監視できないため、複雑なオブジェクトの場合、最下層はループ処理を使用し、最適化することができません。
2. このメソッドでは属性の追加と削除を監視できません。
3. 配列型の場合、添字等でデータを変更しても検出できません
vue2では注意してください
1. オブジェクトへの属性の追加は直接追加できませんが、渡す必要がありますthis.$set(要操作的对象,添加的属性,值)。そうしないと、Vue,set(要操作的对象,添加的属性,值)ページが検出されてページが更新されます。
2. オブジェクトの属性を削除するには、xxx.xx を直接削除することはできませんが、this.$delete(要操作的对象,删除的属性)
vue3ではプロキシによりレスポンシブデザインを実現しています、疑似コードを見てみましょう
let person = {
name: '张三',
age:20
}
const p = new Proxy(person, {
set(target, prop, value) {
console.log(`有人新增或修改了p身上的属性${
prop},我要去更新页面了`)
Reflect.set(target, prop, value)
},
get(target, prop) {
console.log(`有人读取了p身上的属性${
prop}`)
return Reflect.get(target, prop)
},
deleteProperty(target, prop) {
console.log(`有人删除了p身上的属性${
prop},我要去更新页面了`)
return Reflect.deleteProperty(target, prop)
}
})
プロキシ メソッドは、オブジェクトのすべてのプロパティを一度に監視でき、プロパティの削除も監視でき、配列型の添え字の変更も検出できるため、2.x で残された問題が解決されます。
エピローグ
1. プロキシによって実装されたデータ応答システムはより柔軟かつ効率的であり、オブジェクト全体をプロキシできます。
2. Object.defineProperty() メソッドは単一のオブジェクト プロパティのみをプロキシでき、オブジェクト全体はループまたは再帰によってのみ監視できます。
3. Vue2.x の応答原理は、Object.defineProperty() に基づいて実現されます。
4. Vue3 の応答原理は、Proxy プロキシ + Reflect に基づいて実現されます。
5. 作るのは簡単ではありませんが、ワンクリックと 3 回連続でやってみましょう。皆さんのサポートが私の最大のモチベーションです。