Computed property

A very powerful feature of Vue is the computed property. It allows us to define new properties that combine any amount of properties and use transformations, such as converting a markdown string into HTML--that's why its value is defined by a function. A computed property has the following features:

• The value is cached so that the function doesn't rerun if it's not necessary, preventing useless computation
• It is automatically updated as needed when a property used inside the function has changed
• A computed property can be used exactly like any property (and you can use computed properties inside other computed properties)
• It is not computed until it is really used somewhere in the app

This will help us automatically convert the note markdown into valid HTML, so we can display a preview in real time. We just need to declare our computed property in the computed option:

// Computed properties
computed: {
  notePreview () {
    // Markdown rendered to HTML
    return marked(this.content)
  },
},