Vue.jsによるゲッターとセッターについての考えについて話しましょう

原因

Vue インスタンスの下のデータ オブジェクトの属性を出力したときに、興味深いことを発見しました:

各属性には 2 つの対応する get メソッドと set メソッドがあります。これは不要だったと思うので、オンラインで次のことにアクセスしました。 Vue の双方向バインディングの実装原理を確認すると、Angular はデータ ダーティ検出を使用して、モデルが変更されるとすべてのビューを確認します。ビューを変更する前に、関連データにバインドされます。 Vue で使用されるパブリッシュ/サブスクライブ モデルは、ポイントツーポイント データ バインディングです。

Vue のデータ バインディングには、compile=>link の 2 つのステップしかありません。

vue がモデルに対するユーザーの変更をどのように監視するかについて考えてきましたが、Vue のデータ内の各属性が set 属性と get 属性を持っていることを初めて理解しました。

通常は、次のようにオブジェクトを作成し、そのプロパティを変更します。

var obj = {
 val:99
}
obj.val = 100;
console.log(obj.val)//100

問題はありませんが、監視したい場合は、このオブジェクトのプロパティを変更するときに、「何かをする」に移動します、 あなたならどうしますか？

関連する考え

これにはゲッターとセッターを使用する必要があります。

今、コーダー オブジェクトに name 属性を追加したいとします。name 属性を更新するたびに、何かを完了する必要があります。これを行うことができます。このオブジェクトの印刷効果と Vue の最上位データ オブジェクトは同じであり、両方とも get 属性と set 属性を持っていることがわかります。

上記のコードを段階的に分析してみましょう。とても興味深いです。まずオブジェクトを作成しましょう:

var Coder = function() {
 var that = this;
 return {
  get name(){
   if(that.name){
    return that.name
   }
   return '你还没有取名'
  },
  set name(val){
   console.log('你把名字修成了'+val)
   that.name = val
  }
 }
}
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

これをもう一度作成します:

var Coder = function() {...}

次が最も重要です。戻ります:

りー

名前が示すように、 , getは値の取得、setは代入の場合、通常はobjを使います。 .prop を使用して値を取得および割り当てます。しかし、これには問題があります。オブジェクトの値が変更されたことをどのように確認すればよいでしょうか。ということで、セットの出番です。

もちろん、get と set はこのようにしてのみ理解できますが、まったく別のものです。

次に、コーダーのインスタンス isMe を作成します。この時点では、isMe には name 属性がありません。isMe.name を呼び出すときに、get name(){...} と入力して、最初に isMe If であるかどうかを判断します。 name 属性がある場合、答えは「いいえ」です。name 属性を追加して値を割り当てます。「name 属性がまだ指定されていない場合」、name 属性を返します。

これを見たら、get の使い方を理解する必要があります。はい、get は値を受け取る関数と考えることができます。関数の戻り値は、関数が取得する値です。

より重要なのは set 属性だと思います。インスタンスに値を割り当てるときは、

このとき、仮パラメータとして set name(val){...}; を入力します。 val は name 属性値に割り当てたもので、この関数では双方向バインディングなど、さまざまなことができます。この値の変更はすべて set を通過する必要があるため、ユニバーサル リスナーに相当する他のメソッドでは変更できません。

この機能を実現するには別の方法もあります。

ES5 のオブジェクト プロトタイプには、get と set をオブジェクトにバインドするために特別に使用される 2 つの新しい属性 __defineGetter__ と __defineSetter__ があります。

は次のように記述できます:

var that = this;

効果は同じです。プロトタイプに記述されているため、継承して再利用できます。

概要

上記がこの記事の全内容です。この記事の内容が皆さんの学習や仕事に少しでも役立つことを願っています。ご質問がある場合は、メッセージを残して連絡してください。

Vue.js によって引き起こされるゲッターとセッターに関する考えに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。