vue3中ref和reactive的区别

Vue3中实现数据响应式，用到的是组合式API中的ref和reactive函数，不同的是ref函数一般定义基本类型数据，而reactive函数用于定义一个对象类型的响应式数据。

参考资料
ref
ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改的值，可以触发模板的重新渲染，显示最新的值
先定义x，y为0，当使用函数时，再更新x和y的值

let x = 0
let y = 0

function updataNumber() {
	x = 2
	y = 3 
}

reactive
reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了==》【所以需要用toRefs函数转化为响应式数据对象】
在pos中有两个key都为0，在函数中更新两个值 = 2.
x,y必须和对象在一起才能引用，如果像第三种const { x } = pos，先取出来，再进行更新，x还是旧的值，并且会丧失响应式

const pos = {
	x: 0,
	y: 0,
}

function updata	Object() {
	pos.x = 2
	pos.y = 3 
}

const { x } = pos
pos.x = 3

案例

const aForm = ref({
  name: '',
  sex: '',
  addr: [],
})
const aRules = reactive({
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
})

秒客网

vue3中ref和reactive的区别

相关文章