Что случилось с предложением Ref от Vue3?

Vue.js Открытый исходный код
Что случилось с предложением Ref от Vue3?

Адрес версии видео

Привет друзья, я великий мудрец. В последнее время реф предложение vue3 много обсуждалось в сообществе. Я читал соответствующие обсуждения RFC и Zhihu в сообществе. Я обнаружил, что многие молодые люди не говорят о боевых действиях. арты мое мнение

Вывод первый: На самом деле мне тоже не нравится синтаксис ref:, но мне не нравится нетерпимость сообщества к этому предложению Должен ли диалект быть плохим? Должен ли стандарт быть хорошим? Во внешнем кругу важнее всего гармония.На основе популяризации мандаринского диалекта также следует активно продвигать интересные диалекты в разных местах.

Произошел несчастный случай с почкой

Vue3 имеет новый синтаксис ref, функция состоит в том, чтобы превратить простую структуру данных в отзывчивую, напримерref(0),ref('耗子尾汁'), побочным эффектом является добавление единицы при изменении.value, наверное так написано

<template>
<h1>{{count}}</h1>
<button @click="add">右鞭腿</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup(){
    let count = ref(1)
    function add(){
      count.value++
    }
    return { count, add }
  }
}
</script>

Для получения информации об источнике и деталях композиции обратитесь к этой статье, которую я написалЭта анимация Vue3, которая работала всю ночь, хороша, но слишком короткая., наверное

  1. Чтобы решить эту проблему черного ящика опции API, мы ввели состав API.
  2. Чтобы решить проблему пространства имен простой структуры данных операции реактивности, вводится API ref опыта.
  3. Чтобы решить проблему унифицированного возврата композиции, была введена настройка скрипта.
  4. Чтобы решить побочный эффект .value от re, был введен ref-сахар.

Например, использование предложения по настройке скрипта для оптимизации кода таким образом решает проблему унифицированного возврата в настройке.

<script setup>
import { ref } from 'vue'
export let count = ref(1)
export function add(){
  count.value++
}
</script>

Экспорт последнего предложения писать не нужно, коммьюнити этому предложению очень нравится, и оно все больше и больше похоже на Svelte.

<script setup>
import { ref } from 'vue'
let count = ref(1)
function add(){
  count.value++
}
</script>

Теперь остался только один побочный эффект для манипулирования .value , поэтому сегодняшний главный геройref语法糖Скоро, скоро

<script setup>
// 用ref: 新语法声明
ref: count = 1
function inc() {
  // 直接操作变量 不用.value
  count++
}
</script>

критика сообщества

Новое предложение рассматривает реф Это действительно прохладная грамматика, но новый синтаксисref: Пакет смайликов под rfc тоже показывает, что решение не из приятных.По пунктам критики я разобрался, а башни сказали

  1. Хватит делать диалекты
  2. Легко сбивается с толку, умственно отягощен
  3. отвязка от стандарта
  4. Запутался в синтаксисе ts
  5. Vue попытка оспаривать стандарт

И в обсуждении есть очень интересные предложения, очень интересные, такие как

1. 注释标记ref
<script setup>
// @ref     
let count=0
</script>

2. 标记一个新语言 vuescript
<script lang="vs">
</script>
...等等

Моя точка зрения

Мне на самом деле не нравится ref: эта грамматика, но мне не нравится нетерпимость нетерпимого сообщества к этому предложению. Все виды дискуссий смертельно опасны. Я думаю, что изучение Vue должно быть энергичным. Если я немного прав, эта критика Вы можете использовать Коды Синъицюань - Три Руки Цзехуа, чтобы ответить

Бери верх - принимай критику

  1. Диалектная критика
    • Ты прав, это диалект, просто люблю творить
    • Я не думаю, что нужно объяснять себя, это ярлыкная грамматика, потому что после объяснения другой стороне остается еще десять вопросов.
  2. умственное бремя
    • Обучение в тягость, или нужно учить фронтенд, ts, jsx надо учить
    • ref и let на самом деле очень похожи, нагрузка уже очень мала
  3. Стандартная развязка
    • Сказано что я диалект и это еще вариант.Есть четкая пометка настройки скрипта.Если не нравится использовать то можно вообще не использовать.
  4. Запутался в синтаксисе ts
    • Старший брат, тс тоже диалект, нельзя просто использовать хэнаньский диалект, потому что так много людей говорят на северо-востоке.
  5. vue пытается бросить вызов стандартам
    • Angular и React тоже бросают вызов, а народу их распыляет не так уж и много.Вызов vue не пройдет.Он может только показать, что это не вызов стандарта, а человек, который осмеливается бросить вызов, это не вы, делая ты ревнуешь

Химик - Диалект действительно плох?

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

Это ничего не сказать.Каждую технологическую новинку можно рассматривать как диалект, и даже серию статей можно опубликовать.

  1. Хороший html, jsx React на самом деле использует диалекты
  2. Что такое шаблон vue, его можно написать:item,@click, некачественный
  3. Предложение декораторов дважды пересматривалось в стандарте и до сих пор не доработано. Angular и машинопись используются уже несколько лет? некачественный
  4. В апплете куча синтаксиса, и вроде ничего нестандартного нет, потому что стандартного пока нет, так что буду тайком менять, если нечего делать.
  5. Северо-восточный диалект, крышка обмякла, а кожа прилипла.Это тоже диалект, но силы нет, можно еще сказать, что колено натерто.

Мне очень нравятся вышеперечисленные диалекты, и это сильно способствовало процветанию передовой экологии Эти идиоты подняли нам зарплату.

Практика - стандарт должен быть в порядке

Навешивание ярлыков не является врожденным, это результат взвешивания результатов обсуждения, и вам действительно нравится эталон? Относительно стандарта не очень хорошо,Промышленность Poly Big Brother СтатьиЭто ясно написано, это, вероятно, означает

  1. Стандарты и нормы эволюционны и являются результатом компромисса между сторонами
  2. Стандарты и нормы часто отстают от практики
  3. Спецификации не являются единственным источником авторитета

Кроме того, есть только одна вещь, которую он упустил, и это стандарт, верно?

Если предложение в tc39 может пройти js, оно должно быть написано так,кодовый адрес

Это те стандарты, которые вам нравятся, о специфике много говорить не буду, сок из хвоста мыши

#! Aaaaaaaaaaa this is JS!!!
// https://github.com/tc39/proposal-hashbang
// This file is mixing all new syntaxes in the proposal in one file without considering syntax conflict or correct runtime semantics
// Enjoy!!! 
// Created at Nov 21, 2020

import data from "./data.json" assert { type: "json" } with { as: "record" }; // https://github.com/tc39/proposal-import-assertions#follow-up-proposal-evaluator-attributes
import { onTransform, unwrap, log, onMounted, sensitive, dispatch, smartElement, CSS } from './utils.js';
import ::{ "😂" as send } from "async-call-rpc"; // https://github.com/tc39/ecma262/pull/2154 and https://github.com/hax/proposal-extensions
asset report from "report"; // https://github.com/tc39/proposal-asset-references
with operators from Decimal; // https://github.com/tc39/proposal-operator-overloading
with suffix px = CSS.px // https://github.com/tc39/proposal-extended-numeric-literals
protocol RPC { // https://github.com/tc39/proposal-first-class-protocols
    address; send(method, ...args) { return this.address::send()~.[method](...args) } } // https://github.com/tc39/proposal-wavy-dot
@{ author: "Jack Works" } class MyHandler extends HTMLElement with smartElement { // https://github.com/justinfagnani/proposal-mixins and https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#annotation-syntax 
    async constructor() { super(); await.race [import(report), import(module { export default await import('./fallback.js') })] } // async init proposal and https://github.com/tc39/proposal-await.ops and https://github.com/tc39/proposal-js-module-blocks
    outer static #brand = 'my handler' // https://github.com/tc39/proposal-private-declarations
    static { debugger.log(['Defined as ', this, this.#brand]) } // https://github.com/tc39/proposal-class-static-block and https://github.com/tc39/proposal-standardized-debug
    #data = data[0:100]; // https://github.com/tc39/proposal-slice-notation
    onNewChild(child) { !(try child.#data) && throw new TypeError('Illegal') } // https://github.com/tc39/proposal-private-fields-in-in and https://github.com/tc39/proposal-throw-expressions
    [Symbol.asyncIterator]: async () =>* { "hide source" // https://github.com/tc39/proposal-function-implementation-hiding and https://github.com/tc39/proposal-generator-arrow-functions
        while (function.sent) // https://github.com/tc39/proposal-function.sent
            for (const datum of this.#data) {
                try using(const f = function.sent) { // https://github.com/tc39/proposal-explicit-resource-management
                    yield do { // https://github.com/tc39/proposal-do-expressions
                        if (const val = datum |> sensitive |> f(this, ?) |> await.all |> sensitive) { // https://github.com/tc39/proposal-pipeline-operator and https://github.com/tc39/proposal-partial-application and https://github.com/tc39/proposal-Declarations-in-Conditionals
                            val = case (val) { // https://github.com/tc39/proposal-pattern-matching
                                when #{ type: 'throw', error: e } -> throw new Error(e), // https://github.com/tc39/proposal-record-tuple
                                when #{ type: 'batch', list: arr } -> await.all arr.map(x => import(x)),
                                when #{ type: 'normal', ...rest } -> #{ ...val, meta.received: Date.now() } // https://github.com/tc39/proposal-deep-path-properties-for-record
                            }
                            runTimes++; val |> dispatch(this, 'transform', {| details: val |}); } } } } } // https://github.com/keithamus/proposal-object-freeze-seal-syntax
    @init: onTransform transformHandler = () => this.style.fontSize ||= runTimes > 10 ? 24px : 12px // https://github.com/tc39/proposal-decorators#option-b-init-method-decorators
    @onMounted {  // https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#block-decorators
        this.addEventListener('transform') do (@unwrap event) { // https://github.com/samuelgoto/proposal-block-params and https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#parameter-decorators-and-annotations
            console.log(event, class.#brand) } } // https://github.com/tc39/proposal-class-access-expressions
    static [RPC.address] = 'http://localhost:8080/';
}; Protocol.implement(MyHandler, RPC);
let @(log(x => `@@iterator on ${MyHandler.#brand} ran for ${x} times`)) runTimes = 0m; // https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#let-decorators and https://github.com/tc39/proposal-decimal
try { import dev from "enhance-devtools"; window.devtoolsFormatters = #[...window?.devtoolsFormatters, dev]; } catch {} // https://github.com/benjamn/reify/blob/master/PROPOSAL.md
  

хорошее отражение

Я думаю, что реф предложение точно пойдёт вверх.Если оно может стать популярным, то можно и открыть свой разум и продвигать Северо-восточный диалект на всю страну.Например, помимо рефа, есть ещё вычисляемый

<script setup>
ref: count=1
computed: double = count*2
watch: count=>console.log
effect: ....
</script>

Есть также реактивные хуки

state: 定义hooks
function App(props){
    state: num = props.num
    effect: ()=>{
    	num=props.num
    }
}

Даже узел, API самого браузера может следовать


http: app= (req,res)=>{
    utf8-file: content = './wulin/gui.html'
    res.send(content)
}
app.listen(9003)

мои заботы

Я думаю, что причина, по которой я не могу сейчас использовать vue3 в больших масштабах, не в ref, крутой, но противоречивой маленькой функции, а в совместимой версии для IE. ref на самом деле не задерживает использование всеми, а маленькая функция слишком мала. -глубокие обсуждения отвлекают внимание, что на самом деле влияет на популярность vue3

Я надеюсь, что vue сможет завершить выпуск версии, совместимой с ie, как можно скорее, эта функция не так крута, как ref, но многие команды ждут

Говорите вудэ и создайте новый стиль

Во фронтовых единоборствах мир по-прежнему важнее всего, и в гнезде меньше драк. Наконец, я дам его всем в конце книги мистера Ма. Давайте вместе усердно учиться, сублимировать себя, и служить обществу гармонично.

Ссылка на ссылку

Спасибо друзья


  • это мыКоманда Хуагошаньпроект с открытым исходным кодомelement3Добро пожаловать, чтобы попробовать и звезду
  • Библиотека компонентов внешнего интерфейса, поддерживающая vue3.