vue3 之 ref、reactive

1.ref、reactive的区别

reactive

• 定义复杂类型响应式数据；
• proxy类型，内部基于ES6的 proxy 实现；

ref

• 定义一个响应式数据，普通类型和复杂类型都可；
• 基本数据类型：响应式依然是靠Object.defineProperty()的get与set完成的
• 对象类型的数据：内部基于（reactive）ES6的 proxy 实现；

2.注意事项

    ref、reactive变量可以监听到数据的变化，用时需注意不可直接替换变量。

//父组件







//子组件

• 初始化

• 上面例子中，如果点击1，再点击2、3，页面数据无变化
• 直接点击2、3可看到数据变化，原因是点1触发的函数直接修改了变量的类型