[Vuejs]-What's the point of hardcoded class properties in Vue Options API/

by

1👍

✅

data() is a reactive object. It is being watched by Vue for changes and, should any of the values declared in the object returned by data() change, Vue will update all places where it is used (computed, methods, template).

Declaring custom properties on the base export of a Vue (var_b in your example) is invalid. The application won’t error, but nothing you put there is available under this. (or in the template).

If you want a simple constant read when the component is parsed and don’t care about Vue watching it for changes, place it in the root of the <script>:

const b = 10
export default {
  data: () => ({
    a: 5
  }),
  computed: {
    c() { return this.a * b }
  }
}

Whenever you change a, c will automatically become current value of this.a * b.

Leave a comment