The difference between composite and optional apis

A composite API can aggregate logical concerns and write logically related code together. Optional API separates data, cpmpuTED, watch and methods. When the logic is added and modified, it needs to jump to locate the modified code, and the project code will jump back and forth during development.

The combinational API has an entry method, setup, which introduces a problem. The page code is concentrated in a setup method, which results in a large amount of code in that method. Consider adopting the MVC pattern, which separates the business code from a separate JS file, and keep only the interactive code in setup. Separation of business and view code for better project maintenance.

The entrance

The main entry file for the SETUP option composite API mentioned above is executed in the order after props parsing and before the component is created.

Export default {beforeCreate() {console.log("beforeCreate execute "); }, setup() {console.log("setup execution "); }}; // Result ===> Setup is executed prior to beforeCreateCopy the code

You cannot use this in setup because the VUE component has not yet been executed when setup is executed.

Create reactive variables

ref

Vue provides a ref function that converts the base data type into a ref responsive object that takes a value property and returns the bound value. In JS, basic data types are passed by value rather than by reference, so you need to encapsulate the basic data types as ref response objects to pass.

<template> <h3>{{ counter }}</h3> </template> <script> import { ref } from "vue"; export default { setup() { let counter = ref(100); return { counter, }; }}; </script>Copy the code

Bind the counter value and the returned ref object as shown in the code above. Ref can also pass in a reference type object, and VUE converts the value of the object into a proxy object

reactive

Return a reactive copy (Proxy Proxy object)

Export default {setup() {// define a common object obj with two attributes a,b let obj = {a: 1, b: 2,}; let refObj = reactive(obj); console.log(refObj); return { refObj }; }};Copy the code

reactiveNote the use of destruct assignment in

Destruct assignment in ES6 is non-reactive

Let obj = {a: 1, b: {a: 1, b: Let {a, b} = obj; B console. The log (" a = = = = = = > "+ a) / / 1 console. The log (' = = = = = = > b + b) / / / / the object obj. A, 2 b attribute assignment obj. Again a = 'a' obj. B = 'b' / / print a, b Not because the object obj attribute value change and change the console. The log (a = = = = = = > '+ a) / / = = = > 1, Goal is to be a console output. The log (' = = = = = = > b + b) / / = = = > 2 goal is here should be output b / / solution: The values of a and b no longer change with the attributes of the target object obj, since a and b are basic data types, // template <h3>{{a}}</h3> // 1 a is actually "a", <h3>{{b}}</h3> // 2 // js export default {setup() {let obj = {a: 1, b: 2}; let refObj = reactive(obj); console.log(refObj); let { a, b } = refObj; console.log(a); console.log(b); refObj["a"] = "a"; return { a, b }; }};Copy the code

toRefs

Vue introduced the toRefs method, which, as the name implies, iterates over every value in an OBj object, making every value a Ref responsive object.

/ / template < h3 > {{a}} < / h3 > / / a right < h3 > {{b}} < / h3 > / / 2 / / js export default {the setup () {let obj = {2, a: 1, b:}; let refObj = reactive(obj); console.log(refObj); // Proxy {a: 1, b: 2} let { a, b } = toRefs(refObj); // toRefs is the new console.log(a); // ObjectRefImpl {_object: Proxy, _key: "a", __v_isRef: true} console.log(b); // ObjectRefImpl {_object: Proxy, _key: "b", __v_isRef: true} refObj["a"] = "a"; return { refObj, a, b }; }};Copy the code

Similarities and differences between Ref and Reactive

Similarities:

Are two functions in VUe3 that define reactive objects

Difference:

Defining data types

A REF can define a basic data type or a reference data type (Object), which converts the incoming target object into a proxy object

Reactive can only define reference data types, and defining basic data types raises a warning

It is recommended that REF define the base data types and Reactive define the reference data types

export default { setup() { let num1 = ref(1); let num2 = reactive(2); let obj1 = ref({ a: 1 }); let obj2 = reactive({ a: 2 }); // warning ===> value cannot be made reactive: 2 console.log(num1); // RefImpl {_rawValue: 1, _shallow: false, __v_isRef: true, _value: 1} console.log(num2); // 2 alarms waring console.log(obj1); / / RefImpl {_rawValue: {... }, _shallow: false, __v_isRef: true, _value: Console. log(obj2); // if the value of ref is a Proxy, the value of console.log(obj2) is the base data type. // Proxy {a: 2} return { num1, num2, obj1, obj2 }; }};Copy the code

Lifecycle hook

The lifecycle hook functions in the optional API are all available in Setup, with different names, and are executed when the hook is called by the component.