Watching changes

We would like to save our note as soon as its content changes. That's why we need something that is called when our content data property changes, such as watchers. Let's add some watchers to our application!

1. Add a new watch option to the Vue instance.

This option is a dictionary with the keys being the name of the watched properties and the value being a watching option object. This object has to have a handler property, which is either a function or the name of a method. The handler will receive two arguments--the new value and the old value of the property being watched.

Here is an example with a simple handler:

new Vue({
  // ...

  // Change watchers
  watch: {
    // Watching 'content' data property
    content: {
      handler (val, oldVal) {
        console.log('new note:', val, 'old note:', oldVal)
      },
    },
  },
})

Now, when you type in the note editor, you should get the following message in the browser console:

new note: This is a **note**! old note: This is a **note**

This will be very helpful in saving the note whenever it changes.

There are two other options you can use alongside handler:

• deep is a Boolean that tells Vue to watch for changes recursively inside nested objects. This is not useful here, as we only watch a string.
• immediate is also a Boolean that forces the handler to be called immediately instead of waiting for the first change. In our case, this will not have a meaningful impact, but we can try it to note its effects.

The default value of these options is false, so if you don't need them, you can skip them entirely.

1. Add the immediate option to the watcher:

      content: {
        handler (val, oldVal) {
          console.log('new note:', val, 'old note:', oldVal)      
        },
        immediate: true,
      },

As soon as you refresh the app, you should see the following message pop up in the browser console:

new note: This is a **note** old note: undefined

Unsurprisingly, the old value of the note was undefined, because the watcher handler was called when the instance was created.

1. We don't really need this option here, so go ahead and delete it:

      content: {
        handler (val, oldVal) {
          console.log('new note:', val, 'old note:', oldVal)
        },
      },

Since we are not using any option, we can use a shorter syntax by skipping the object containing the handler option:

content (val, oldVal) {
  console.log('new note:', val, 'old note:', oldVal)
},

This is the most common syntax for watchers when you don't need other options, such as deep or immediate.

1. Let's save our note. Use the localStorage.setItem() API to store the note content:

      content (val, oldVal) {
        console.log('new note:', val, 'old note:', oldVal)
        localStorage.setItem('content', val)
      },

To check whether this worked, edit the note and open the browser devtools in the Application or Storage tab (depending on your browser) you should find a new entry under the Local Storage section: