У Vue3 новый синтаксис, когда он будет закончен?

внешний интерфейс JavaScript Vue.js
У Vue3 новый синтаксис, когда он будет закончен?

предисловие

Каждый должен знать, что если вы используетеVue3изComposition APIОпределение адаптивной переменной обычно имеет две формы, одна из которых заключается в использованииref, другойreactive:

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

const isLoading = ref(true)

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})
</script>

В общем, определение базового типа данных будет использоватьref, в то время как ссылочные типы используютreactive, тогда возникает вопрос,refХотя базовый тип данных определен, на самом деле это ссылочный тип, который необходимо брать с собой при взятии значений и присваиваний..valueАтрибуты:

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

const isLoading = ref(true)

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

Это немного нелогично, и можно случайно написать так:

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

let isLoading = ref(true)

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

если этоTSа такжеESLintБлаго хорошо, если нет, то будет сложно найти ошибки, и никакого полезного сообщения об ошибке выдаваться не будет, а это приходится каждый раз приводить.valueЭто действительно некрасиво, и хлопотно писать!

reactiveНедостаток в том, что его нельзя деконструировать, а деконструкция потеряет свою отзывчивость:

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

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})

// 这种写法通常达不到预期的效果
let { age } = user
age = 18
</script>

Некоторые люди могут сказать, нетtoRefs? использовалtoRefs, вернемся к этому.valueПроблема в:

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

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})

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

На самом деле, я лично думаю, что это нормально, потому что я привык писать, и я всегда использую TS, чтобы иметь подсказки и автодополнение, поэтому я не думаю, что есть какие-то проблемы.

Но это похоже на«Почему vue3 не может удалить лишние функции, такие как ref(), а svelte может? 》Такого рода проблемы глубоко ранят сердце босса, да и собственное обсессивно-компульсивное расстройство босса тоже совершено.В конце концов, он создалVueОдин из самых удачных элементов方便. И теперь этот избыточный способ написания связан с方便Это не имеет к этому никакого отношения, поэтому Ю Да должен решить эту проблему во что бы то ни стало, и не позволять людям говорить за их спинами.Vueеще не написаноSvelteЭто удобно? Итак, большой парень создал три разных синтаксических сахара, а именно:

Давайте кратко рассмотрим, как записываются эти три синтаксических сахара:

первая волна синтаксического сахара

Первая волна была в основном подражаниемSvelte, давайте сначала посмотримSvelteПример, приведенный на китайском официальном сайте:

<script>
export let title;

// 这将在“title”的prop属性更改时更新“document.title”
$: document.title = title;

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

это$:является своего родаlabelсинтаксис, которого нетSvelteЭто самодельная грамматика, но юридическая грамматика, которая была лихорадочно протестирована на грани того, чтобы быть заброшенной в течение длительного времени, но эта грамматика изначально не использовалась таким образом, и люди использовали ее во вложенных циклах:

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

Не беда, если вы его не понимаете, да и не нужно разбираться в этом синтаксисе, потому что он не интуитивно понятен и не очень полезен, поэтому им почти никто не пользуется! Когда я пишу этот код в редактореESLintВсе они сообщают об ошибках:

переводить:LabelГрамматика связана сGOTOзаявление, его использование сделает код трудным для понимания и обслуживания.—ESLint

Но так как им никто не пользуется, он по-прежнемуJSюридический синтаксис, используйте его, чтобы сообщить компилятору, чтоrefРазве переменные не идеальны? Так что You Da также помирилсяSvelteАналогичный синтаксис:

<script setup>
ref: isLoading = true

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

Так почему же люди так противятся этому? это потому чтоlabelГрамматика так не используется.break,continueУпотребляется вместе, хотя это и не является грамматической ошибкой при использовании в других местах, но вы явно модифицировали его.JSоригинальный смысл! Хотя Ю Да выразил недовольство: почему?SvelteВы ничего не сказали об использовании этой штуки, и вы начали распылять, когда я использовал эту штуку? !

личное чувство, потому чтоSvelteГоворит о себе как компилятор с самого начала, без тяжелого исторического багажа, в то время какVueНаоборот. а такжеSvelteСам по себе это не мейнстримный фреймворк, он принадлежит тем, кто любит подбрасывать. ноVueНе то же самое, сколько людей должны полагаться наVueКогда дело доходит до еды, не всем нравится так много разбрасываться.

Так что в отчаянии Ю Да был вынужден отказаться от предложения, но этот вопрос все еще оставался в сердце Ю Да, как палка в его горле, поэтому он впитал первую волну обучения грамматике и начал сначала. составлено:

Вторая волна синтаксического сахара

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

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

Видно, что мы не вводили$refОткуда взялась эта переменная? пока<script>Лейбл написалsetupЭто свойство автоматически вставит глобальную переменную (Сначала необходимо включить переключатель экспериментального синтаксиса.)

You Da подумал про себя: тебе не кажется, что я раньше использовал неправильную грамматику? Тогда я должен быть в порядке с этим письмом на этот раз! Подумайте, прежде чем мы определимrefпеременная, в первую очередьrefИмпортируйте, а затем используйте:

import { ref } from 'vue'

const loading = ref(true)

Новый синтаксис можно использовать напрямую без кавычек, подобно глобальным переменным. Кроме$refЧто касается этой специальной глобальной переменной, это предложение также включает:$computed,$fromRefsа также$rawЭти вещи. Давайте посмотрим один за другим$computed:

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

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

<!-- 现在 -->
<script setup>
let num = $ref(1)
const num_10 = $computed(() => num * 10)
</script>

$fromRefsЧто это такое? Этого раньше не было! только слышалtoRefs:

<script setup>
import { fromRefs } from 'vue' // 这个API并不存在
import { toRefs } from 'vue' // 这个API倒是有 也就是只有 to 没有 from
</script>

На самом деле это$fromRefsпросто чтобы соответствоватьtoRefsи сгенерировано, скажем, мы написалиuseXxx:

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)
}

Итак, когда мы его используем:

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

const { x, y } = useXxx(100, 200)

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

Разве это не еще одна вещь, которую Ю Да не хотел видеть?.valueимущество? так$fromRefsОн родился, чтобы решить эту проблему:

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

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

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

Последний API$rawНу, сырое не значит оригинальное! Дальше можно догадаться по названию, то есть используем$refТо, что создано, на самом деле является отзывчивым对象, не примитивный тип данных, а синтаксический сахар позволит нам измениться, как если бы мы использовали примитивные типы данных, но иногда мы хотим посмотреть на это对象Как это выглядит, то нам нужно использовать$rawсейчас:

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

console.log(loading) // 其实打印的不是 loading 这个对象 而是它里面的值 相当于 loading.value
console.log($raw(loading)) // 这回打印的就是 loading 这个对象了
</script>

Улучшенная версия

Вскоре эта версия синтаксического сахара снова была улучшена.$а также$$Эти две переменные, если мы напишем это без синтаксического сахара:

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

const loading = ref(true)

console.log(loading.value)
</script>

После использования синтаксического сахара он становится таким:

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

const loading = $(ref(true))

console.log(loading)
</script>

Если мы хотим восстановитьloadingЭту переменную нам нужно использовать$$сейчас:

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

let loading = $(ref(true))

console.log($$(loading))
</script>

Или можно написать так:

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

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

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

синтаксический сахар третьей волны

Третья волна синтаксического сахара в основном улучшена на основе второй волны грамматики, за исключением того, что многие люди считают, что ее следует писать как$(ref())Это действительно такая вещь...

С другой стороны, реализуетсяpropsсинтаксический сахар, новый синтаксис в основном для каждого.valueпеременные методы имеют$Эквивалент префикса, например:

  • ref
  • computed
  • shallowRef
  • customRef
  • toRef

В то же время улучшенная версия$переменная с$$переменная дляpropsДеконструкция:

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

Чтобы знать, что мы не могли быть правы раньшеpropsдеконструирован, и теперь также можно использоватьES6Значение деструктуризации по умолчанию записывается какpropsУстановить значение по умолчанию:

<!-- 以前 -->
<script setup>
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: true
  }
}))

console.log(props.isLoading)
</script>

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

console.log(isLoading)
</script>

Три волны обращения с предложением синтаксического сахара

Этот фреймворк, очевидно, чаще всего используется китайцами, но самое смешное, что на самом деле это группа иностранцев, которые ведут переговорыVueСледующий шаг плана, когда вы увидите это, некоторые люди скажут: китайцы заняты.996Ну, как я могу найти время для обсуждения таких вещей...

Тогда это зависит от того, что вы думаете: эти беспорядочные синтаксические сахара не имеют для вас значения, я просто учу любую грамматику, я просто один沉默的羔羊.

Или: вы просто оставляете комментарий внизу этой статьи, говоря, что вам нравятся эти новые грамматики или вы ненавидите эти новые грамматики, слишком ленивы, чтобы идти.GitHubговорить на английском.

Ссылка была размещена для всех, это зависит от того, все ли в настроении присоединиться к веселью, или если вы нажмете на ссылку, чтобы смело выразить свой голос. Конечно, если вы идетеGitHubМы все еще должны говорить по-английски, хотя мы можем понять его, даже если мы говорим по-китайски, область комментариев не полностью китайская.VueИностранных фанатов по-прежнему немало. И они не все американцы, те разработчики, которые не являются британскими американцами, если они только хотят быть счастливыми и говорить на родном языке своей страны, у нас не должно быть возможности общаться, и это еще больше сблизит китайцев с миром. Изображение за границей: все остальные говорят по-английски, но вы, китайцы, говорите на своем родном языке и не соблюдаете правила.

Тогда могут быть люди с очень плохим уровнем английского Мы можем сделать это: найти Baidu Translate, ввести китайский язык, перевести его на английский, а затем скопировать английский. Хотя перевод может быть не совсем точным, по крайней мере, он может доходить до точки едва понимания. В то же время другой метод заключается в том, чтобы перевести предложения, переведенные на английский язык, а затем перевести их обратно на китайский язык, чтобы увидеть, где значительно изменилась семантика, а затем мы можем переписать их самостоятельно.

Если вам нравится этот синтаксис, дайте ему еще несколько лайков и еще несколько комплиментов, и он скоро будет включен.Vueвнутри стандартного синтаксиса.

Если вам это не нравится, то продолжайте и добавьте еще несколько слов, и от этой грамматики, скорее всего, откажутся, как и от первой волны предложений синтаксического сахара.

Если вы чувствуете, что не имеет значения, что вы любите, перейдите кGitHubКак хлопотно совершить поездку, и как удобно комментировать прямо под этим постом. Тогда вы также можете оставить сообщение в области комментариев.

Эта статья была впервые опубликована в публичном аккаунте:предварительное обучение

Замечательные статьи в прошлом

Категории