preface

Spring Festival, not a single tweet update, lazy. This week officially enters the brick-moving state, continue refueling ヾ(◍°∇°◍) Blue ゙. If you do not want to see too much nonsense, it is suggested to jump directly to the end of the summary can be seen, this article is mainly personal to the problem of the generation to solve the simple replay.

The question

Recently I took over a new demand, because it is still under development, so I simply borrowed the following example to illustrate.

Suppose there is the following business process in the entry page of the applets (assuming that index is the entry page), how to realize it? Prerequisites:

1. New pop-ups & Exclusive benefits pop-ups are sensitive to user identity information, so the latest status needs to be updated every time the page is displayed.

2, exclusive benefits pop-up depends on the new pop-up before deciding whether to show

Consider a point:

1. Determine whether the new person relies on the interface A&& business is relatively independent and suitable for implementation in compA components;

2, determine whether there is an exclusive welfare dependency interface B& business is relatively independent, suitable for implementation in compB components;

According to the independence of the business & for the convenience of simple description, they are encapsulated into independent business components. The new popup component is named compA temporarily, and the exclusive benefit popup is named compB.

Let’s look at the technical implementation!

The figure above shows a process for the overall technical implementation. Next, the code below can be compared with the process.

The main code for compA is as follows:

// WXML <view> </view> // js Component({pageLifetimes: {show: Function () {this.triggerEvent('showB', {showB: true})},}})Copy the code

The main code for index is as follows:

// WXML <compA bindshowB="showB"></compA> <compB canSee="{{canSee}}"></compB> <view bindtap="hideIndex"> //js const app = getApp() Page({ data: {}, showB: function (e) { const { detail: {showB } }= e this.setData({ canSee: ShowB})}, hideIndex: function(){wx.navigateTo({url: '/logs/logs'// logs/)}})Copy the code

The main code for compB is as follows:

</view> //js Component({properties: {canSee: {type: Boolean, value: false, observer: Function (newval, oldval){if(newval){console.log('properties-observer', function(newval, oldval){console.log('properties-observer', newval) } } } } })Copy the code

The key to the

Step 1:Go to the index page and assume that compA passed up the value of showB to be true[this is critical] look at the console.log console output: Step 2:Click the jump to another page button, then click the header back button, and watch console.log output:By comparison, it is not possible to use the Observer property to listen when the properties property value has not changed.

Difference: You want to return from a page to the current page and still be able to update compB’s status.

The solution

Replace the compB js file with the following:

Component({ properties: { canSee: { type: Boolean, value: false, observer: Function (newval, oldval){if(newval){console.log('properties-observer', function(newval, oldval){console.log('properties-observer', newval) } } } }, observers: { 'canSee': function(canSee){ if(canSee){ console.log('observers', canSee) } } }, })Copy the code

Repeat step 1 above and you will find:Repeat step 2 above and you will find:At this point, you can see that requirements can be implemented with the observers attribute.

= = = = = = = = = = = = = = = = = = = = = = = = = = = eccentrics divider, a summary to the = = = = = = = = = = = = = = = = = = = = = = = = = = = primarily demonstrate above is triggered when the value of the basic data types, don’t know whether the performance of a reference type is consistent? Moving on, replace the index file as follows

// wxml <compA bindshowB="showB"></compA> <compB canSee="{{canSee}}" obj="{{obj}}"></compB> <view // js const app = getApp() Page({data: {}, showB: function (e) { const obj = { name: "name" } this.setData({ obj }) }, hideIndex: function(){ wx.navigateTo({ url: The '/logs/logs'// logs page is designed to simulate a jump from index to another page and back again})}})Copy the code

Replace compB’s js file as follows:

Component({ properties: { obj: { type: Object, value: null, observer: Function (newval, oldval){if(newval){console.log('properties-observer-obj', function(newval, oldval){if(newval){console.log('properties-observer-obj', newval) } } } }, observers: { 'obj': function(obj){ if(obj){ console.log('observers-obj', obj) } } }, })Copy the code

Repeat step 1. The result is as follows:Repeat Step 2. The result is as follows:After comparison, you will find the following conclusions:

There are differences between the properties-> Observer attribute and the observers attribute regarding the behavior of data types for incoming values

The specific differences are as follows:

Do you think this is the only difference between the two properties? Of course not. Let’s read on

extension

Index = compB; index = compB; index = compB;

// WXML <compB canSee="{{canSee}}" ></compB> <view bindtap="setDemo"> function(){ this.setData({ canSee: true, }) } })Copy the code

The compB file is replaced as follows

</view> // js Component({properties: {canSee: {type: Boolean, value: false, observer: function(newval, oldval){ if(newval){ console.log('properties-observer', newval) } } }, }, data: { age: 20 }, observers: { 'canSee': Function (canSee){if(canSee){console.log('observers-properties ', SetData ({age: 20}) // this. SetData ({age: 20}) // this. True //})}}, "age": function(age){console.log('observers- internal setData attributes ', age)}},})Copy the code

Try opening the commented code above and you will find that your developer tools are stuck

This is also mentioned on the official website where special attention is needed, detailed introduction is as follows:

Observers are astute about observing changes in attributes or internal data. An observer triggers a listener when the value of a defined attribute variable changes;

conclusion