Адрес версии видео
Привет друзья, я великий мудрец. В последнее время реф предложение 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, которая работала всю ночь, хороша, но слишком короткая., наверное
- Чтобы решить эту проблему черного ящика опции API, мы ввели состав API.
- Чтобы решить проблему пространства имен простой структуры данных операции реактивности, вводится API ref опыта.
- Чтобы решить проблему унифицированного возврата композиции, была введена настройка скрипта.
- Чтобы решить побочный эффект .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 тоже показывает, что решение не из приятных.По пунктам критики я разобрался, а башни сказали
- Хватит делать диалекты
- Легко сбивается с толку, умственно отягощен
- отвязка от стандарта
- Запутался в синтаксисе ts
- Vue попытка оспаривать стандарт
И в обсуждении есть очень интересные предложения, очень интересные, такие как
1. 注释标记ref
<script setup>
// @ref
let count=0
</script>
2. 标记一个新语言 vuescript
<script lang="vs">
</script>
...等等
Моя точка зрения
Мне на самом деле не нравится ref: эта грамматика, но мне не нравится нетерпимость нетерпимого сообщества к этому предложению. Все виды дискуссий смертельно опасны. Я думаю, что изучение Vue должно быть энергичным. Если я немного прав, эта критика Вы можете использовать Коды Синъицюань - Три Руки Цзехуа, чтобы ответить
Бери верх - принимай критику
- Диалектная критика
- Ты прав, это диалект, просто люблю творить
- Я не думаю, что нужно объяснять себя, это ярлыкная грамматика, потому что после объяснения другой стороне остается еще десять вопросов.
- умственное бремя
- Обучение в тягость, или нужно учить фронтенд, ts, jsx надо учить
- ref и let на самом деле очень похожи, нагрузка уже очень мала
- Стандартная развязка
- Сказано что я диалект и это еще вариант.Есть четкая пометка настройки скрипта.Если не нравится использовать то можно вообще не использовать.
- Запутался в синтаксисе ts
- Старший брат, тс тоже диалект, нельзя просто использовать хэнаньский диалект, потому что так много людей говорят на северо-востоке.
- vue пытается бросить вызов стандартам
- Angular и React тоже бросают вызов, а народу их распыляет не так уж и много.Вызов vue не пройдет.Он может только показать, что это не вызов стандарта, а человек, который осмеливается бросить вызов, это не вы, делая ты ревнуешь
Химик - Диалект действительно плох?
Согласно традиционной фронтальной точке зрения, дискуссия заканчивается после того, как я закончу вышеизложенное, но я подробнее остановлюсь на своих мыслях.
Это ничего не сказать.Каждую технологическую новинку можно рассматривать как диалект, и даже серию статей можно опубликовать.
- Хороший html, jsx React на самом деле использует диалекты
- Что такое шаблон vue, его можно написать
:item
,@click
, некачественный - Предложение декораторов дважды пересматривалось в стандарте и до сих пор не доработано. Angular и машинопись используются уже несколько лет? некачественный
- В апплете куча синтаксиса, и вроде ничего нестандартного нет, потому что стандартного пока нет, так что буду тайком менять, если нечего делать.
- Северо-восточный диалект, крышка обмякла, а кожа прилипла.Это тоже диалект, но силы нет, можно еще сказать, что колено натерто.
Мне очень нравятся вышеперечисленные диалекты, и это сильно способствовало процветанию передовой экологии Эти идиоты подняли нам зарплату.
Практика - стандарт должен быть в порядке
Навешивание ярлыков не является врожденным, это результат взвешивания результатов обсуждения, и вам действительно нравится эталон? Относительно стандарта не очень хорошо,Промышленность Poly Big Brother СтатьиЭто ясно написано, это, вероятно, означает
- Стандарты и нормы эволюционны и являются результатом компромисса между сторонами
- Стандарты и нормы часто отстают от практики
- Спецификации не являются единственным источником авторитета
Кроме того, есть только одна вещь, которую он упустил, и это стандарт, верно?
Если предложение в 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, но многие команды ждут
Говорите вудэ и создайте новый стиль
Во фронтовых единоборствах мир по-прежнему важнее всего, и в гнезде меньше драк. Наконец, я дам его всем в конце книги мистера Ма. Давайте вместе усердно учиться, сублимировать себя, и служить обществу гармонично.
Ссылка на ссылку
- новый адрес предложения рефери
- Китайский перевод реферального предложения
- Знать об обсуждении
- Анализ крупных братьев в промышленности
- Инсайдер технологии Vue3
Спасибо друзья
- это мыКоманда Хуагошаньпроект с открытым исходным кодомelement3Добро пожаловать, чтобы попробовать и звезду
- Библиотека компонентов внешнего интерфейса, поддерживающая vue3.