vue、react中的数据处理基本使用（防遗忘

先看抽象模型中的图片容易理解，然后再看两个的代码。

1.react中通过点击按钮实现+1：

const Add1:React.FC = ()=>{
    const [n,setN] = React.useState(0)
    const add=()=>{
        setN(n+1)
    }
return(
    <div>
        <span>{n}</span>
        <button onClick={add}>+1<button>
    <div>
) 
}

codesandbox.io/s/still-res…

2.vue中通过点击按钮实现+1：

<template>
    <div id="app">
        <button @click="this.add">+1</button>
        <span>{{ this.n }}</span>
    </div>
</template>

<script>
export default {
    name: "App",
    data: () => {
        return { n: 0 };
    },
    methods: {
        add() {
            return (this.n += 1);
        },
    },
};
</script>

codesandbox.io/s/restless-…

3.抽象模型

vue

事件处理 | Vue.js (vuejs.org) Class 与 Style 绑定 — Vue.js (vuejs.org)

react

使用 State Hook – React (docschina.org)