preface

You should know that Vue3’s Composition API is usually used to define a reactive variable in two forms: ref and Reactive:

<script setup>
import { ref, reactive } from 'vue'

const isLoading = ref(true)

const user = reactive({
  name: Linghu Chong.age: 22.gender: 'male'
})
</script>
Copy the code

Ref is a basic datatype, and reactive is a reference type. Ref is a basic datatype, but ref is a reference type and must be evaluated and assigned with a. Value attribute.

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

if (isLoading.value) {
  isLoading.value = false
}
</script>
Copy the code

This is a little counterintuitive, and it could be accidentally written like this:

<script setup>
import { ref } from 'vue'

let isLoading = ref(true)

if (isLoading) {
  isLoading = false
}
</script>
Copy the code

If TS and ESLint support is available, it will not be easy to find errors, and will not generate useful error messages, and will be used every time.

The problem with Reactive is that it can’t be deconstructed, so deconstruction becomes unresponsive:

<script setup>
import { reactive } from 'vue'

const user = reactive({
  name: Linghu Chong.age: 22.gender: 'male'
})

// This writing method usually does not achieve the desired effect
let { age } = user
age = 18
</script>
Copy the code

Some might say, aren’t there toRefs? With toRefs, we’re back to the.value problem:

<script setup>
import { reactive, toRefs } from 'vue'

const user = reactive({
  name: Linghu Chong.age: 22.gender: 'male'
})

let { age } = toRefs(user)
age.value = 18
</script>
Copy the code

In fact, I personally think it is ok, because I have been used to writing, plus I have been using TS prompt and automatic completion, so I feel no problem.

Why can’t vue3 delete redundant functions like ref(), but Svelte can? This problem deeply hurt the big man’s heart, big man’s own obsessive-compulsive disorder also committed, after all, he created Vue in those days one of the most successful elements is convenient. Now that redundancy has nothing to do with convenience, uVU will have to address this issue anyway. It can’t be said that Vue isn’t as easy to write as Svelte, right? As a result, the big guy has created three different syntax sugar, they are respectively:

Yu Xi: Ref Grammar Sugar Proposal
Vue second wave of REF syntax proposals coming will it be standard this time?
This article (modified version of the second wave of syntactic sugar)

Let’s take a quick look at these three grammatical sweets:

The first wave of grammatical sugar

The first wave mainly imitated the writing method of Svelte. Let’s take a look at an example from Svelte’s Chinese official website:

<script>
export let title;

// This will update "document.title" when the "title" prop property changes
$: document.title = title;

$: {
  console.log(`multiple statements can be combined`);
  console.log(`the current title is ${title}`);
}
</script>
Copy the code

The $: syntax is a syntax called label, which is not Svelte’s creation, but a legal syntax that has long been on the edge of being deprecated, except that this syntax is not originally used for nested loops:

let num = 0

outermost:
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            continue outermost
        } else {
            console.log(i, j, 88)
        }
        num++
    }
}

console.log(num) / / 95
Copy the code

It doesn’t matter if you don’t understand it, and there’s no point in trying to understand it, because it’s not intuitive, and it’s not very useful, so few people use it! When I write this code in the editor, ESLint will always report an error:

The Label syntax is derived from the GOTO statement, and using it can make code difficult to understand and maintain. – ESLint

But since nobody’s using it and it’s a valid JS syntax, wouldn’t it be perfect to tell the compiler that we’re declaring a ref variable? So Utah has a syntax similar to Svelte:

<script setup>
ref: isLoading = true

if (isLoading) {
  isLoading = false
}
</script>
Copy the code

So why are people so opposed? The label syntax is not used in this way at all. It was originally intended to be used with break and continue. Although it is not a syntax error to use it elsewhere, you are clearly modifying the meaning of JS by doing so. Why don’t you say anything when Svelte uses it, but when I use it, you start spraying? !

Personally, it’s because Svelte says from the beginning that it’s a compiler with no historical baggage, whereas Vue does the opposite. And Svelte itself is not a mainstream framework, it’s for people with a lot of trouble. But Vue is different, how many people have to rely on Vue to eat, not everyone is that love to toss.

So He dropped the proposal, but it still stuck in his throat. So he took the first batch of grammar candy and went back to the drawing board to write a new one:

The second wave of grammatical sugar

<script setup>
let loading = $ref(true)

if (loading) {
  loading = false
}
</script>
Copy the code

You can see that we didn’t introduce the $ref variable, where did that variable come from? Is a global variable that is automatically injected whenever the setup property is written in the

Utah thought: you don’t think I used non-standard grammar before? Then I should be able to write this way this time! If we define a ref variable, we need to import ref before we can use it:

import { ref } from 'vue'

const loading = ref(true)
Copy the code

The new syntax does not need to be cited, but can be used directly, similar to the feeling of global variables. In addition to the special global variable $ref, this proposal also has $computed, $fromRefs, and $RAW. Let’s look at $computed one by one:

<! Well - - - >
<script setup>
import { ref, computed } from 'vue'

const num = ref(1)
const num_10 = computed(() = > num.value * 10)
</script>

<! -- -- -- > now
<script setup>
let num = $ref(1)
const num_10 = $computed(() = > num * 10)
</script>
Copy the code

What is $fromRefs? It didn’t exist before! Only heard of toRefs:

<script setup>
import { fromRefs } from 'vue' // This API does not exist
import { toRefs } from 'vue' // There is only to but not from API
</script>
Copy the code

$fromRefs = $fromRefs; $fromRefs = $fromRefs;

import { reactive } from 'vue'

const state = reactive({
    x: 0.y: 0
})

export default = (x = 0, y = 0) = > {
    state.x = x
    state.y = y
    
    return toRefs(state)
}
Copy the code

So when we use it, we say:

<script setup>
import { useXxx } form '.. /useXxx.js'

const { x, y } = useXxx(100.200)

console.log(x.value, y.value)
</script>
Copy the code

Isn’t this the last thing Utah wants to see in the.value property? So $fromRefs is designed to solve this problem:

<script setup>
import { useXxx } form '.. /useXxx.js'

const { x, y } = $fromRefs(useXxx(100.200))

console.log(x, y)
</script>
Copy the code

The last API is $raw. Then see the name also can guess, is what we use $ref created object is actually a response type, rather than a basic data types, but the syntactic sugar will let us in the process of using in basic data types that can be changed to change, but sometimes we want to have a look at this object looks like, so we need to use $raw:

<script setup>
const loading = $ref(true)

console.log(loading) // It prints not loading but its value equivalent to load.value
console.log($raw(loading)) // This will print the loading object
</script>
Copy the code

Improved version

$$($$); $$($$);

<script setup>
import { ref } from 'vue'

const loading = ref(true)

console.log(loading.value)
</script>
Copy the code

This is what happens when you use grammar sugar:

<script setup>
import { ref } from 'vue'

const loading = $(ref(true))

console.log(loading)
</script>
Copy the code

If we want to restore loading, we need to use $$:

<script setup>
import { ref } from 'vue'

let loading = $(ref(true))

console.log($$(loading))
</script>
Copy the code

Or it could be written like this:

<script setup>
import { ref } from 'vue'

const loadingRef = ref(true)
let loading = $(loadingRef)

console.log(loadingRef === $$(loading))
</script>
Copy the code

The third wave of grammar sugar

The third wave of syntactic sugar is an improvement on the second wave of syntactic sugar, except that many people find it too much to write $(ref())…

The syntax for props is to prefix each method that can create a. Value variable with a $equivalent, such as:

ref
computed
shallowRef
customRef
toRef

$$variables and $$variables in the improved version are retained for functions:

<script setup>
const { isLoading } = $(defineProps({ isLoading: Boolean }))
</script>
Copy the code

Before we could not destruct props, we can now set the default value for props using ES6 destruct defaults:

<! Well - - - >
<script setup>
const props = defineProps({
  isLoading: {
    type: Boolean.default: true}}))console.log(props.isLoading)
</script>

<! -- -- -- > now
<script setup>
const { isLoading = true } = $(defineProps({ isLoading: Boolean }))

console.log(isLoading)
</script>
Copy the code

Three waves grammar sugar proposal address

First wave: github.com/vuejs/rfcs/…
Second wave: github.com/vuejs/rfcs/…
Third wave: github.com/vuejs/rfcs/…

This framework is obviously used most by Chinese people, but it is ridiculous that it is actually a group of foreigners discussing the next plan of Vue. Some people will say: Chinese people are busy with 996, how do they have time to discuss those things…

It depends on what you think: you don’t care about all this grammar crap, I just learn whatever grammar is out there, I’m the silent lamb.

Or are you just leaving a comment at the bottom of this post saying that you love or hate the new syntax and don’t bother to speak English on GitHub?

The link has been posted to everyone, we see a pair of attitude to join in the fun, or point into the link brave expression of their voice. Of course, if we go to GitHub, we’ll still speak In English, and while you can read it in Chinese, the comments section is not entirely Chinese, and Vue still has quite a few foreign fans. And is not all the americans, who are not British americans developers, they said if only their time and their country’s mother tongue, there was no way to communicate, we must at the same time it will also further closer to the people’s image abroad: the other people all in English, you Chinese people in their own language, don’t follow the rules.

Maybe someone’s English level is really poor, we can do this: find Baidu Translator, input Chinese and translate into English, and then copy the English past. Although the translation may not be completely accurate, it can at least reach the point of barely understanding. At the same time, there is another skill is to translate the sentence into English and then translate it back into Chinese to see where the meaning has changed obviously. We will write it again for that place.

If you like this syntax, go ahead and give it a few more thumbs up, and it will soon be incorporated into Vue’s standard syntax.

If you don’t like it, go ahead and spray some more, and chances are the grammar will be dropped like the first wave of grammar sugar proposals.

If you don’t care, go to GitHub and comment directly on this post. Feel free to leave a comment below.

This article was first published on the public account: Front-end learning is not moving

Past wonderful articles

Vue official member: How is the ecology of Vite?
UI: Do you have any fancy component libraries I can refer to?
Mobile Layout Interview Questions: A Thorough review of your CSS Skills
Styled Components using the React Super-styled CSS-In-JS library in Vue Projects: Styled components
Create your own visual data map without relying on any library
Vue second wave of REF syntax proposals coming will it be standard this time?
Writing a Simple Vue with your own Hands!
Product Manager: The opening animation of Hongmeng is very cool. Please give us a whole page.
Product Manager: Can you Get the Numbers to Roll?
Vue3 will not support IE11. Efforts will be put into Vue2.7.
Vue’s fun new feature: JS variables in CSS
What? Can pull effect be achieved with H5 tag alone?
Microsoft launches comment section on GitHub
An Interview Question that failed me in a Second Interview
Double 11 small black box is cool? Let’s use CSS variables to improve!
Don’t underestimate the nine grid a question can let the candidate’s true colors!
“A series of confusing behaviors after setting a prototype object as a Proxy”
Vue super Fun New feature: DOM Portal
Is It Finally Vue’s Turn to inspire React?
Vue3 is a pit on IOS
You Yuxi: The Design Process of Vue3

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

When will Vue3’s new syntax be finished?

preface

The first wave of grammatical sugar

The second wave of grammatical sugar

Improved version

The third wave of grammar sugar

Three waves grammar sugar proposal address

Past wonderful articles

When will Vue3’s new syntax be finished?

preface

The first wave of grammatical sugar

The second wave of grammatical sugar

Improved version

The third wave of grammar sugar

Three waves grammar sugar proposal address

Past wonderful articles

Related Posts

One NodeJS module per day -path

From VuE3 and Element-Plus, I’ve learned the magic of unifying the team package manager with one line of code

This time I finally understand BFC