Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to achieve high-quality music Web app". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

3.0 vs. 2.0:

1.Performance / / performance

2.Tree-shaking support / / through analysis, you can delete all the unused code in your code. The simple and rude point is the code optimization tool. If you want to know more about Baidu, you need to know more about it.

3.Composition API / / characteristic grammar

4.Fragment, Teleport, Suspense / / "fragments", Teleport means Protal Portal, "suspense"

5.Better TypeScript support / / TypeScript support

6.Custom Renderer API / / Custom rende

After learning about the new content, let's directly build a project and have a look.

Initialize a vue2.0 project first

1. Install vue-cli:

Npm install-g @ vue/cli

You can enter vue-V to view the version

Vue-V

If installed now, it is version 4.3.1 of @ vue/cli.

2. Initialize the vue project:

Vue create your project name

After confirmation: we choose Manually select feature manually

Please pick a preset:

Default (babel, eslint) / / automatic

❯ Manually select features / / Manual

Then check the commonly used ones we use for development: Router, Vuex, CSS Pre-processors and Linter / Formatter

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project:

◉ Babel

◯ TypeScript

◯ Progressive Web App (PWA) Support

◉ Router

◉ Vuex

◉ CSS Pre-processors

❯◉ Linter / Formatter

◯ Unit Testing

◯ E2E Testing

The rest is the initial steps of vue-cli: if you don't know, you can refer to the article: (https://www.jianshu.com/p/ae3fc27eb2c2)

Why do we talk about the vue-cli startup project because vue3.0 must be upgraded from vue2.0? in order to no longer install Router and Vuex manually, check these two items in the process.

Upgrade to vue3.0

Upgrade 3.0 needs to be upgraded in the form of a plug-in, enter it on the command line in the project

Vue add vue-next

The plug-in is then automatically installed (vue-cli-plugin-vue-next):

Plug-in operation content

Then after the theoretical beep and the project upgrade, let's play and experience it!

New feature experience of vue3.0

Let's first create a test.vue file under / src/views

Vue3.0 experience

Export default {

}

.test {

Color: # 999

}

Then add routing to the router

Import {createRouter, createWebHistory} from 'vue-router'

Const routes = [

{

Path:'/ about'

Name: 'About'

Component: () = > import (/ * webpackChunkName: "about" * /'.. / views/About.vue')

}

{

Path:'/ test'

Name: 'Test'

Component: () = > import (/ * webpackChunkName: "test" * /'.. / views/Test.vue')

}

]

Const router = createRouter ({

History: createWebHistory (process.env.BASE_URL)

Routes

})

Export default router

Version 2.0 of Router doesn't change much from version 3.0, except that it used to be a constructor.

Instead, use createRouter to create a Vue Router instance, using the same method

After configuration, we give an entry to the page of Test.vue in App.vue:

About |

Test |

And then run it.

Npm run serve

State and event binding

The state defined in vue3.0 is no longer in data (), but is defined by the setup method, and then thrown out by return.

Then define the state by calling ref. Let's write a simple accumulator in test.vue first.

Vue3.0

{{count}}

{{hhhh}}

Add

-

Import {ref,} from 'vue'

Export default {

Setup () {

Const hhhh = ref (false)

Const count = ref (0)

Const add = () = > {

Count.value++

}

Const theNot= () = > {

Hhhh.value =! hhhh.value

}

Return {

Count

Hhhh

TheNot

Add

}

}

}

Obviously, the 3. 0 methods and events no longer need to be written in methods. Instead, it is all declared in the setup method, but I have also tried the previous data definition status methods write events are still compatible.

Then add a way to define the state is reactive, which is the same as ref, but the writing is not the same, through a case to understand it.

{{count}}

{{pos.countA}}

{{pos.countB}}

+

-

Import {reactive,ref} from 'vue'

Export default {

/ / ref needs to use this count.value=xxx form to modify data, while reactive only needs the state.reactiveField= value to be used in this way.

Setup () {

Const pos = reactive ({countA: 0J. CountB: 100}) / / refreactive

Const count = ref ("single") / / ref can only listen for simple data such as numbers, strings, Boolean, etc.

Const add = () = > {

Pos.countA++

}

Const subtraction = () = > {

Pos.countB-=2

}

Return {

Count

Pos

Add

Subtraction

}

}

}

As can be seen from the case, ref defines a single state, while reactive can define multiple states through objects, while ref changes data requires (state) .value = xxx,reactive can be manipulated by state.reactiveField= values.

Calculate properties and listeners

Then let's talk about vue3.0 's computed and watch methods:

{{count}}

Add

Count * 2 = {{doubleCount}}

Import {ref, computed, watch} from 'vue'

Export default {

Setup ()

Const count = ref (0)

Const add = () = > {

Count.value++

}

/ / the first parameter is the listening value. Count.value means that the callback function of the listener will be triggered when the count.value changes, that is, the callback when the second parameter can perform listening.

Watch (() = > count.value, val = > {

Console.log (`count is ${val} `)

})

Const doubleCount = computed (() = > count.value * 2)

/ / the calculation attribute computed is a method, which needs to include a callback function. When we access the calculation attribute and return the result, we will automatically obtain the value of the callback function:

Return {

Count

DoubleCount

Add

}

}

}

Get rout

Get the instance of the current component through the getCurrentInstance method in 3. 0, and then obtain the current context through the ctx property

Ctx.$router is a Vue Router instance that contains the current routing information that can be obtained by currentRoute.

Import {getCurrentInstance} from 'vue'

Export default {

Setup () {

Const {ctx} = getCurrentInstance ()

Console.log (ctx.$router.currentRoute.value)

}

}

Vuex integration

{{count}}

Add

State from vuex {{a}}

Take a

Import {ref, computed, watch, getCurrentInstance} from 'vue'

Export default {

Setup () {

Const count = ref (0)

Const add = () = > {

Count.value++

}

Const {ctx} = getCurrentInstance ()

Const a = computed (() = > ctx.$store.state.test.a)

/ / get the instance through the getCurrentInstance () method, thus

Const take= () = > {

Ctx.$store.commit ('setTestA', count)

}

/ / the Vuex state still uses the commit method

Return {

Count

Add

Take

A

}

}

}

In fact, the operation of vuex is not much different from that of 2.0, except that the instance of 3.0 is obtained through the getCurrentInstance () method.

Summary time

1. Vue3.0 creates a Vue Router instance through createRouter.

2. Vue3.0 defines states and events, and computing properties are written in setup. Previously, data states are written in data and events are written in methods, but the writing before testing is still compatible.

3. The state definition of 3. 0 should be defined by ref and reactive. The only difference between them is that they are written differently.

4. The operation and definition attributes of vuex are no different from those of 2.0, but the instance acquisition should be obtained through the getCurrentInstance () method.

"how to achieve high-quality music Web app" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.