react和vue语法之间的差别

vue2与vue3的写法差距

vue2

执行方法需要加 this

export default {
   data () {
     return {
       list: []
     }
   },
   created () {
     this.getData()
   },
   methods: {
     getData () {
       this .$api.get( 'topics' , null , r => {
         console.log(r)
       })
     }
   }
}

vue3语法

//父组件






//子组件

 react函数组件和类组件的差异

函数组件

function MessageThread() {
  const [message, setMessage] = useState('');
  const showMessage = () => {
    alert('You said: ' + message);
  };
  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };
  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };
  return <>
    
    Send
  ;
}

 类组件

 class main extends Components {
    constructor(props){
      super(props)
       this.state={
        name:"zs",
        age:12
      }
    }
    addage(){
      return this.state.age+12
    }
    render(){
      const flag=true
      const list = [1, 2, 3]
      return (
        // jsx需要一个根元素
        

          
{this.state.name}
          
{this.state.age>18?'成年':'未成年'}
          
{this.addage.call(this)}
            {/* 三元表达式判断显示元素 */}
          {
            flag?
          
元素1
             :
          
元素2
          }
          {/* 只能用map循环 */}
          {list.map((item) => {
            return 
{item}
          })}
        
      )
    }
  }

 函数组件没有this指向问题，变量直接使用，方法的使用也无需通过this

    onClick={handleSendClick}

类组件的方法需要手动绑定this 绑定this的方法有三种

01.

 constructer(props){
        this.handleclick=this.handleclick.bind(this);
    };

02.

    button3
    handleclick3 = ()=>{
        console.log('button3被点击了')
    }//方法写成箭头函数形式

03.

绑定this的情况下还可以传递参数

onClick={(e)=>this.handleClick(e,aaa)}

onClick={this.handleClick.bind(this,aaa)}