那个网站教做菜做的好,站长之家网站流量查询,h5游戏网站,杭州app开发公司官网文章目录 ref1.1 ref将基础类型和对象类型数据转为响应式1.2 ref()获取id元素1.3 isRef reactive1.1 reactive()将引用类型数据转为响应式数据#xff0c;基本类型无效1.2 ref和reactive的联系 toRef 和 toRefs1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的 ref
… 文章目录 ref1.1 ref将基础类型和对象类型数据转为响应式1.2 ref()获取id元素1.3 isRef reactive1.1 reactive()将引用类型数据转为响应式数据基本类型无效1.2 ref和reactive的联系 toRef 和 toRefs1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的 ref
1.1 ref将基础类型和对象类型数据转为响应式 接受一个内部值返回一个响应式的、可更改的 ref 对象此对象只有一个指向其内部值的属性 .value。 vue3中定义数据默认不是响应式的数据需要手动将数据转化为响应式的这里就用到了ref()
let num1 20 //非响应式的import {ref} from vuev
let num1 ref(20) // 响应式的ref()可以将数据转为响应式数据获取ref(xx)的值需要使用.value的形式html模板中使用不需要.value因为html中默认就是通过.value来获取值的
1.2 ref()获取id元素
p refdemo获取ref的元素/pimport {refonmounted} from bueonMounted((){let demo ref() 这样就获取了iddemo的元素console.log(demo.value)
})注意声明的变量名要跟dom元素的id一致才可以 ref不传任何参数。记得在dom挂载之后再获取
1.3 isRef
判断是不是一个ref对象
import { ref, Ref,isRef } from vue
let message: Refstring | number ref(我是message)
let notRef:number 123
const changeMsg () {message.value change msgconsole.log(isRef(message)); //trueconsole.log(isRef(notRef)); //false}reactive
1.1 reactive()将引用类型数据转为响应式数据基本类型无效 let _obj {num: 20,}let objRef ref(_obj)console.log(ref obj, objRef.value.num)let obj reactive(_obj)
console.log(reactive obj, obj.num) 其实ref().value内部是跟reactive()一样的所以说ref内部是通过reactive实现的。
ref()----用于基本数据类型和引用类型reactive()----用于引用类型
1.2 ref和reactive的联系
reactive针对引用类型内部通过new Proxy实现因为new proxy可以直接拦截引用类型无法直接在基础类型进行拦截。
ref针对基础类型和引用类型内部会生成一个对象添加value属性指向数据类型然后再通过reactivenew proxy对生成的对象进行拦截。达到响应式的效果。
所以为什么ref的值需要用.value来获取因为内部生成一个新的带有value属性的对象只有对象的形式才能使用new proxy进行拦截 toRef 和 toRefs 作用: 在解构 reactive()得到对象的时候将解构的数据变成响应式ref()类型. 当然解构出来的数据依旧需要通过.value的形式来操作. 常用于es6的解构赋值操作因为在对一个响应式对象直接解构时解构后的数据将不再有响应式而使用toRefs和toRef 可以方便解决这一问题。 let _obj {num: 20,}
let obj reactive(_obj)//toRef
let num toRef(obj,num) //toRefs
let { num } toRefs(obj)
const handleClick () {// obj.num// toRefs()模式num.value}toRef针对对象的单个属性,toRefs直接针对对象,记得需要用.value来获取值
1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的
const obj {foo: 1,bar: 1
}
const state toRef(obj, bar)
// bar 转化为响应式对象
const state toRefs(obj)
// obj 转化为响应式对象obj对象是非响应式的 ,toRef/toRefs可以将obj转为响应式对象,但视图的更新方法在ref reactive中有实现,toRef/toRefs并没有更新视图的功能
toRef/toRefs实现的大体思路是:判断是不是响应式对象,如果是直接返回,如果不是通过ObjectRefImpl()将数据变成响应式 export function toRefT extends object, K extends keyof T(object: T,key: K,defaultValue?: T[K]
): ToRefT[K] {const val object[key]return isRef(val)? val: (new ObjectRefImpl(object, key, defaultValue) as any)
}ObjectRefImpl的实现class ObjectRefImplT extends object, K extends keyof T {public readonly __v_isRef trueconstructor(private readonly _object: T,private readonly _key: K,private readonly _defaultValue?: T[K]) {}get value() {这里没有监听视图变化const val this._object[this._key]return val undefined ? (this._defaultValue as T[K]) : val}set value(newVal) {这里没有监听视图变化this._object[this._key] newVal}
}下面是ref的源码实现,明显的区别在于toRef没有视图的更新
