vue3.0和react的区别,别混淆了

class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        this.state={};
        console.log("2,设置状态机");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <div>
                <div>{this.props.name}</div>
            </div>
        )
    }

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

以上是react的部分代码,主要看一个结构,不要太在意细节.

声明变量和接参都是在一个constructor生命周期里进行的.

而渲染的话就是render里面的.需要注意一定要return(),好多人犯这个错,至少我是。

vue3.0的话

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    return {
      value, ienter,addValue1
    }
  }

这里仅仅声明了一个value1变量，所以简单些ref,如果声明变量较多,可用reactive包裹起来,作为一个对象属性。

以下是二者的区别;

1.reactive

• reactive的参数必须是一个对象，包括json数据和数组都可以，否则不具有响应式
• 如果给reactive传递了其他对象（如时间对象），默认情况下修改对象界面不会自动更新，如果想更新，可以通过给对象重新赋值来解决

2.ref

既然有了reactive，为何还要ref呢？当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，他都有。还是那句老话：

死死记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

• 在vue中使用ref的值，不用通过.value获取
• 在js中使用ref的值，必须通过.value获取

 在方法使用上,感觉react和vue2.0更像点吧,可以直接进行使用,vue3.0箭头函数比较多吧。

例：

 let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })

箭头+箭头+箭头!!!!

其他的有机会再更新。。。