WeChatウィジェットでwatchを使用して傍受する

直接使いたい方はこちらへどうぞhttps://blog.csdn.net/singlever/article/details/106276787


Vueの中の傍受は便利で、資源を消費していますが、確かに開発効率を大幅に向上させることがあります.
私のケースはcomponentコンポーネントに書いてあります.もちろんpageページも同じです.attachedをonloadに変えてwatchを直接Pageに書けばいいです.

Component({
  properties: {},
  data: {
    //            
    ze:'123',
    dd:'312'
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          console.log(val)
        }
      }
    },
    btns(){
      this.setData({ze:321})
    }
  },
  attached(){   //   beforeMounted      
    Object.keys(this.watch()).some(item => {
      Object.defineProperty(this.data,item,{
        set:this.watch()[item]
      })  
    })
  }
})

リスニングが必要な変数は、vueの書き方と同様にwatchに書き込まれるが、ここではreturnに追加する、例えば例zeリスニングが必要であればthisに呼び出す.setData()傍受する関数構造を矢印関数例えば例zeに変換
総じて技術的な難点はなく、主に原生のObject APi Objectに頼っている.defineProperty()で学んだことのないフォローアップを見ることができます.watchでvalを直接変数に割り当てると、ここでは論理層だけが変化します.データをビューレイヤに同期する場合は、watchで直接データをsetDataとエラーが表示されます.たとえば、次のようにします.

        ze:(val) => {
          this.setData({ze:val})
        }
//erorr

本質的にwatchの中のze関数は本質的にsetであるため、1つの変数のsetの中で自分に値を割り当てて、これは死の循環で、もちろん間違いを報告して、もっと良い方法があるかもしれませんいくつかの原因のためしばらく時間がなくて、方法1を与えます:

Component({
  properties: {},
  data: {
    //            
    ze:'123', //     
    dd:'312', //     
  }, 
  methods: {
    watch(){
      return{
        ze:(val) => {
          this.setData({dd:val})
        }
      }
    }
  }

Zを傍受してddを変更することによって、ddはzeのビューレイヤでの身代わりに相当し、問題:1.変数浪費2.面白くない(hhh)
 
//2020 5.22時間を割いてパッケージングしたhttps://blog.csdn.net/singlever/article/details/106276787