Vue 2.xとVue 3.xの双方向結合原理について詳しく説明します。

3943 ワード
Vue 2.x 双方向 結合
双方向の結合の原理
Object.defineproperty（）によりオブジェクト属性を再定義するset方法、get方法により実現され、この属性から値を取るとgetメソッドが起動され、この属性を変更するとsetメソッドが起動されますので、viewを更新する方法をいくつか置いておけばdata更新viewが実現できます。
ビュー上のデータが変更されると、dataのデータも変更されます。dataのデータが変更されると、ビュー中のデータもObject.defineProperty()を変更します。
Object.defineProperty()方法は、オブジェクトに新しい属性を直接定義したり、オブジェクトの既存の属性を変更したりして、このオブジェクトに戻ります。
文法：Object.defineProperty(obj, prop, descriptor)パラメータ:
  • obj
    属性を定義するオブジェクト。
  • prop
    定義または変更する属性の名前またはSymbol。
  • descriptor
    属性記述子を定義または変更します。
    • 戻り値
    関数のオブジェクトに渡されます。
    オブジェクトに現在存在する属性記述子には、データ記述子とアクセス記述子の2つの主要な形式があります。データ記述子は、値を持つ属性であり、書き込み可能であり、書き込み不可であってもよい。アクセス記述子は、getter関数とsetter関数によって記述された属性です。一つのディスクリプタはこの二つのうちの一つしかない。同時に両者ではない。
    作用
    *オブジェクトの属性を一つに設定する方法は2つあります。
    ＊get：この属性から値を取るとgetメソッドが起動します。
    *set:この属性に値を付けるとsetメソッドがトリガされます。
    
 let obj = {}
 //  obj name        get&set
 Object.defineProperty(obj,'name',{
 set:function (value){//value   name     
  console.log('   set');
  this._name=value//             name,     set
 },
 get:function(){
  console.log('   get');
  //          
  return this._name
 }
 })

    name属性に値を付ける時にset方法をトリガし、set方法で値を保存します。
    値を取る時にget方法をトリガし、get方法で値を戻ります。
    vue 2.x双方向バインディングの原理
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <!--      V -->
 <div id="v"></div>
 <input type="text" id="ipt">
</body>
<script>
 // MVVM：
 //  V  ，M    
 //  M  ，V    
 //      M

 let data = {}
 //  data  name        get ，set
 Object.defineProperty(data,'name',{
 set:function(value){
  //  M   ，V    
  document.querySelector('#v').innerHTML = value
 },
 get:function(){
  return this._name
 }
 })
 //  input                 
 document.querySelector('#ipt').oninput = function(e){
 data.name = e.target.value
 }
</script>
</html>
    入力ボックスの内容が変更されると、oninputイベントが直ちにdataの内容を変更し、dataの中のnameが変更されるとset方法がトリガされ、最新の値をvに割り当て、データの双方向結合が実現される。
     
    vue 3.x双方向バインディングの原理
    Vue 3.xはproxy（代理）により実現されるデータの双方向結合である。
    proxy
    Object.definePropertyと同様に、オブジェクトの属性に2つの方法get&setを追加することもできます。
    違い:
  • Object.definePropertyは、オブジェクトの1つの属性にのみget&set方法を追加することができます。
  • Proxy:オブジェクトに一括で属性を設定するget&setメソッド
    • 使い方:
  • 新たなproxyオブジェクトを作成します。
    
	let p = new Proxy(obj,{get:function(){},set:function(){}})

    
<script>
 let obj = {}
 let p = new Proxy(obj,{
 get:function(obj,prop){
  //obj :       prop:      
  console.log('   get');
  return obj[prop]
 },
 set:function(obj,prop,value){
  // obj:      
  // prop      
  // value      
  console.log('   set');
  //           
  obj[prop] = value
 }
 })
</script>

    vue 3.xデータの双方向結合を実現する。
    締め括りをつける
    ここで、Vue 2.xとVue 3.xの双方向結合原理に関する記事を紹介します。Vue 2.xとVue 3.xの双方向結合原理に関する内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。
    • Shellスクリプトは、国内の各キャリアのネットワークセグメントスクリプトを共有します。
    nuxt導入コンポーネントと共通のスタイルの操作