I am participating in the 2022 Spring Recruitment series of activities – experience review, click to view the details of the activities will be considered to participate

preface

Hi, everyone, I am ZZ. It has been a long time since I met you. Recently, I am busy with business and looking at opportunities. Gold three silver four, the VUE3 can be rolled up.

The introduction

I was looking at VUE3 recently to find out what problem the introduction of composition-API solves, what motivated my father to do so, and why composition-API came into being. In fact, we all know there are several problems when using VUE2. The business is complex, the function increases, the code quantity increases, more and more difficult to maintain. Vue3 allows you to organize your code based on “logical functionality”, rather than data and methods, which is not fundamentally different from Vue2

setup

Entry to the composite API, execution timing, execution before component creation, and setup once props is resolved.

You should avoid using this in Setup because it won’t find the component instance. Setup calls occur before data Property, computed Property, or methods are resolved, so they cannot be retrieved in SETUP.

The order of execution is as follows

Use the setup

Setup receives two parameters: 1. Props: properties passed by the component. 2.

propsIt’s responsive, youCannot be deconstructed using ES6, which eliminates the responsiveness of prop.

Content is a common object. Context provides three attributes: attrs, Slot, and emit, corresponding to the $attr attribute, slot slot, and $emit emit event in vue2. x, respectively.

Characteristics of the setup function

  1. The contents of the setup function return can be used directly in the template, including variables and methods
  2. Setup cannot use the this keyword

Reactive, ref, toRef and toRefs

See here is not a big head, a bunch of question marks, what’s the difference, don’t worry, let’s look down.

ref

reactive

Reactive is equivalent to vue2.x’s Vue.Observable () API. Functions processed by Reactive can become responsive data. Note: Only reactive data of an object can be returned. Primitive types cannot be created.

grammar

Const proxy = reactive(source object); Receives an object (or array) of a reference type and returns a proxy object.

toRef

You can create a new ref for a property on a source responsive object. The REF can then be passed, maintaining a reactive connection to its source property. As I understand it, this is when an attribute in a reactive object is used externally.

The toRef() function is used to convert a key value of a responsive object toRef.

function toRef(target, key) { return { isRef: true, get value() { return target[key]; }, set value(newVal) { target[key] = newVal; }}; }Copy the code

toRefs

ToRefs and toRef functions are the same, but multiple Ref objects can be created in batches.

The realization of toRefs ()

    function toRefs(target) {
      const ret = {};
      for (const key in target) {
        ret[key] = toRef(target, key);
      }
      return ret;
    }

Copy the code

To consider

1. Why do we use Proxy API instead of defineProperty API in Vue3.0?

Object.defineproperty can only hijack data by traversing Object attributes, while Proxy can directly hijack the whole Object, which means we can directly operate the Object to achieve the corresponding purpose; In addition, the Object.defineProperty API can only hijack getters and setters, and the Proxy can hijack 13 methods such as Apply and HAS

2. The implementation principle of Vue3 responsiveness

Through Proxy: Intercepts the change of any attribute in the object, including filling in the attribute value, adding and deleting the attribute value. Reflect: Operates on the properties of the source object

3. What’s the difference between ref and reative? Vue3 uses proxy to implement responsiveness, but proxy can’t proxy the base type, vue3 can only wrap it into an object and then proxy, so you can see that the base type becomes reactive read value needs. Value

The last

Anyway, hopefully you will enjoy Vue3 even more after reading this article. Finally, it is better not to fight vue or react in the comments of my article. They all have their own strengths and weaknesses and progress together.