Reference: the second wave of Vue ref syntax proposals is coming, will it be standard this time?

Having seen this article on Nuggets, HERE’s why I recommend using TypeScript to develop Vue3.

In Vue2, TypeScript support is inherently inadequate because it is not developed in TypeScript. There are type declaration files available that take advantage of TypeScript type hints to some extent, but they still fall short.

As a result, Vue3 is officially developing with TypeScript in full, which greatly enhances TypeScript support. Vue3 is inherently better than Vue2 in supporting type hints. Better type hints also mean it’s time to move to TypeScript!

Reactive versus Ref

Let’s start with a classic debate in Vue3: Should we use Reactive or REF in development?

The following is a classic use of Reactive and REF. Both are very similar and can provide reactive variables, so who is better suited for day-to-day development?

const obj = reactive({ count: 0 })
console.log(obj.count) // 0
​
const count = ref(0)
console.log(count.value) // 0
Copy the code

My answer is: ref!

Why is that? The reason is the type hint!

Obj is of type {count: number} and count is of type Ref

!

Const obj = reactive({count: 0}) const count = ref(0) const count = ref(0)Copy the code

Notice that? For OBJ, whether it is responsive or not can not be reflected in the type at all! At this point, you need to handle the variable names, such as objRef, to resolve the confusion between normal and reactive variables.

Count is a responsive variable because its type is Ref

. So there is no confusion between normal and reactive variables!

So, in development, should we use Reactive or REF? My answer is: ref!

We also recommend you to use REF for development.

Some people say that you have to write.value more often.

Yes, but, my friends, simplicity and readability are sometimes at odds, and if code is to be readable and logical, some redundancy is necessary.

If you pursue simplicity too much, just like Yu Yuxi has been pursuing to remove. Value, but has he ever thought that. Value itself has the meaning of existence? Although.value was originally intended to solve the problem of variables having both base and reference types, the type of Ref

itself now plays a significant role in the result, avoiding confusion between normal and reactive variables and solving an additional problem.

So the author is not optimistic about the new ref syntax sugar, the author’s suggestion is to use the general writing method.

As for 

<script setup> // syntax import {ref, computed } from 'vue' const num = ref(1) const num_10 = computed(() => num.value * 10) </script>Copy the code
<template> <div>{{ collectionName }}: {{readersNumber}} {{book.title}}</div> </template> <script> import { ref, reactive } from 'vue' export default { props: { collectionName: String }, setup(props) { const readersNumber = ref(0) const book = reactive({ title: 'Vue 3 Guide'}) // Exposed to template return {readersNumber, book}}} </script>Copy the code

In this paper, the author: grass MeiYouRen In this paper, the original address: blog. Cmyr. LTD/archives / 7 f… Copyright Notice: Reprint please indicate the source!