第五篇 vue3 ref 与 reactive 对比

ref 若需要自动加载 .value ,那么就要在  底部 菜单 中  设置  选项  选择 vue    勾选 ：

Auto Insert: Dot Value

Auto-complete Ref value with `.value`.

注意点： ref  不能写越过 value.  必须要在valeu 前面 进行定义

通过 reactive 来修改整体名称的值

let carad = reactive ({brand:"小汽车",price:"1888"})


// 通过 reactive 来修改总的代理名称
function changeReactiveName(){
  // 这里是 把 对象 分配 到  carad  对象中去 去修改整体的值
  Object.assign(carad, {brand:"小汽车99999",price:"18889999999"})
}

通过 ref 来修改整体的名称的值

let carad = ref({brand:"小汽车",price:"1888"})

// 通过 ref 来修改总的代理名称
function changeReactiveName(){
  // 这里是 把 对象 分配 到  carad  对象中去
  carad.value = {brand:"小汽车hello",price:"188878999"}

}

总结：

宏观角度看：

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

2. reactive用来定义：对象类型数据。

• 区别：

1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。

2. 

3. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

• 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref。

2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

原文地址：https://blog.csdn.net/liuxiaojun828/article/details/145265218

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！