First example in introduction doesn't demonstrate reactivity

[AjaiKN]

In the very first example in the new introduction, it says:

The data and the DOM are now linked, and everything is now reactive. How do we know? Change the message property in the code snippet below to a different value and the rendered example will update accordingly:

However, I'm not sure that changing the code snippet in the CodePen really demonstrates reactivity, since that seems to just restart the CodePen with a different initial state.

Those first examples in the v2 docs were helpful for me in understanding what reactivity means in Vue, so I wonder if it's worth changing the first and third examples to run directly on the page like in the v2 docs so that the app can be exposed to the console. As a reminder, the v2 docs said:

The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.

Thank you all for your hard work!

[NataliaTepluhina]

@Aurelius333 Thank you for the super valuable feedback! Unfortunately, it's not possible with VuePress (and it's also far from best practice) to attach the global property to window as we don't embed scripts directly to the page like Hexo did.

I totally understand and share the concern but I can't come with a good solution to resolve it with the current stack. We could create a component that exposes an input field (with v-model applied internally) and let user add a text there but this would require us to show v-model early and this breaks the user flow.

I am open to any ideas here 😅

[AjaiKN]

Here's my possible solution: master...Aurelius333:intro-reactivity-examples-without-codepen. For the first and third examples, I removed the CodePens and added components into src/.vuepress/components. I added mounted hooks that attach this to window:

  mounted() {
    window.HelloVueVm = this
  }

In the example code on the page, I assigned the last line of the first example to HelloVueVm:

const HelloVueVm = Vue.createApp(HelloVueApp).mount('#hello-vue')

That way, in both the code example and on the actual page, you can do HelloVueVm.message = 'some other message'.

There are some disadvantages to this approach:

1. Code duplication (though I'm guessing there's already code duplication between the page and the CodePen)
2. The code in the example isn't exactly the same as the code that's actually used on the page. (Though it seems to me like they have the same behavior.)
3. As you said, it's probably bad practice to be attaching this to window.

I think it might be worth it to have a quick example of reactivity that you can run in the console, but I understand if it's not worth the tradeoff.

[CyberAP]

Mobile users don't have an easy access to browsers console, I think this should be considered as well. For me personally it is enough for the first example to be a simple input field and a text value synced with the field. That I think singlehandedly showcases what problems Vue solves.