Why upgrade VUe3

We distilled some information from it:

1. “You can use vue3 but still use the Options API” — this indicates that vue3+ is not a disruptive version. It still supports the original Options writing method, and vue3 is compatible with most vue2 writing methods (except the deprecated ones – which are not commonly used)

2.” Now that you have

3. “Unchanged Composition API” — Replace the Option API with Composition API, that is, instead of defining attribute data in data, methods in methods, computed attributes, Watch some monitoring and so on in the common logic processing page write vue2 think at the beginning of the block of code writing is very good, block management code, but slowly I found that the same code in different blocks of code, every time I want to change or add a new function will be back and forth in a couple of blocks of code hopping, if the business is complex, the page is very long, This jump around to find the code, too uncomfortable!! Of course you can use mixins extraction, but mixins have their drawbacks, such as naming conflicts, because mixins are generated in a way that makes it impossible to clearly see what variables, methods, etc., are extracted from mixins, and other drawbacks, so some people say to stay away from mixins. Just think if we are together in the same function code, maintenance is simple, of course, a page may be mixed with multiple functions, if we can put the features extracted independent js, and when the page introducing can be seen clearly in the introduction of multiple modules which variables, methods, functions, etc., it is also very sweet, Vue3 can do that.

Vue3 has some changes in the implementation of the principle, and also has a great improvement in performance. What optimizations have been made? _ Action Superman, blog -CSDN blog

Compositions API

The following is the version of <3.2. The entry point to the composite API writing is setup, with the following example code:

 <script>
import { ref, reactive, toRefs, computed} from 'vue'
export default {
  props: ['info'].setup(props,content) { 
    console.log('Setup executes');  /* This is not available */ because the component has not yet been created 
    console.log(this) 
    console.log(props.info)     /* Receives the parent component's argument 'HelloWorld' */ 
    const color = ref("red");   /* ref is used to define a responsive data that returns a ref object with a value attribute */                       
    const state = reactive({ /* Reactive is used to create reactive objects of object or array type */
      count: 0.age: 1
    })
    const name = 'Jim' {{name}} is displayed in the template. When we change the value of name in js, the page will not refresh to the latest value */
    const multiple = computed(() = > { /* Define the calculated attributes */
      return 2 * state.count 
      // return color.value /* If you need to manipulate data, use the value attribute of the Ref object */
    })
    const increase = () = > {          /* Define the method */
      state.count++;
      console.log(multiple.value)
    };
    // const {count} = state /* {{count}} can be rendered to the initial value, but not responsive */
    return {                      /* This is a setup error. * /. toRefs(state),/* {{count}} deconstruct and keep reactive (used to convert a reactive object to a normal object whose properties are all ref objects) */ 
      // state, /* {{state.count}} */
      multiple,
      color,
      increase,
    }
  },
  beforeCreate(){
    console.log('beforeCreate executed '); }}Copy the code

What happens inside setup, you define data, you define methods, you define compute properties, you can define watch listeners, and so on

Note that all these definitions must return, which is required by the setup option notation

    return {                      /* This is a setup error. * /. toRefs(state),/* {{count}} deconstruct and keep reactive (used to convert a reactive object to a normal object whose properties are all ref objects) */ 
      // state, /* {{state.count}} */
      multiple,
      color,
      increase,
    }
Copy the code

Note: References to vue3 are displayed. The advantage of this is that they are brought in on demand for performance optimization.

import { ref, reactive, toRefs, computed} from 'vue'
Copy the code

Note: Because setup is executed later than the beforeCreate, the component has not been created yet, so there is no this. If you want to get props, you cannot pass this. So vue3 provides setup with two parameters, the first is props. Another parameters can be found in the document modular API | Vue. Js (vuejs.org)

console.log(props.info)     /* Receives the parent component's argument 'HelloWorld' */ 
Copy the code

A composite API is a way of writing all of these things together, so imagine if this was just one thing that was implemented, and we put the code together, and when we needed to maintain it, we could find it all in one piece of code.

Reactivity API

The code above, define the data with different vue2, this goes to reactive API (reference responsiveness API | Vue. Js (vuejs.org))

Define reactive data using ref and reacitve as follows: Value, such as color, must be used. Value Reactive objects can be configured using toRefs(){{state.count}} {{age}} {{state}}}{{state.

const color = ref("red"); /* ref is used to define a responsive data that returns a ref object with a value attribute */
const state = reactive({ count: 0.age: 1 }) /* Reactive is used to create reactive objects of object or array type */
Copy the code

Its benefits are as follows:

• Reduces component instantiation time

  Before Vue3.0, component instances initialized the entire data Object as an observable, recursively assigned getters and setters to object.defineProperty for each Key, and overwrote the array Object’s seven methods if it was an array. In VUe3, the developer has the right to create responsive objects. The developer can customize the data that needs responsiveness through ref, Reactive, computed, Watch, effect and other methods. In this way, the instance does not need to recurse data objects during initialization, thus reducing the time of component instantiation

• Reduce running memory

  Before VUe3, the generation of responsive objects will carry out deep traversal of the object, and generate a DEF object for each Key to store all the dependencies of the Key. When the value corresponding to the Key changes, the dependency will be notified to perform updata. However, if these dependencies do not need to be updated during the page life cycle, Not only do def objects not collect these dependencies, they consume memory, and it would be nice if they could be ignored during initialization. Vue3 solves this pain point. By using REF and Reactive, developers can selectively create observables to reduce the saving of dependencies and the use of running memory.

  Calculate the properties, listen the same as vue2, but with a little difference in writing. Install Vue vscode Snippets to implement quick writing, for example, type v3, the plug-in will prompt you to select one, press enter, and you will have the basic writing, you do not need to remember, use more natural remember

This is the basic composition of the combined API. The vue3.2 update simplifies setup writing. See single-file components

<script lang="ts" setup>
import { ref } from 'vue'
// let color = 'red'; // non-responsive
let color = ref('red');/ / response type
let count = ref(0);    // ref is used to define a responsive data
const increase = () = > {
  count.value++;      // If you need to manipulate data, use the value attribute
  // color = 'green'; / / is invalid
  color.value = 'green'; Value must be used to change the color of the text
};
</script>


Copy the code

Setup (props,content) setup(props,content) setup(props,content

Single file component

Finally: Using lifecycle functions in Setup differs from vue2 in that setup has its own lifecycle hooks.