ref是什么?
- 生成值类型的响应式数据
- 可用于模板和reactive
- 通过.value修改值
- 可以获取DOM元素
{{nameRef}} -- {{state.name}}
// 获取dom元素
onMounted(()=>{ console.log(elemRef.value); });
toRef是什么?
- 针对一个响应式对象(reactive封装)的prop属性!!!
- 创建一个ref, 具有响应式
- 两者保持引用关系
toRefs是什么?
- 将响应式对象(reactive封装)转换为普通对象
- 对象的每个prop属性都是对应的ref
- 两者保持引用关系
最佳使用方式
- 用reactive做对象的响应式, 用ref做值类型响应式
- 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, ‘xxx’);
- ref的变量命名都用xxRef
- 合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数);
使用示例:
1. 子组件, script标签是这种写法: