Vue3.0 new features

reference

First, why from Vue2-Vue3

In Vue2. X, all data is defined in data, methods are defined in methods, and this is used to call the corresponding data and methods.

As our business becomes more complex, the above situation will occur in large numbers. As the complexity increases, when the code of this component exceeds several hundred lines, increasing or modifying a requirement will require repeated jumps in data, methods, computed and Mounted, which are painful to write.

It would be much clearer if we could logically split the top graph into the bottom one, making the code more readable and maintainable:

The solution for vue2.x is mixins, but mixins can be annoying:

  1. Name conflict problem
  2. The role of the exposed variables is unclear
  3. Logic reuse to other Components is often problematic

Therefore, Vue3. X introduced Composition API to solve the above problems, combining the scattered logic for maintenance, and separating the separate functional logic into separate files.

Second, the Compsition API

1. setup

Setup is a new option in Vue3. X, which is the entry point for using the Composition API within components.

Setup execution time is executed before beforeCreate.

The setup parameters

When you use setup, it takes two arguments:

  1. Props: Properties passed by the component
  2. context

The props received in setup are reactive and are updated as new props are passed in. Because it is reactive, ES6 deconstruction cannot be used, because deconstruction eliminates its reactive.

The most commonly used this object in Vue2 is not accessible in context setup, so context provides the three most commonly used this attributes: Attrs, slot, and emit correspond to the $attr attribute, slot slot, and $emit emit event in vue2. x, respectively. And these attributes are automatically synchronized with the latest values, so we get the latest values every time we use them.

Reactive, ref and toRefs

Reactive functions can actually delegate an object, but they cannot delegate basic types such as strings, numbers, Boolean, and so on.

Binding to pages is done through user.name,user.age; This feels cumbersome, but can we just deconstruct the attributes in user and use them? You can’t structure the user directly, because that would eliminate its responsiveness. (props cannot be destructed using ES6.

What we wanted to do with the deconstructed data, and the solution was toRefs. ToRefs is used to convert a Reactive object to a normal object whose properties are all REF objects.

3. Lifecycle hooks

Setup was added. As you can see from the figure, Vue3.0 added setup, which we discussed in detail earlier, and then changed the beforeDestroy name in vue2. x to beforeUnmount; The destroyed table is more unmounted. The author states that the change is purely to be more semantic because a component is a mount and unmount process.

4. Usage of watch and watchEffect

The watch function listens for a specific data source and performs side effects in the callback function. The default is lazy, meaning that callbacks are executed only when the source data being listened on changes.

watch(source, callback, [options])
Copy the code

Parameter Description:

  • Source: can support string, Object, Function, Array; Used to specify the reactive variable to listen for
  • Callback: Callback function to execute
  • Options: Supports deep, immediate, and Flush options.

WatchEffect automatically collects dependencies as long as you specify a callback function. At component initialization, dependencies are collected once, and then callbacks are executed again when the data in the collected dependencies changes. So the comparison is as follows:

  1. WatchEffect does not require manually passing in dependencies
  2. WatchEffect is executed once to automatically collect dependencies
  3. WatchEffect does not get the pre-change value, only the post-change value

Customize hooks

Vue2. X writes an example of implementing addition and subtraction, which can be encapsulated as a hook. We agree that these “custom hooks” are prefixed with use to distinguish them from ordinary functions.

4. Responsive comparison

Object. DefineProperty and Proxy

  1. Object.definePropertyYou can only hijack the properties of an object, whereas a Proxy is a direct Proxy object

Because Object.defineProperty can only hijack Object attributes, every attribute of the Object needs to be traversed, and if the attribute value is also an Object, deep recursive traversal is required. However, Proxy directly proxies objects without traversal

  1. Object.definePropertyNew attributes need to be manually addedObserve

Object.defineproperty hijacks the attributes of the Object, so when you add attributes, you need to iterate over the Object and use Object.defineProperty to hijack the attributes again. When you add attributes to an array or Object in Vue2. X, you need to use $set to ensure that the new attributes are responsive.