VUE3-ref对比reactive

宏观角度看

1. ref用来定义：基本类型数据、对象类型数据。
2. reactive用来定义：对象类型数据。

区别

1. ref创建的变量必须使用.value（可以使用vue(official)插件自动添加.value）。
2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换，浅拷贝）.

let car = reactive({name: '奔驰车', price:100});
// 使用Object.assign去整体替换。奔驰车和宝马车还是同一个对象
car = Object.assign(car, {name: '宝马车', price:110});
// 现在car（第二辆奔驰车）跟原来的car 不是一个对象了，它被重新分配的地址。
car = {name: '第二辆奔驰车', price:110}

使用原则

1. 若需要一个基本类型的响应式数据，必须使用ref。
2. 若需要一个响应式对象，层级不深，ref\reactive都可以。
3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

使用vue(official)插件配置为ref对象自动添加.value

下面的操作都是在Visual Studio Code中进行的

方法一

1. 找到vue(official)插件，点击右下角的设置按钮，打开了菜单。
2. 在菜单中点击Settings。
3. 在Settings窗口中，找到Auto Insert:Dot Value，勾选上即可。

方法二

1. 在Visual Studio Code的左下角，点击设置按钮，打开了菜单。
2. 在菜单中点击Settings。
3. 在Settings窗口中，左侧的导航栏中依次找到Extensions --> Vue
4. 找到Auto Insert:Dot Value，勾选上即可。