Vue中reactive和ref的用法是什么？差别在哪？
发布时间：2022-01-07 02:17:39 所属栏目：编程 来源：互联网
导读：本文是主要给大家介绍Vue中reactive和ref的内容，接下来会分别介绍reactive和ref的用法以及两者的区别，对大家学习和理解reactive和ref的使用有一定的参考价值，感兴趣的朋友接下跟随小编一起学习一下吧。 Ref与Reactive Ref Ref 用来创建基础类型的响应式数
|
本文是主要给大家介绍Vue中reactive和ref的内容，接下来会分别介绍reactive和ref的用法以及两者的区别，对大家学习和理解reactive和ref的使用有一定的参考价值，感兴趣的朋友接下跟随小编一起学习一下吧。 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据，模板默认调用value显示数据。方法中修改需要修改value的值才能修改 <!-- 模板语法> <template> <div>{{state}}</div> </template> //js 脚本 setup(){ let state = ref(10) state.value = 11 return {state} } Reactive Reactive 用来创建引用类型的响应式数据， <!-- 模板语法> <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 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 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 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这个方法 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 --- 不追踪数据 如果不想要数据被追踪，变成响应式数据可以调用这个方法，就无法 追踪修改数据重新渲染页面 var obj = {name:'test'} obj = markRaw(obj) var state = reactive(obj) state.name = 'zs'//无法修改数据 页面也不会修改 toRef --- 跟数据源关联 不修改UI 如果使用ref 创建的响应式变量，不会与源数据关联，如果想要与源数据关联但数据更改不更新UI，就要使用toRef创建 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 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方法 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 元素捆绑 <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> （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐