ref 的基本类型使用
count: 0
count++
message: hello
追加 !
reactive 的对象类型使用(只能用于对象类型，不能用于基本类型，如 number、string、boolean 等)
name: Vue 3
age: 18
age++
修改 name
ref 的对象类型使用（相比reactive, ref在js里使用对象时候，需要加上.value 来访问对象的属性。.value里其实还是reactive）
name: Vue 3
age: 18
age++
修改 name
ref对比reactive
定义用途：
ref 用来定义：基本类型数据、对象类型数据
reactive 用来定义：对象类型数据
区别：
ref 创建的变量必须使用 .value（可以使用 volar 插件自动添加 .value）
reactive 重新分配一个新对象，会失去响应式（可以使用 Object.assign 去整体替换），见下面demo
使用原则：
若需要一个基本类型的响应式数据，必须使用 ref
若需要一个响应式对象，层级不深，ref、reactive 都可以
若需要一个响应式对象，且层级较深，推荐使用 reactive
reactive 重新分配对象的问题与解决方案
原始对象：name: Initial, age: 20
直接重新分配对象（会失去响应式）- 刷新页面后点，而且不能有showWarning赋值，不然会生效，搞不懂
使用 Object.assign 重新分配（保持响应式）- 刷新页面后点
⋯