Why learn VuE3?

Vue2.0 is now a relatively stable version, the community and surrounding are relatively complete, if it is not necessary, in fact, we do not need to rush to directly upgrade to VUe3.0; Why learn, mainly is to know about the advantages and characteristics of vue3.0 compared with 2.0, convenient after perfect after 3.0 version of the community and the surrounding, we are going to use directly upgraded to 3.0, and in order to improve the technology and higher wages, 3.0 was when I was out of the industry, after all, the attention of the bosses, Vue3.0 is now the most popular front end, so whether it is to learn new knowledge, or to learn a great programming idea, or to raise salary we all need to take a look to learn.

How do I upgrade from 2.0 to 3.0?

First of all, if we want to play version 3.0, we have to upgrade first. Here are some ways to upgrade to version 3.0.

1. The first way, using the official VUE-CLI scaffolding upgrade; If you can’t understand it, you can go to the official websitevue-cli

NPM install -g@vue /cli or YARN global add @vue/cli

NPM update -g@vue /cli or YARN Global upgrade –latest @vue/cli

Ps: After upgrading to the latest version, you can start the installation directly by creating a Vue3.0 project

Vue create VUe3 // The default version of vue3 is 3.0. After creating vue3, you can run it to experience CD vue3 // After entering yarn serve

Ps: If you forgot to select 3.0? It doesn’t matter that you can also enter the project to install

Yarn add VUE-next // Add VUe-next will automatically upgrade to vuE3 if the project you created is version 2.0 by default

2. The second way to use vite installation, this is especially big workVite making address

Git clone github.com/vitejs/vite…

CD vite // Enter the file

Yarn // Starts to install dependencies

Yarn build // Package

yarn link

Ps: Start creating your project

yarn create vite-app project-name

cd project-name

yarn

yarn dev

Ps: Complete the above steps and you can enjoy vue3.0

A brief introduction to and use of vue3’s Composition APIThe Compositon API uses the official manual

1. Start with the Composition API

What is the Composition API? It literally means a composite API, which takes a lot of the underlying methods apart and exposes them for everyone to use. For example, the original method can only be written in methods, but there are some changes in VUe3, which should be used in setup.

Let’s take a look at some of the apis that I think are important, and just briefly explain how to use them. Okay? Feel the difference from the previous 2.0;

1. CreateApp // Create an APP instance, as the name suggests.

// Enter the createApp module first
import { createApp } from 'vue';
import App from './App.vue';

// Use the createApp method to put our entry file in and finally mount it
createApp(App).mount('#app');
Copy the code

2. OnMounted //

// Enter the onMounted module first
import { onMounted, defineComponent } from 'vue';

export default defineComponent({
    setup () {
        // Use it in setup
        onMounted(() = > {
            console.log('Component hanging at end start printing... ')})}})Copy the code

Computer attributes

import { computed, ref } from 'vue';

// Basic operation
const count = ref(1)
const plusOne = computed(() = > count.value + 1)

console.log(plusOne.value) / / 2

plusOne.value++ / / error!
Copy the code
import { computed, ref } from 'vue';

// You can change the value
const count = ref(1)
const plusOne = computed({
  get: () = > count.value + 1.set: (val) = > {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) / / 0
Copy the code

4. Watch the listener

import { reactive, watch } from 'vue';
// Listen for a getter
const state = reactive({ count: 0 })
watch(
  () = > state.count,
  (count, prevCount) = > {
    / *... * /})// Listen directly on a ref
const count = ref(0)
watch(count, (count, prevCount) = > {
  / *... * /
})
Copy the code

5. An upgraded version of the watchEffect listener that immediately executes a function passed in, responds to trace its dependencies, and rerunts the function when its dependencies change.

const count = ref(0)

watchEffect(() = > console.log(count.value))
// -> print out 0

setTimeout(() = > {
  count.value++
  // -> print 1
}, 100)
Copy the code

Stop listening. When watchEffect is called on a component’s setup() function or lifecycle hook, the listener is linked to the component’s lifecycle and stops automatically when the component is uninstalled.

const stop = watchEffect(() = > {
  / *... * /
})

/ / after
stop()
Copy the code

Reactive receives a common object and returns a reactive proxy for that common object. Vue. Observable () is the equivalent of 2.x. Note that the source code explicitly states that an object needs to be passed or an exception will be thrown

Const obj = reactive({count: 0}) const obj = reactive({count: 0}) const obj = reactive({count: 0}Copy the code

If you want to use this variable within a component, you need to return it in setup

The first return form

<template> <! <p>{{obj. Count}}</p> </template>Copy the code
import { reactive } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { obj } // This form needs to be obj.count when used within components}})Copy the code

The second return form

<template> <! - this form within the components use the same as before - > < p > {{count}} < / p > < / template >Copy the code
import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})
Copy the code

7. ToRefs converts a reactive object into a normal object, each property of which is a ref, corresponding to the reactive object property.

Reactive actually uses a proxy to proxy the entire object and returns it as a reactive object. But what if there are many levels in the object and there are objects in the object, then the object in the object is not a reactive object. So we wrap it with toRefs, which is equivalent to the attributes of the whole object. Inside the source code, we have done a recursion, judging all the attributes. If it is a reference type, we will use proxy again, so the attributes of the whole object are responsive, that is, the following notation;

import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})
Copy the code

8. Ref takes a parameter value and returns a responsive and mutable ref object. The ref object has a single.value attribute that points to an internal value.

const count = ref(0)
console.log(count.value) / / 0

count.value++
console.log(count.value) / / 1
Copy the code

9. ToRef can be used to create a REF for properties of a Reactive object. This REF can be passed and remains responsive.

const state = reactive({
  foo: 1.bar: 2,})const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) / / 2

state.foo++
console.log(fooRef.value) / / 3
Copy the code

10. NextTick works the same as it did before, but it’s written a little differently. For more details, see hereVue nextTick Asynchronous update mechanism

import { nextTick } from 'vue';

export default defineComponent({
    setup () {
        nextTick(() = > {
        	console.log('-- DOM updated --')})}})Copy the code

The composition API Vue is the composition API for your mental Workload. For those of you who are interested and want to use it but don’t know exactly how to use it I’ve written a very simple demo to familiarize you with the VUe3 demo, okay