vue3 - ref和reactive的区别

1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value 如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value

   2. Vue是如何决定是否需要自动添加.value的 Vue在解析数据之前, 会自动判断这个数据是否是ref类型的, 如果是就自动添加.value, 如果不是就不自动添加.value

   3. Vue是如何判断当前的数据是否是ref类型的 通过当前数据的__v_ref来判断的 如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

数据是ref类型

点击按钮，页面数据变成666了，注意，vue模板中没有age.value,因为ref类型的数据有isRef属性，底层自动会将.value加上

数据是reactive类型

点击按钮，页面还是个对象数据，因为是reactive类型数据，没有isRef属性，vue不会自动在模板添加.value, 所以我们需要手动在模板添加age.value

我们如何判断数据到底是ref还是reactive?

通过isRef / isReactive 方法