setup+ref+reactive实现vue3响应式功能

setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用。在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能?

一、ref

setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之前必须引入。

示例1:ref 使用

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref("此时心情好差呀!")
  setTimeout(()=>{
   mood.value = "心情要变的像人一样美"
  },3000)
  return{
   mood
  }
 }
}
</script>

此时可以在 setup 模板内任意编辑 mood,可以保证实时响应。实例在修改 mood 的值加了 value ,是因为 ref 的工作原来:

let mood = ref("此时心情好差呀!")

修改成:let mood = proxy({value:"此时心情好差呀!"})

二、reactive

上述的 ref 让基础数据类型具备了响应式,但是如果我们换成引用类型的数据,就会失效。所以引入了 reactive。

reactive 通过底层包装,将引用类型数据包装到 proxy 内,使用原理如:

let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})

// 运行结果为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }

引用的时候,直接使用 me.want 就可以了。

示例2:reactive 使用

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化了"
  },3000)
  return{
   me
  }
 }
}
</script>

通过 setup + ref + reactive 就可以完全实现 vue2 中 data 的响应式功能,所以 setup 完全可以替换掉 data。

三、toRefs 、toRef 应用

setup + ref + reactive 实现了数据响应式,不能使用 ES6 解构,会消除响应特性。所以需要 toRefs 解构,使用时,需要先引入。

它的工作原理为:

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})
//运行为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }

const { single, want } = toRefs( me )
// 运行为
single : proxy({ value:true })
want : proxy({ value:"暖的像火炉的暖男" })

toRefs 把 single 和 want 解构成两个 proxy ,所以是响应式的。

示例3:toRefs 解构数据

<template>
 <div>
  {{want}}
  <input type="text" v-model="want">
 </div>
</template>
<script>
import { ref , reactive, toRefs } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化了"
  },3000)
  // 解构
  const {single,want} = toRefs(me)
   return{
    single,
    want
   }
  }
}
</script>

toRef作用:将对象某一个属性,作为引用返回。比较难理解,可以打印查看下结果更容易理解。

let me = reactive({
 single:true,
 want:"暖的像火炉的暖男"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//打印结果
ObjectRefImpl {
 __v_isRef: true
 _key: "love"
 _object: Proxy {single: true, want: "暖的像火炉的暖男"}
 value: undefined
 [[Prototype]]: Object
}

toRef 是组件之间进行传值值,对可选参数进行处理,运行时,先查看 me中是否存在 love ,如果存在时就继承 me 中的 love ,如果不存在时就创建一个 love ,然后解构赋值给变量 lv。

示例4:toRef 使用

<template>
 <div>
  {{want}}
 <input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs, toRef } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火炉的暖男"
  })
 setTimeout(()=>{
  me.want = "夏天容易化了"
 },3000)
 const {single,want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return{
  single,
  want
  }
 }
}
</script>

四、总结

ref 让基础数据类型具备响应式,而 reactive 让引用类型的数据具备响应式。setup + ref + reactive 完全实现 vue2 中 data 响应式功能。

toRefs 解构 reactive 包装的数据,toRef 用于对可选参数。

以上所述是小编给大家介绍的通过setup+ref+reactive实现vue3响应式功能,希望对大家有所帮助。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • Vue3响应式方案及ref reactive的区别详解

    目录 一.前言 二.新的方案 1. 缘由 2. Proxy 和 Reflect 1) Proxy 2) Reflect 3. reactive 1) createReactiveObject() 函数 2) mutableHandlers() 函数 -> 对象类型的 handlers 3) mutableInstrumentations() 函数 -> Map Set等类型的 handlers 4. ref 1) createRef() 2) toReactive() 3)proxyRefs(

  • Vue3响应式对象Reactive和Ref的用法解读

    目录 一.内容简介 二.Reactive 1. 关键源码 2. 源码流程分析 三.代理拦截操作 1. 数组操作 2.Get操作 3. Set操作 4. 其余行为拦截操作 四.Ref对象 1. 思考一个问题 2. 简要说明 3. 关键源码 四. 源码解析 五.总结 一.内容简介 本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref.前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在关键位置备注了详细注释. 备注:本篇幅只讲到收集依赖和触发依赖更新的时机,并未讲到如何收集依赖

  • 浅析vue3响应式数据与watch属性

    是Vue3的 composition API中2个最重要的响应式API ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式) 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象 ref内部: 通过给value属性添加getter/setter来实现对数据的劫持 reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据 ref的数据操作: 在js中要.value, 在模板中不需要(内部解析

  • Vue3 响应式侦听与计算的实现

    响应式侦听和计算 有时我们需要依赖于其他状态的状态--在 Vue 中,这是用组件 计算属性 处理的,以直接创建计算值,我们可以使用 computed 方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象. 我们先来看看一个简单的例子,关于计算值的方式,同样我们在 src/TemplateM.vue 写下如下代码: <template> <div class="template-m-wrap"> count --->

  • Vue API中setup ref reactive函数使用教程

    目录 1.setup 2.ref函数 3.reactive函数 4.Vue3.0中的响应式原理 5.reactive对比ref 1.setup 组件中所用到的:数据.方法等等,均要配置在setup中 setup函数的两种返回值: 若返回一个对象,则对象中的属性.方法, 在模板中均可以直接使用.(重点注意) 若返回一个渲染函数:则可以自定义渲染内容. 注意: vue2可以读取vue3里面的数据 如果 vue2和vue3冲突,会用vue3的,所以 尽量不要与Vue2.x配置混用 Vue2.x配置(d

  • 一文详解Vue3响应式原理

    目录 回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式 实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新 直接通过下标修改数组,界面不会自动更新 但是

  • vue3 响应式对象如何实现方法的不同点

    目录 vue3响应式对象实现方法的不同点 Vue2和Vue3响应式原理对比 响应式原理实现逻辑 Vue2响应式原理简化 Vue2响应式原理弊端 Vue3响应式原理简化 vue3响应式对象实现方法的不同点 vue 响应式对象是利用 defindeProperty 实现,vue3 则是使用 Proxy 来实现响应式的. 二者,虽然都实现了 响应式的功能,但实现方式不一样,解决问题也有些不同. vue2 中,如果想要实现,数组元素的更新,则是需要 用到检测更新的方法 set 之类的,但 vue3的响应

  • 详解vue3 响应式的实现原理

    目录 核心设计思想 Vue.js 2.x 响应式 Vue.js 3.x 响应式 依赖收集:get 函数 派发通知:set 函数 总结 源码参考 核心设计思想 除了组件化,Vue.js 另一个核心设计思想就是响应式.它的本质是当数据变化后会自动执行某个函数,映射到组件的实现就是,当数据变化后,会自动触发组件的重新渲染.响应式是 Vue.js 组件化更新渲染的一个核心机制. Vue.js 2.x 响应式 我们先来回顾一下 Vue.js 2.x 响应式实现的部分: 它在内部通过 Object.defi

  • vue3响应式Object代理对象的读取示例详解

    目录 正文 读取属性 xx in obj for ... in 正文 从这一章开始,作者将更新深入的讲解响应式,尤其是vue3响应式的具体的实现.其实在前面一章,如果你仔细阅读,你是可以实现一个简单的响应式函数的,类似于@vue/reactive,当然那只是个demo,是个玩具,我能不能在生产环境上去使用的,它差了太多功能和边界条件. 现在,我们才是真正的深入@vue/reactive. 在vue中,obj.a是一个读取操作,但是仔细想来,读取这个操作很宽泛. obj.a // 访问一个属性 '

随机推荐