Missing search result for setTimeout

[michaelCTS]

I'm new to Vue but have angualarJS (aka angular 1) experience and back then, anything outside of the angular scope had to be brought back into the scope for reactivity. setTimout and XHR calls were notorious for this and could get unwieldy.

Is this not an issue for VueJS anymore? My first instict was to search for setTimeout, but there are no results.

[mahmudunnabikajal]

@michaelCTS In Vue.js, you don’t need to manually bring things "back into scope" for reactivity, as Vue's reactivity system handles this much more smoothly. Vue uses a reactive data model, automatically tracking changes and propagating to the DOM.

Check this Option API example:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello"
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = "Hello, Vue!";
    }, 2000);
  }
};
</script>

In this example, Vue automatically tracks changes to the message, so when setTimeout updates this.message, the DOM will update as well. There's no need to trigger a scope digest manually.

Note: Since setTimeout is a core function of JavaScript, you can use it directly in Vue components.

[michaelCTS]

Thanks for explaining @mahmudunnabikajal. I had a look at How reactivity works and understand it better now. Getters, setters and proxies didn't exist back in the days of angularjs / angular 1. Things sure have changed.

Maybe it could be useful to add a sentence to the linked document? Something along the lines of

Thanks to features introduced in ES6, dirty checks due to setTimeout and XHMLHttpRequest`, like in frameworks of old for example AngularJs (v1 of Angular), are no longer necessary.