preface

The source code is here

Related documents (I don’t know if it is official 🤭)

I hope I can help you

The installation

Method 1(Install using Vite)

  1. npm i -g create-vite-app
  2. NPX create-viet-app XXXXX(project name)

Method 2(Using vuE-CLI installation)

  1. vue create vue3-app-vue-cli

Use Vite, which is several times faster than WebPack

The change that this points to

Vue2.0 this points directly to the component instance

Vue3.0 This points to the component proxy object, which points to the component instance

Let’s look at this printed in methods 3.0

From this figure, the difference between 3.0 and 2.0 can be clearly seen

Compostion Api

This is the focus of Vue3.0

This can happen if the component is complex

The code structure is redundant and does not conform to the principle of high cohesion and low coupling, which can cause maintenance difficulties in large projects. However, 3.0 has solved this problem. Why is this problem solved?

Please see below

This is where the compostionApi comes in. The code is highly cohesive and poorly coupled, and you can even wrap each function block separately into a function return

hooks

A lifecycle hook corresponding to the 2.x version

Vue2.x vue3
beforeCreate setup()
created setup()
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted

setup

The setup method takes two arguments.

  1. The first parameter is props, which is also reactive inside Setup. (Be careful not to use deconstruction assignments for props directly, as this would break the reactive, but you can use toRefs for safe deconstruction

  2. The second argument is context, which is a normal object (not reactive) and exposes three component properties. 1. arrts 2.emit 3.slots

  3. You can use

This API is called before all lifecycle hook functions (since setup is run around beforeCreate and Created lifecycle hooks, that is, any code that will be written in these two hooks should be written directly in Setup

In Setup, this is undefined and is no longer a component instance

All lifecycle hook functions are available in Setup

The setup function needs to return an object, and everything returned is attached to the component instance

Responsive system

As we all know, Vue2. X is implemented via Object.defineProperty in conjunction with the subscribe/publish pattern.

Vue3.0 uses ES6 Proxy to intercept access to the target object.

Create responsive data

ref

The ref method takes a raw value argument and returns a reactive REF object with the original value in its value property

When a ref parameter is accessed in the render context, it is unwrapped automatically without the need for ref.value, as shown below

reactive

The Reactive method takes a common object as a parameter and returns a reactive proxy for that common object, the equivalent of the 2.0 vue.Observable () that has created a reactive property

Listening to the

WatchEffect method

This method passes in a function, the watchEffect method, that listens for dependencies, is called immediately upon mount, and continues to be called if dependencies are updated

Watch method

Equivalent to the 2.0 Watch method, but written differently (you can refer to the documentation for details)

The life cycle

The life cycle has not changed much, with some subtle differences due to the way instances are created.

It is worth noting that in Vue2. X, the two hooks that destroy the instance are beforeDestory and deStoryed, but in Vue3.0 the names of these two hooks are changed to beforeUnmount and unmounted.