上QQ阅读APP看书，第一时间看更新

Using Vue's data option as a function

Note that the data option of our Vue instance can be either an object or a function. An example of data as an object can be seen in the previous code. Using data as a function is easy as well.

Data as an object doesn't work well with reusable components. For this reason, using data as a function is, generally speaking, a more useful way to use the data option in Vue.

Let's see another pen. This time, we'll use the data option as a function, instead of as an object. The pen is available here: https://codepen.io/AjdinImsirovic/pen/aKVJgd. The only change we'll make is in our Vue code:

new Vue({
  el: '#entryPoint',
  data() {
    return {
     heading1: 'Just an h1 heading here',
     heading2: 'heading 2 here',
     paragraph1: 'Vue JS data as a function'
    }
  }
})

Now that we're familiar with the very basics of Vue syntax, let's look at what it can be used for.