Video version address

Dear friends, I am a great sage. Recently, the REF proposal of VUe3 has been widely discussed in the community. I have looked at the relevant RFC and Zhihu discussions in the community, and I found that many young people do not talk about martial morality

First, the conclusion: I actually don’t like the syntax ref:, but I don’t like the community’s intolerance to this proposal. Is the dialect necessarily bad? Is the standard always good? Harmony should be valued in the front circle. On the basis of popularizing Mandarin, interesting dialects should also be vigorously promoted

There’s been a kidney touch

Vue3 has a new syntax called ref. The function of vue3 is to change a simple data structure into a responsive one, such as ref(0),ref(‘ rattail juice ‘). The side effect of vuE3 is to add a.value

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

Copy the code

For the source and details of the Compostion, refer to this article I wrote. The Vue3 animation that was busy all night was good, but too short

  1. To solve the Option API’s This black box problem, we introduced composition API
  2. In order to solve the namespace problem of reactivity manipulating simple data structures, API Ref was introduced
  3. To solve the composiiton unified return problem, Script Setup was introduced
  4. To address the.value side effects of re, ref sugar is introduced

Script Setup proposal code optimized to look like this, for example, eliminates the need for uniform returns in setup

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

The latest proposal export does not need to be written, which is more and more similar to Svelte to the delight of the community

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

Now, the other side effect is to manipulate the.value, so today’s main character ref syntax sugar, very soon

<script setup>
// use ref: new syntax declaration
ref: count = 1
function inc() {
  // Direct manipulation of variables without. Value
  count++
}
</script>
Copy the code

Community criticism

Ref’s new proposal address It’s a cool syntax, but new syntax candyref: RFC below the meme, also not a pleasing solution, probably the point of criticism sorted out, the towers said

  1. Stop making dialects
  2. Easily confused, mental burden
  3. Decoupled from the standard
  4. Confusion with TS syntax
  5. Vue wants to challenge standards

And there were some very interesting suggestions in the discussion, which felt very interesting, like

1. Comment ref<script setup>
// @ref     
let count=0
</script>2. Mark a new language, vuescript<script lang="vs">
</script>. , etc.Copy the code

I am of the view

In fact, I don’t like the syntax ref:, but I don’t like the community’s intolerance to this proposal, and all kinds of discussions are too intense. I think learning VUE needs to be strengthened. If I were Xiaoru, I could respond to these criticisms with the secret of Xingyi Boxing — The third hand of transformation

Take over – Accept criticism

  1. Dialect criticism
    • You’re right. It’s a dialect
    • I think this is label syntax without explaining itself, because there are ten questions after explaining
  2. Mental burden
    • Learning is a burden, or you learn how, TS, JSX need to learn
    • Ref and let are actually very similar, so the burden is already very small
  3. Standard decoupling
    • It is also an optional script setup flag. If you do not want to use it, you may not use it
  4. Confusion with TS syntax
    • Eldest brother, TS is also a dialect. You can’t spray Henan dialect just because there are many people speaking northeast Dialect
  5. Vue wants to challenge standards
    • Angular, React, vue, vue, vue, vue, Angular, React, Vue, Vue, Vue

Hand – Is dialect really bad

In the traditional way, this is the end of the discussion, but let me elaborate on my thoughts

This has nothing to say, every technological innovation, can be regarded as a dialect, or even a series of articles

  1. React JSX doesn’t support HTML
  2. What is the template of vue:item.@clickNot up to standard
  3. The Decorators proposal has been revised twice in the standard and is not yet finalized. Angular and typescript have been around for years? substandard
  4. Small program a pile of grammar, as if there is no substandard place, because there is no standard, nothing also secretly change
  5. Northeast Dialect, limping cap kateru skin, also dialect, but not mandatory, you can also say, scraped knee

The above dialects, I like very much, but also greatly prosperous front-end ecology, formal these unorthodox, improve our wages

Hand. – Is the standard good

Annotations are not hardwired, they are designed to weigh and discuss outcomes, and do you really like the standards? About the standard is really good, the industry gathers big brother article to write very clearly, probably means is

  1. Standards and norms evolve and are the result of compromise
  2. Standards and specifications often lag behind practice
  3. Norms are not the only source of authority

Is it really good to mention just one thing that he left out, standards

Tc39 proposal, if all can pass JS will be written like this, code address

These are the standards you like, but I won’t go into details, rattail juice

#! 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(a);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
  
Copy the code

Reflect on

I think the ref proposal will definitely be adopted. If it catches on, we can open our imagination and spread the Northeast Chinese dialect to the whole country, for example, in addition to ref and computed tomography

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

Copy the code

And react hooks

State: define the hooksfunction App(props){
    state: num = props.num
    effect: () = >{
    	num=props.num
    }
}
Copy the code

Even Node, the browser’s own API, can follow


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

I worry about

I think the reason why I can’t use VUe3 in a large scale is not ref, which looks cool but is controversial, but the compatible version of IE. Ref does not delay people’s use of it. Too deep discussion of small functions leads to distraction, which in fact has an impact on the popularity of VUe3

Hopefully Vue will have ie compatible versions released soon, it’s not as cool as ref, but a lot of teams are waiting

Speak wudai tree new wind

The front end of the martial arts or to harmony, less engage in internal strife, and finally to the end of the book to everyone, together to study well, sublimate self, service harmony in society

Refer to the link

  • Ref’s new proposal address
  • Chinese translation of ref proposal
  • Discussion on zhihu
  • Analysis of big brothers in industry
  • Inside the Vue3 technology

Thank you, friends

  • This is our open source project element3 from the Flower mountain team welcome to try and star
  • A front-end component library that supports VUE3