preface

As a front-end developer, it is impossible not to know ABOUT VUE, and the arrival of VUe3.0 tells us that the pace of learning can not stop, as long as the death of learning, learning to death. The following is my study diary about VUe3.0.

The goal of VUE3.0

smaller

  • Package size reduced by 41%
  • Memory reduced by 54%

faster

  • Initial rendering is 55% faster and updated rendering is 133% faster

More friendly

  • Better support for TypeScript

I. VUE3.0 project construction

Scaffolding

  1. Check that the @vue/ CLI version is later than 4.5.0: vue –version
  2. Install/upgrade your @vue/cli: NPM install -g@vue /cli
  3. Create a VUe3.0 project: vue create vue_demo
  4. Run project: NPM Run serve
  5. Package project: NPM Run Build

Refer to the official documentation: cli.vuejs.org/zh/guide/cr…

Build through Vite (recommended)

  1. Install by using the command line: NPM init vite — –template vue
  2. Install dependency: NPM install
  3. Run project: NPM Run serve

See official document (Vite) : vitejs.cn/

With the project completed, it’s time to get to know Vue3.0

Setup (): Start VUE3

What is the setup

It is officially defined as a composite API, mainly for cases where previous uses of the change (data, computed, Methods, and Watch) made views too long when written, components too large, and were difficult to read.

How to use

In the previous vue3 version, setup() was wrapped in export default in the form of a function, like data(), and method was similar to the following figure: However, in the new VUE version, setup has become a syntax sugar inside the script tag, which is easier to use and simpler to code, so it is recommended to use this method in the development of VUe3.0: We can basically do all of our business inside of this tag, like defining variables, events, or using data listening, component communication and so on and we’ll talk about how to do that later.

Pay attention to the point

  1. From a lifecycle perspective, the setup() function is executed before the beforeCreate.
  2. Setup has no this, so you can’t use this inside because this is undefined inside setup

Life cycle

BeforeDestroy and destroy are changed to beforeUnmounted, unmounted in vue3, as shown in the following figure:The use in setup is shown below:

4. Data Binding (reactive)

API

Ref (listen basic data types: Number, Boolean, String, Null, Undefined)

Note: REF can also accept complex data types, but it “calls on” Reactive internally, so it is not recommended to use Ref to wrap complex data types

Ref principle

The basic data types are still implemented using methods such as VUe2, which means that the responsiveness is still dependent onObject.defineProperty()thegetwithsetThe finished figure.

Reactive (Listening to complex data types: Array, Object)

Reactive principle

Reactive is reactive data that defines an object type, so do not use it for basic data. It returns a Proxy object (the instance object of Proxy, which is implemented by Proxy internally). Its benefits are improved efficiency of listening, and it is more friendly to listen to objects and arrays. This also fixes a problem in VUe2 where objects and arrays could not trigger bidirectional binding.

Vue3 and VUe2 are different in data binding

vue2

Using object.defindeProperty () to read and modify attributes is intercepted by data hijacking. In the case of arrays, interception is implemented by overriding a series of methods that update the array.

Object.defineProperty(data, 'count', {
    get(){},
    set(){}}Copy the code

Existing problems:

  • The interface will not be updated when adding or deleting properties
  • Modify the array directly by subscript, the interface does not automatically update

vue3

  • Proxy: Intercepts the change of any attribute in the object, including reading and writing of attribute values, adding and deleting attributes.
  • Reflect: Operates on the properties of the source object.
new Proxy(data, {
	// Intercepts reading property values
        
        
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // Intercepts setting property values or adding new properties
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // Intercepts delete attributes
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

Copy the code

V. Data Monitoring: Watch and watchEffect(new)

The use of the watch

In general, vuE3’s Watch is not much different from VUE2’s. In Vue3.0, watch(target,callback,options) can be passed as three parameters. The first parameter is the listener, the second is the callback function, and the third parameter is the configuration ({immediate: True,deep:true}) Here are the use cases:

In the official document: first v3.cn.vuejs.org/api/compute…

1. Listen for basic type reactive data defined by ref

2. Listen to reactive definitions for complex data types

3. Listen to multiple data at the same time

watchEffect

Vue3.2 version with a new usage, refer to the official documentation: v3.cn.vuejs.org/guide/react…

Official explanation: Executes a function passed in immediately, tracing its dependencies responsively, and reruning the function when its dependencies change.

In layman’s terms, I don’t specify who I want to monitor, the response changes in my package so I trigger the callback. As follows:

Six, another data monitor, computed

Computed tomography in VUE3 is basically the same as vuE2, and can be used in the following ways: