使用Vue.JS提高性能

null

+$As with any component-based library, managing state in Vue can be tricky. While the application is small, it’s possible to keep things in sync by emitting events when values change. However, this can get brittle and prone to errors as the application grows, so it may be better to get a more centralised solution in from the start.

+$If you’re familiar with Flux and Redux, Vuex works much the same. State is held in one centralised location and is linked to the main Vue application. Everything that happens within the application is reflected somewhere within that state. Components can select what information is relevant to them and be notified if it changes, much like if it was part of its internal state.

+$Changing State

+$A Vuex store is made up of four things – the state, getters, mutations and actions. The state is a single object that holds all the necessary data for the entire application. The way this object gets structured depends on the project, but would typically hold at least one value for each view.

Getters像计算属性一样在组件内部工作。它们的值来自状态和传递给它的任何参数。它们可用于过滤列表,而不必在使用该列表的每个组件内复制该逻辑。

无法直接编辑状态。必须通过商店内提供的变异方法执行任何更新。这些通常是简单的操作,一次执行一个更改。每个变异方法都接收状态作为参数,然后使用更改所需的值进行更新。

+$Performing Mutations

突变需要是同步的,以便Vuex了解发生了哪些变化。对于异步逻辑 - 如服务器调用 - 可以使用操作。操作可以返回Promises,这使得Vuex知道结果将来会发生变化,并使开发人员能够将操作链接在一起。

要执行变异,必须通过调用将它们提交到商店承诺()并传递所需的变异方法的名称。行动需要以类似的方式发送调度()

+$It’s good practice to have actions commit mutations rather than committing them manually. That way, all updating logic is held together in the same place. Components can then dispatch the actions directly, so long as they are mapped using theMapActions()Vuex提供的方法。

+$To avoid overcomplicating things, the store can also be broken up into individual modules that look after their own slice of the state.

+$Each module can register its own state, getters, mutations and actions. State is combined between each module and grouped by their module name, in much the same way asCombineReducers()在...内工作Redux.pport

+$Speeding up the first load

+$By default, the entire contents of the application end up inside one JavaScript file, which can result in a slow page load. A lot of that content is never used on the first screen the user visits. Instead it can be split off from the main bundle and loaded in as and when needed. Vue makes this process incredibly simple to set up, as vue-router has built-in support for lazy loading.

+$const AsyncAbout = () => import(‘./About.vue’); const router = new VueRouter({ routes: [ { path: ‘/about, component: AsyncAbout } ] })

+$Vue supports using dynamic imports to define components. These return Promises, which resolve to the component itself. The router can then use that component to render the page like normal. These work alongside code splitting built in to webpack, which makes it possible to use features like magic comments to define how components should be split.

generate conference

+$generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket

相关文章:



翻译字数超限