1. Declare responsive state with reactive()
-
We can create a reactive object or array using the reactive() function:
-
Reactive objects are actually JavaScript Proxies, which behave like normal objects. The difference is that Vue is able to track access and changes to reactive object properties.
-
To use reactive state in component templates, it needs to be defined and returned in the setup() function.
-
Naturally, we can also define a function that updates the reactive state in the same scope, and expose it as a method along with the state:
-
Exposed methods are typically used as event listeners:
Second, the limitations of reactive()
-
Valid only for object types (object, array, and collection types like Map, Set), not primitive types like string, number, and boolean.
-
Because Vue's reactive system is tracked through property access, we must always keep the same reference to the reactive object. This means that we cannot arbitrarily "replace" a reactive object, as this would cause the reactive connection to the original reference to be lost:
- It also means that when we assign or destructure a property of a reactive object to a local variable, or pass that property into a function, we lose reactivity:
3. Use ref() to define responsive variables
- The limitations of reactive() come down to the fact that JavaScript doesn't have a "reference" mechanism that works on all value types.
- To this end, Vue provides a ref() method that allows us to create reactive refs that can use any value type:
- ref() wraps the value of the incoming parameter as a ref object with a .value attribute:
- Similar to the properties of a reactive object, the .value property of a ref is also reactive.
- At the same time, when the value is an object type, its .value will be automatically converted with reactive().
- A ref containing a value of type object can reactively replace the entire object:
- refs are passed to functions or destructured from regular objects without losing reactivity:
- In short, ref() allows us to create "references" to arbitrary values and pass them around without losing responsiveness.
1. Unpacking ref in the template
- When refs are accessed as top-level attributes in templates, they are automatically "unwrapped", so there is no need to use .value.
请注意, automatic "unwrapping" only applies when ref is a top-level property of the template rendering context. For example, foo is a top-level property, but object.foo is not.
2. The unpacking of ref in the responsive object
-
When a ref is nested inside a reactive object, it is automatically unwrapped when accessed or changed as a property, so it behaves like a normal property:
-
If you assign a new ref to a property associated with an existing ref, it will replace the old ref:
3. Responsive syntactic sugar (experimental)
- Compared with ordinary JavaScript variables, we have to use relatively cumbersome .value to get the value of ref.
- This is a shortcoming limited by the limitations of the JavaScript language.
- However, with a compile-time cast, we can let the compiler save us the trouble of using .value.
请注意它仍处于实验性阶段，在最终提案落地前仍可能发生改动。
Four,<script setup>
- Exposing a lot of state and methods manually in the setup() function is tedious.
- Fortunately, we can make this easier by using build tools.
- When using single file components (SFC), we can use
<script setup>to greatly simplify the code.
<script setup>Imports and variable declarations at the top level in can be used directly in the same component's template.- You can understand that the expressions in the template and the code
<script setup>in are in the same scope.