在使用Nuxt进行SSR期间未调用Vue实例`watcher'

Question

I have a plugin with the following code:

   let vm = new Vue({
      data: {
        foo: 1,
      },
      watch: {
        $data: {
          deep: true,
          handler(){
            console.log('changed')
          }
        }
      }
    })

    vm.foo = 123; // should trigger watcher

The problem is that the message 'changed' is printed only clientside, meaning that the watcher is not called serverside during SSR? Any explanation to this behavior? Thanks!

Answer 1

Here is a small implementation with pure Vue SSR: https://codesandbox.io/s/oqx461ll8z

The result is a bit different than expected. The watcher will drigger after the SSR process with the latest value. As there is no reactivity on the server and Vue has to prefetch data for consistency and perf reasons ( source ), this what will happen.

Result:

<div data-server-rendered="true">123</div>
{ foo: [Getter/Setter] } 123 123
changed