search

gruhn / vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes.
https://gruhn.github.io/vue-qrcode-reader
MIT License
2.03k stars 330 forks source link

fix(QrcodeStream): ignore structually equal prop changes #419

Closed gruhn closed 4 months ago

gruhn commented 4 months ago

Props like constraints and formats which carry non-primitive values might receive structurally equal updates. For example, let constraints be the variable that is passed to QrcodeStream:

<qrcode-stream :constraints="constraints" />

and imagine the script section looks like this:

const constraints = ref({})

setInterval(() => {
  constraints.value = { deviceId: 'whatever' }
}, 100)

This would keep triggering updates in QrcodeStream although the constraints don't actually change. This is because the assigned object is referencially different every time and Vue only checks referencial equality. A less contrived example where this happens, is when the template looks like this:

<qrcode-stream :constraints="{ deviceId: 'whatever' }" />

Whenever Vue re-evaluates the passed object it creates a referencially different copy. To avoid this problem we now maintain "cached" versions of these props and only update them when we detect strucural changes.

netlify[bot] commented 4 months ago

Deploy Preview for vue-qrcode-reader ready!

Name Link
Latest commit 91b6eeda390654a69c9cf4026e6d4377210b29cc
Latest deploy log https://app.netlify.com/sites/vue-qrcode-reader/deploys/65ce556b45c27b0008df9ad6
Deploy Preview https://deploy-preview-419--vue-qrcode-reader.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions[bot] commented 4 months ago

:tada: This PR is included in version 5.5.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket: