If you go to the browser now and check the console, you'll see the warning "Component is missing render function", since we haven't yet defined a template for the root instance. Learn more: Data object declaration removed RFCīefore we move on, let's also add a method to toggle the modalOpen value. Since having two types of declarations is not beginner-friendly, it was decided to remove this feature. The use case for this is rare and can be worked around. The advantage of using an object for data rather than a factory function is that, firstly, it was syntactically simpler, and secondly, you could share top-level state between multiple root instances e.g.: This is what you had to do for Vue components, but now it's enforced for Vue app instances as well. Instead, data must be assigned a factory function which returns the state object. Under Vue 2, we could do this by creating a data property on our app instance and assigning an object to this where our modalOpen property would be declared i.e.: Let's manage this with a boolean state property modalOpen which we'll give an initial value of false.
Our modal window can be in one of two states - opened, or closed. Under the new API, calling createApp returns a fresh app instance that will not be polluted by any global configuration applied to other instances. This really shows up as an issue in unit testing, as it makes it tricky to ensure that each test is isolated from the last. With the old API, any global configuration we added (plugins, mixins, prototype properties etc) would permanently mutate global state. Next, we'll call the mount method on app and pass a CSS selector indicating our mount element, just like we did with the $mount instance method in Vue 2.
We then call this method, passing our Vue instance definition object, and assign the return object to a variable app. Rather than using new Vue(), we now need to import the new createApp method. Straight off the bat, the way we bootstrap a new Vue app has changed. Now we'll run the dev server: $ npm run dev Once that's cloned and the NPM modules are installed, all we need to do is remove the boilerplate files and create a fresh main.js file so we can create our Vue 3 app from scratch. Rather than installing Vue 3 directly, let's clone the project vue-next-webpack-preview which will give us a minimal Webpack setup including Vue 3. Here's what the app looks like in it's opened and closed states so you can picture in your mind what we're working on: I chose this because it conveniently allows me to showcase a number of Vue 3 changes. We're going to build a simple app with a modal window feature.
0 kommentar(er)
