ref和computed的区别前提 ref和computed都可以动态改变值，但是又有区别 ref 独立的响应式容器（手

前提

ref和computed都可以动态改变值，但是又有区别

ref 独立的响应式容器（手动）

它的值初始化之后就和初始源没有关系了，后续只能手动改变，

computed 依赖追踪的动态计算（自动）

它的值完全由回调函数决定，只要回调函数的值变了，它就会自动计算重新赋值。

案例

<template>
  <div>
      <button @clickl="btn> 点击改变值 </button>
  </div>
</template>

const sourceValue = ref('这是初始的值')

const refValue = ref(sourceValue.value + 
  '这是ref的值'
)


const computedValue = computed(() => {
  return sourceValue.value
  + '这是computed的值'
})


const btn  = () => {
  sourceValue.value = '这是改变之后的来源'
  console.log(refValue.value)
  console.log(computedValue.value)
}