preface

Recently, I was asked by a colleague: Have you seen the release of VUe3.0? I:… ????? X ->vue3.x. X changes are recorded here. If you do not know vue3.0 very well, or want to know, you can have a look, I hope it can help you a little.

Tip: I’m not going to go into the source code for how this thing works, because I can’t read the source code… If you need it, check out the Composition API and Vue3.0

Project structures,

We used to build projects directly from vue-CLI, but now there are two ways:

4. 1. Smart trashcan

Advantage: sum up a word, be quick!

  • No need to pack, cold start the server
  • Replace the hot module immediately
  • Compile on demand without the problem of more modules and slower hot updates

Disadvantages: Sometimes puzzling error occurs when installing plug-ins…

Note: vue-Router and VUex should be installed by themselves, and must be 4.0+. Vite is good to play with for the time being. Don’t use it for company projects, or it will explode directly in situ

$  npm init vite-app <project-name>
$  cd <project-name>
$  npm install
$  npm run dev
Copy the code

2. Traditional Webpack

Advantages and disadvantages I believe we all know, hot update is a fault, here will not say…

Here you should first check whether your VUe-CLI is up to date

$  vue create <project-name>
$  vue add vue-next 
$  cd <project-name>
$  npm run serve
Copy the code

Structural changes

There is no change in the directory structure, as long as some methods change, you install TS by default, right

main.js

2. X uses new vue () for instance creation and 3.0 uses createApp() for instance creation. This also makes many plugins and UI libraries useless. Such as element – the UI

router.js

CreateRouter is introduced to create the route, createWebHashHistory corresponds to the previous hash,

CreateWebHistory corresponds to previous HISTtory

vuex

The creation mode was changed to createStore

Template template

Multiple root nodes can exist

  • Composition API

This is the biggest change in Vue3.0. 2.x data is stored in data and methods are called in Methods through this

In 3.0, however, that’s all gone, all the code is implemented inside setup, and there’s no more this

The methods you need for your page should be included in the current page.

Does that make you nod your head? But that’s ok. Let’s start by sorting out how to use these methods in projects. And because 3.0 doesn’t have data,computed and methods partitions, all the code is written together, so there are great requirements for the organization of project code, so the code structure should be strictly regulated within the company

Other changes

1. Optimization of vue source volume and monitoring mechanism

2. Better typescript support

3. Etc…

The life cycle

The 3.0 life cycle has also changed a bit. Here’s a graph I found on the web

The specific use

Use in detail

setup

Setup takes two parameters, props and context

  • propsAccepts the value passed by the parent component
  • context: Not in 3.0thisSo you have onecontextContext property, which you can use to get some vue2. XthisImplemented operations

Data assignment

Unlike vue2. X, assignment in return aa: 123,3.0 can only be declared by ref and reactive

The value declared by ref or reactive, as well as function methods described later, must be returned, otherwise the value will not be available in the template, and the reurn must be placed last. The created value and function after return will not be executed

  • Ref is used to declare the underlying data type

Create a responsive base type that can only listen for simple types such as number, String, and Boolean. Any change to this attribute will be traced. But in template you can write {{count}} without adding.value

<template> <div>{{count}}</div> // 1 </template> import {ref} from "vue" setup(){ const count =ref(0) count.value++ Value return{count}}Copy the code

  • IsRef checks if the value is of the type created by ref

    import {ref,isRef} from “vue”

    setup(){ const count =ref(0) console.log(isRef(count)) }

  • Reactive is used to declare reactive data objects

In Vue2. X, if you want to modify a property in an object, the value is updated but the view is not updated, so you have to use $set to force the update. In 3.0, you can use Reactive to create a reactive object

<template>
   <div>{{count.name}}</div>             // 857
</template>
import {reactive} from "vue"

setup(){
   const count =reactive({
      name:'369'
   })   count.name='857'
   return{
      count 
   }
}
Copy the code

  • The difference between the two is:

    When declaring values, some people like to write: let count=5; let name=8;

    Let obj={name:8, value:10}

    So there are two ways to declare values

  • ToRefs converts a reactive object into a plain REF

{{count. Name}}, {{count. Value}}}, {{count. ToRefs (count), deconstructs the object, converting its properties to ref without losing the reactivity

Readonly read-only

Converts an object or underlying type to a read-only property, warning if the value is changed

By the way, there is no problem with vue3.0. If you introduce a module path error, it will only issue a warning in the console

import {ref,readonly} from "vue" export default{ setup(){ const count=ref(0) const copy=readonlu(count) copy.count++ // A warning is issued}}Copy the code

The computed to calculate

Computed is much the same as 2.x, except that you have to introduce it before you use it, and you can still create GET and set

WatchEffect listening

This is the new approach of VUe3.0, which takes a function and executes it immediately when a dependency value changes. If you create multiple reactive values by ref or Reactive, the watchEffect function will be executed immediately when any of the values change

This method, once called, lasts until the component is unmounted. Sometimes we don’t want it to continue listening. WatchEffect returns a stop handler

watch

The 3.0 Watch is basically the same as the 2.0 watch, except that a watch is introduced. The biggest difference is that Vue3.0 Watch executes the creation of the watch once, similar to the immediate in 2.x: True, but there is also a new property called lazy, which defaults to false. If you set this value to true, it will not be executed the first time you create it

router

The router and route attributes have also been changed significantly in 3.0. In 2.0 we used this.$router to jump to the router, this.$route to get the current page routing information.

Route jump:

import { useRouter} from "vue-router"; 

setup(){
  const router=useRouter()
  router.push('/path')
}
Copy the code

Get the routing information of the current page:

import { useRoute} from "vue-router"; Setup (){const route=useRoute() console.log(route) // here is route==2.x this.$route}Copy the code

Or get the current routing information through CTX, which is the instance of the current component

import { getCurrentInstance } from 'vue'
setup(){
   const { ctx } = getCurrentInstance()
   console.log(ctx.$router.currentRoute.value)
}
Copy the code

vuex

There has also been a small change in the way vuex is used

Or use the CTX context again

import { getCurrentInstance } from "vue"; export default{ setup(){ const { ctx } = getCurrentInstance() const count = computed(() => ctx.$store.state.count) const  update = () => { ctx.$store.commit('SET_COUNT', 75) } } }Copy the code

Ref node

In vue2. X we used this.$refs. XXX to get the node, in 3.0 we used this

mixins

Back in mid-2016, Dan Abramov wrote Mixins Are Considered Harmful, in which he argued that the use of Mixins to reuse logic in the React component was an anti-pattern and advocated staying away from Mixins.

The mixins attribute is now missing from vue. According to the comments on the web, minxins were killed by the Composition API. For a more detailed explanation, see how the Vue3 Composition API replaces Vue mixins.

keep-alive

Keep-alive is not very different from 2.0, but the way it is used has changed.

3.0 Router-view and Route-link labels cannot be wrapped with keep-alive and transtion labels. Otherwise, a warning will be generated

Unimplemented functionality

  • Global Registry component
  • bus
  • .

The last

Last but not least, vue3.0 is a variety of VUE-CLI3 published in 2020

Vue3.0 has been out for some time. Here is a visual system developed by me with VUe3.0. All the new features mentioned above are available in it.

Portal: VuE3 -bigData