【vue3/react hooks/svelte对比学习】基础语法：引用组件+计数器

引用组件

三者语法都比较简单 一致采用上面引用下面直接使用的方式

vue3

<script setup>
import MyCounter from './notes/counter.vue';
</script>

<template>
  <my-counter />
</template>

react hooks

import Counter from './notes/counter';
// 上面引用 下面直接使用

export default function () {
  return (
    <div>
      <Counter />
    </div>
  );
}

svelte

<script>
import Counter from './notes/counter.svelte';
// 上面声明 下面直接使用
</script>

<Counter />

计数器实现

vue3

<script setup>
import { ref } from 'vue';
// ref在此时相当于vue2中的data，ref的参数是初始值
// 不管是变量还是函数 都是上面声明 下面使用
const counter = ref(0);

function onAdd () {
    counter.value++;
}

</script>

<template>
    {{ counter }}
    <button @click="onAdd">+1</button>
</template>

react hooks

import { useState } from 'react';

export default function () {
    // 此处采用的es6的数组解构赋值，前者为变量值，后者为改变变量的方法/函数
    const [counter, setCounter] = useState(0); 

    function onAdd () {
        setCounter(counter + 1);
    }

    return (
        <div>
            { counter }
            <button onClick={ onAdd }>+1</button>
        </div>
    );
}

svelte

<script>
// 非常简洁的变量+函数  基本是web component框架的进化完全体
let counter = 0;

function onAdd () {
    counter++;
}
</script>

{ counter }
<button on:click={ onAdd }>+1</button>

加油！