What are the new features of Vue 3.0

One 、 Welcome to Vue 3.0

1. brief introduction

Vue 3.0 What new features are worth knowing in advance

Insert picture description here

Vue.js Author and core Developer Especially the rain creek announce Vue 3.0 Get into Beta Stage .

All planned RFC
All merged RFC
Vue CLI Now through vue-cli-plugin-vue-next Provides experimental support

2. New characteristics

Focus on ：

Faster and less
Object.defineProperty ——> Proxy
restructure Virtual DOM
complete TypeScript
Team development is easier
More flexible architecture , It's easier to read the source code
Can be used independently Vue Internal modules
Composition API（ combined API）
A set of low intrusive 、 Functional API
Better logic reuse and code organization
Better type derivation

3. The resources

Two 、 Initialize project

System environment
```
npm -v nrm ls 
```
install @vue/cli
```
npm install @vue/cli -g 
```
Create project
```
vue create Project name 
```
Install... In the project vue-next plug-in unit , The trial Vue3 beta
```
vue add vue-next 
```

Project changes

import { createApp } from 'vue'; import App from './App.vue' createApp(App).mount('#app')

Start project
```
npm run serve 
```

Add ：

vue-devtools Temporary does not support Vue 3.0
VSCode Install in Vue 3 Snippets plug-in unit

3、 ... and 、setup function

setup Function is a new component option . As used within components Composition API Entrance point .

1. Timing of invocation

setup The function will be in the beforeCreate Hook was called before

2. Return value

If setup Return an object , Then the properties of the object can be accessed in the component template

3. Parameters

The first parameter is zero props, Receive the current component props The value of the option , That is to get the parameters passed by the parent component

export default { props: { name: String, }, setup(props) { console.log(props.name) }, }

The second parameter is context, Receives a context object , This object contains some information in vue 2.x We need to go through this To access properties

const MyComponent = { setup(props, context) { context.attrs context.slots context.emit } }

notes ： stay setup() Cannot access... In function this

Four 、 Responsive system API

Vue 3.0 Provides a set of functions with responsive characteristics API, All in the form of functions

1. reactive

reactive() Function to receive a normal object , Returns the responsive proxy object of the normal object

Simply speaking , It's used to create responsive data objects , Equate to vue 2.x Of Vue.observable() function

step ：

Import on demand reactive function
```
import { reactive } from 'vue' 
```

call reactive function , Create responsive data objects

setup() { // Create responsive data objects const data = reactive({count: 0}) // Expose responsive data objects return data; }

2. ref

ref() Function takes a parameter value , Returns a responsive data object . The object contains only one... That points to an internal value .value attribute

Basic usage
When accessing in a template , There is no need to pass .value attribute , It will expand automatically
stay reactive Object , There is no need to pass .value attribute , It will expand automatically

3. computed

computed() Function is used to create calculated properties , The return value of the function is a ref Example

Read only calculated properties
Readable and writable computational properties

4. readonly

readonly() Function to receive an object （ Ordinary or responsive ）, Returns a read-only proxy object of the original object

5. watch

watch() Function is used to monitor changes in data , To trigger a specific action , Equate to vue 2.x Medium this.$watch

Monitoring a single data source
Monitoring multiple data sources
Cancel surveillance
Clear invalid asynchronous tasks

6. watchEffect

watchEffect() Function takes a function as an argument , And execute the function immediately , At the same time, it is responsive to trace its dependencies , And rerun the function when its dependency changes .

5、 ... and 、 Responsive system toolset

1. isRef

Check whether a value is a ref object .

2. isReactive

Check whether an object is created by reactive Create a responsive proxy for .

3. isReadonly

Check whether an object is created by readonly Create a read-only proxy .

4. isProxy

Check whether an object is created by reactive still readonly Method .

5.unref

If the parameter is a ref Then return its value, Otherwise, return the parameter itself . It is val = isRef(val) ? val.value : val The grammar sugar of .

6. toRef

toRef() The function is used to reactive An attribute of an object is created as a ref, And this ref Responsive , Can be delivered .

7. toRefs

toRefs() The function is used to reactive Object is created as a normal object , But every attribute of the normal object is a ref, And this ref Responsive , Can be delivered .

6、 ... and 、 Life cycle hook function

Vue 3.0 The life cycle function and Vue 2.x Compared with making some adjustments and changes , The correspondence is as follows ：

beforeCreate -> Use setup()
created -> Use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

These lifecycle hook functions can only be used in setup() Use in a function

7、 ... and 、 Dependency injection

Dependency injection is the transfer of data from an ancestor component to a descendant component , Use provide() and inject() Function to implement , The function is similar to vue 2.x Medium provide/inject

These two functions can only be used in setup() Use in a function ：

Use... In the ancestor component provide() Function to pass data down
Use... In descendant components inject() Function to get the data passed from the upper layer

8、 ... and 、 Templates Refs

adopt ref() Functions can also refer to elements or components on a page , Function like vue 2.x Medium vm.$refs

step ：

stay setup() Create a ref Object and return it
Add... To the element on the page ref attribute , And set the property values to match the created ref The name of the object is the same
When the page rendering is complete , You can use this ref Object to get the corresponding DOM Elements

author ：Vam The golden bean road

Main areas ： The front-end development

My WeChat ：maomin9761

WeChat official account ： The road ahead

This article is from the official account of WeChat The road ahead original https://www.helloworld.net/redirect?target=https://mp.weixin.qq.com/s/NLD3nP5lfZYNzpJhmNRVmg, If there is any infringement , Please contact to delete .