目录
︾
Ref与Reactive
Ref
Ref 用来创建基础类型的响应式数据,模板默认调用value显示www.qmia.cn数据。方法中修改需要修改value的值才能修改
1 2 3 4 5 6 7 8 9 10 | <!-- 模板语法> <template> <div>{{state}}</div> </template> //js 脚本 setup(){ let state = ref(10) state.value = 11 return {state} } |
Reactive
Reactive 用来创建引用类型的响应式数据,
1 2 3 4 5 6 7 8 9 10 | <!-- 模板语法> <template> <div>{{state.name}}</div> </template> //js 脚本 setup(){ let state = reactive({name: 'aaa' }}) state.name = 'zhangsan' return {state} } |
Ref与Reactive的区别
Ref的本质是通过Reactive创建的,Ref(10)=>Reactive({value:10});
Ref在模板调用可以直接省略value,在方法中改变变量的值需要修改value的值,才能修改成功。Reactive在模板必须写全不然显示整个数据。
Reactive的本质是将每一层的数都解析成proxy对象,Reactive 的响应式默认都是递归的,改变某一层的值都会递归的调用一遍,重新渲染dom。
shallowRef 与shallowReactive
Ref与Reactive创建的都是递归响应的,将每一层的json 数据解析成一个proxy对象,shallowRef 与shallowReactive创建的是非递归的响应对象,shallowReactive创建的数据第一层数据改变会重新渲染dom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var state = shallowReactive({ a: 'a' , gf:{ b: 'b' , f:{ c: 'c' , s:{d: 'd' } } } }) state.a = '1' //改变第一层的数据会导致页面重新渲染 //state => Proxy {a:"a",gf:{...}} //如果不改变第一层 只改变其他的数据 页面不会重新渲染 例如 state.gf.b = 2 |
通过shallowRef创建的响应式对象,需要修改整个value才能重新渲染dom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var state = shallowRef({ a: 'a' , gf:{ b: 'b' , f:{ c: 'c' , s:{d: 'd' } } } }) state.value.a = 1 /* 并不能重新渲染,shallowRef的原理也是通过shallowReactive({value:{}})创建的,要修改value才能重新渲染 */ state.value = { a: '1' , gf:{ b: '2' , f:{ c: '3' , s:{d: 'd' } } } } |
如果使用了shallowRef想要只更新某一层的数据可以使用triggerRef
1 2 3 4 5 6 7 8 9 10 11 12 | var state = shallowRef({ a: 'a' , gf:{ b: 'b' , f:{ c: 'c' , s:{d: 'd' } } } }) state.value.gf.f.s.d = 4 triggerRef(state) |
页面就会重新渲染
toRaw ---只修改数据不渲染页面
如果只想修改响应式的数据不想引起页面渲染可以使用toRaw这个方法
1 2 3 4 5 6 7 8 9 10 | var obj = {name: 'test' } var state = reactive(obj) var obj2 = toRaw(state) obj2.name = 'zs' //并不会引起页面的渲染 ---- //如果是用ref 创建的 就要获取value值 var obj = {name: 'test' } var state = ref(obj) var obj2 = toRaw(state.value) |
markRaw --- 不追踪数据
如果不想要数据被追踪,变成响应式数据可以调用这个方法,就无法 追踪修改数据重新渲染页面
1 2 3 4 | var obj = {name: 'test' } obj = markRaw(obj) var state = reactive(obj) state.name = 'zs' //无法修改数据 页面也不会修改 |
toRef --- 跟数据源关联 不修改UI
如果使用ref 创建的响应式变量,不会与源数据关联,如果想要与源数据关联但数据更改不更新UI,就要使用toRef创建
1 2 3 4 5 6 7 8 | var obj = {name: 'test' } var state = ref(obj.name) state.name = 'zs' //此时obj的name 属性值并不会改变,UI会自动更新 /// var obj = {name: 'test' } var state = toRef(obj, 'name' ) //只能设置一个属性值 state.name = 'zs' //此时obj里面的name属性值会发生改变,但是UI 不会更新 |
toRefs ---设置多个toRef属性值
如果想要设置多个toRef属性值,可以使用toRefs
1 2 3 4 | var obj = {name: 'test' ,age:16} var state = toRefs(obj) state.name.value = 'zs' //obj的name的属性值也会改变,但UI不会更新 state.age.value = 18 //obj的age的属性值也会改变,但UI不会更新 |
customRef ---自定义一个ref
通过customRef这个方法可以自定义一个响应式的ref方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function myRef(value){ /* customRef函数返回一个对象,对象里面有2个方法,get/set方法,创建的对象获取数据的时候能 访问到get方法,创建的对象修改值的时候会触发set 方法 customRef函数有2个参数,track/trigger,track参数是追踪的意思,get 的方法里面调用,可以随时追踪数据改变。trigger参数 是触发响应的意思,set 方法里面调用可以更新UI界面 */ return customRef((track,trigger)=>{ return { get(){ track() //追踪数据 return value }, set(newVal){ value = newVal trigger() //更新UI界面 } } }) } setup(){ var age = myRef(18) age.value = 20 } |
ref 捆绑页面的标签
vue2.0 可以通过this.refs拿到dom元素,vue3取消了这一操作,没有了refs拿到dom 元素,vue3取消了这一操作,没有了refs拿到dom元素,vue3取消了这一操作,没有了refs这个属性值,可以直接用ref()方法生成响应式变量与dom 元素捆绑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <div ref= "box" ></div> </template> import {ref,onMounted} from 'vue' /* setup 方法调用是在生命周期beforeCreate与created 之间 */ <script> setup(){ var box = ref( null ) onMounted(()=>{ console.log( 'onMounted' ,box.value) }) console.log(box.value) return {box} } </script> |
总结
到此这篇关于Vue3.0中Ref与Reactive区别的文章