Publish to my blog (weekly)

• Teleport | Vue.js

  • Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.
  • If <teleport> contains a Vue component, it will remain a logical child component of the <teleport>'s parent:
  • This also means that injections from a parent component work as expected, and that the child component will be nested below the parent component in the Vue Devtools, instead of being placed where the actual content moved to.
  • A common use case scenario would be a reusable <Modal> component of which there might be multiple instances active at the same time.
  • multiple <teleport> components can mount their content to the same target element. The order will be a simple append - later mounts will be located after earlier ones within the target element.

• Computed and Watch | Vue.js

  • To apply and automatically re-apply a side effect based on reactive state, we can use the watchEffect method.
  • It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
  • watchEffect(() => console.log(count.value)) // -> logs 0
  • count.value++  // -> logs 1
  • it returns a stop handle which can be called to explicitly stop the watcher:
  • Sometimes the watched effect function will perform asynchronous side effects that need to be cleaned up when it is invalidated (i.e. state changed before the effects can be completed)
  • An async function implicitly returns a Promise, but the cleanup function needs to be registered immediately before the Promise resolves.
  • Vue relies on the returned Promise to automatically handle potential errors in the Promise chain
  • Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick".
  • • The count will be logged synchronously on initial run.
    • When count is mutated, the callback will be called before the component has updated.
  • In cases where a watcher effect needs to be re-run after component updates (i.e. when working with Template Refs), we can pass an additional options object with the flush option (default is 'pre'):
  • {  flush: 'post'  }
  • The onTrack and onTrigger options can be used to debug a watcher's behavior.
  • onTrack will be called when a reactive property or ref is tracked as a dependency.
  • onTrigger will be called when the watcher callback is triggered by the mutation of a dependency.
  • onTrack and onTrigger only work in development mode.
  • watch requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.

  • Compared to watchEffect, watch allows us to:

    • Perform the side effect lazily;
    • Be more specific about what state should trigger the watcher to re-run;
    • Access both the previous and current value of the watched state.
  • directly a ref:
  • a getter function that returns a value
  • // watching a getter
  • () => state.count,
  • // directly watching a ref
  • count
  • watch multiple sources at the same time using an array
  • [firstName, lastName]
  • object
  • an array
  • () => [...numbers],
  • array
  • a deeply nested objec
  • the deep option to be true:
  • () => state,
  • () => state,
  • { deep: true }
  • To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as lodash.cloneDeep
  • () => _.cloneDeep(state),

Posted from Diigo. The rest of my favorite links are here.