Vue3 02.为什么要使用ref

为什么要使用ref

自动更新DOM

在模板中使用了一个ref，然后在改变了这个ref的值时，Vue会自动检测到这个变化，并且相应地更新DOM。当一个组件首次渲染时，Vue会追踪在渲染过程中使用的每一个ref。然后在任意一个ref被修改时，它会触发追踪它的组件的一次重新渲染。

如果我们使用的是普通变量，那么无法检测变量的访问或修改。但是我们可以通过getter/setter方法来拦截对象属性的get和set操作。

该.value属性给了Vue机会来检测ref何时被访问或修改。在其内部，Vue在它的getter中执行追踪，在它的setter中执行触发。

//示例伪代码
const myRef = {
  _value: 0,
  get value() {
     track()    //依赖收集
     return this._value
  }
  set value(newValue) {
     this._value = newValue
     trigger() //触发更新
  }
}

这就是Vue最基本的原理

函数传递

另一个ref的好处是，与普通变量不同，可以将ref传递给函数，并同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。