Vue3技术2之ref函数、reactive函数、Vue3中的响应式原理

最新推荐文章于 2024-04-14 13:55:52 发布
最新推荐文章于 2024-04-14 13:55:52 发布
阅读量1k 收藏 1
点赞数
分类专栏： Vue3基础 前端 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/130084753
版权

Vue3技术2

ref函数

处理基本类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    //数据
    let name=ref('张三')
    let age=ref(18)

    function changeInfo(){
      console.log("name,age",name,age)
      name.value='李四'
      age.value=20
      console.log(name,age)
    }

    //返回一个对象（常用）
    return{
      name,
      age,
      changeInfo
    }
  }
}
</script>

请添加图片描述

处理对象类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作：{{job.type}}</h2>
  <h2>薪资：{{job.salary}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="changeObject">修改职位信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    //数据
    let name=ref('张三')
    let age=ref(18)
    let job=ref({
      type:'前端工程师',
      salary:'10k'
    })

    function changeInfo(){
      name.value='李四'
      age.value=20
      console.log("name",name)
    }

    function changeObject(){
      console.log("job",job.value)
      job.value.type='蓝翔技术工'
      job.value.salary='50k'
    }

    //返回一个对象（常用）
    return{
      name,
      age,
      job,
      changeInfo,
      changeObject
    }
  }
}
</script>

请添加图片描述
在这里插入图片描述

总结：ref函数

  1. 作用：定义一个响应式的数据
  2. 语法：const xxx=ref(initValue)
    （1）创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
    （2）JS中操作数据： xxx.value
    （3）模板中读取数据：不需要.value，直接：<div>{{xxx}}</div>
  3. 备注：
    （1）接收的数据可以是：基本类型、也可以是对象类型
    （2）基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
    （3）对象类型的数据：内部 “求助” 了Vue3.0中的一个新函数——reactive函数

reactive函数

只能修改对象类型

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作：{{job.type}}</h2>
  <h2>薪资：{{job.salary}}</h2>
  <h2>测试c：{{job.a.b.c}}</h2>
  <h2>爱好：{{hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="changeObject">修改职位信息</button>
  <button @click="changeHobby">修改第一个爱好</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    //数据
    let name=ref('张三')
    let age=ref(18)
    let job=reactive({
      type:'前端工程师',
      salary:'10k',
      a:{
        b:{
          c:1
        }
      }
    })
    let hobby=reactive(['吃饭','睡觉','打游戏'])

    function changeInfo(){
      name.value='李四'
      age.value=20
      console.log("name",name)
    }

    function changeObject(){
      console.log("job",job)
      job.type="蓝翔技术工"
      job.salary="20k"
      job.a.b.c=666
    }

    function changeHobby(){
      hobby[0]="唱歌"
    }


    //返回一个对象（常用）
    return{
      name,
      age,
      job,
      hobby,
      changeInfo,
      changeObject,
      changeHobby
    }
  }
}
</script>

请添加图片描述

完善代码

App.vue

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作：{{person.job.type}}</h2>
  <h2>薪资：{{person.job.salary}}</h2>
  <h2>测试c：{{person.job.a.b.c}}</h2>
  <h2>爱好：{{person.job.hobby}}</h2>
  <button @click="changePerson">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    //数据
    let person=reactive({
      name:"张三",
      age:18,
      job:{
        type:'前端工程师',
        salary:'10k',
        a:{
          b:{
            c:1
          }
        },
        hobby:['吃饭','唱歌','看电影']
      }

    })

    function changePerson(){
      person.name="李四"
      person.age=25
      person.job.type='UI设计师'
      person.job.salary='60k'
      person.job.a.b.c=666
      person.job.hobby[0]="跳舞"
    }


    //返回一个对象（常用）
    return{
      person,
      changePerson
    }
  }
}
</script>

请添加图片描述

总结：reactive函数

  1. 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
  2. 语法：const 代理对象=reactive(源对象)接收一个对象（数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
  3. reactive定义的响应式数据是“深层次的”
  4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

Vue3.0中的响应式原理

回顾Vue2的响应式原理

  1. 新增数据、删除数据、直接通过下标修改数组，界面不会自动更新，但是数据确实被修改了
  • App.vue
<template>
  <div class="bg">
    <h1>我是Vue2写的效果</h1>
    <h2 v-show="person.name">姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2 v-show="person.sex">性别：{{person.sex}}</h2>
    <h2>爱好：{{person.hobby}}</h2>
    <button @click="addSex">新增一个sex属性</button>
    <button @click="deleteName">删除一个name属性</button>
    <button @click="changeHobby">修改第一个爱好</button>
  </div>

</template>

<script>
export default {
  name: "App",
  data(){
    return{
      person:{
        name:"张三",
        age:25,
        hobby:["学习","读书","看报"]
      }
    }
  },
  methods:{
    addSex(){
      console.log(this.person.sex)
      this.person.sex="女"
      console.log(this.person.sex)
      console.log("---------------------")
    },
    deleteName(){
      console.log(this.person.name)
      delete this.person.name
      console.log(this.person.name)
      console.log("---------------------")
    },
    changeHobby(){
      console.log(this.person.hobby)
      this.person.hobby[0]="唱歌"
      console.log(this.person.hobby)
      console.log("---------------------")

    }
  }
}
</script>

<style>
</style>

请添加图片描述

  1. 必须使用set方法或者数组原始方法修改，界面才会有响应
  • App.vue
<template>
  <div class="bg">
    <h1>我是Vue2写的效果</h1>
    <h2 v-show="person.name">姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2 v-show="person.sex">性别：{{person.sex}}</h2>
    <h2>爱好：{{person.hobby}}</h2>
    <button @click="addSex">新增一个sex属性</button>
    <button @click="deleteName">删除一个name属性</button>
    <button @click="changeHobby">修改第一个爱好</button>
  </div>

</template>

<script>
import Vue from 'vue'
export default {
  name: "App",
  data(){
    return{
      person:{
        name:"张三",
        age:25,
        hobby:["学习","读书","看报"]
      }
    }
  },
  methods:{
    addSex(){
      /*console.log(this.person.sex)
      this.person.sex="女"
      console.log(this.person.sex)
      console.log("---------------------")*/
      //界面有响应的
      this.$set(this.person,'sex','女')
      // Vue.set(this.person,'sex','女')
    },
    deleteName(){
      /*console.log(this.person.name)
      delete this.person.name
      console.log(this.person.name)
      console.log("---------------------")*/
      //界面有响应的
      this.$delete(this.person,'name')
      // Vue.delete(this.person,'name')
    },
    changeHobby(){
      /*console.log(this.person.hobby)
      this.person.hobby[0]="唱歌"
      console.log(this.person.hobby)
      console.log("---------------------")*/
      //界面有响应的
      // this.$set(this.person.hobby,0,'唱歌')
      this.person.hobby.splice(0,1,'唱歌')
    }
  }
}
</script>

<style>
</style>

请添加图片描述

Vue3响应式原理

模拟Vue2中实现响应式

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        age:18
    }

    //模拟Vue2中实现响应式
    let p={}
    Object.defineProperty(p,'name',{
        configurable:true,  //可配置的，可以删除属性
        get(){  //有人读取name时调用
            return person.name
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了name属性，我发现了，我要去更新界面!")
            person.name=value
        }
    })
    Object.defineProperty(p,'age',{
        get(){  //有人读取age时调用
            return person.age
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了age属性，我发现了，我要去更新界面!")
            person.age=value
        }
    })
</script>
</body>
</html>

请添加图片描述

添加与删除一个属性都捕获不到

模拟Vue3中实现响应式—Proxy

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        age:18
    }

    //模拟Vue2中实现响应式
   // #region   解决vsCode中折叠后但又打开的情况
   /* let p={}
    Object.defineProperty(p,'name',{
        configurable:true,  //可配置的，可以删除属性
        get(){  //有人读取name时调用
            return person.name
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了name属性，我发现了，我要去更新界面!")
            person.name=value
        }
    })
    Object.defineProperty(p,'age',{
        get(){  //有人读取age时调用
            return person.age
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了age属性，我发现了，我要去更新界面!")
            person.age=value
        }
    })*/
    // #endregion

    //模拟Vue3中实现响应式
    const p=new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            return target[propName]
        },
        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
            return target[propName]=value
        },
        //有人删除p的某个属性时调用
        deleteProperty(target, propName) {
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
            return delete target[propName]
        }
    })




</script>
</body>
</html>

请添加图片描述

模拟Vue3中实现响应式—Reflect

通过Reflect.defineProperty去操作
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        age:18
    }

    //模拟Vue2中实现响应式
   // #region   解决vsCode中折叠后但又打开的情况
   /* let p={}
    Object.defineProperty(p,'name',{
        configurable:true,  //可配置的，可以删除属性
        get(){  //有人读取name时调用
            return person.name
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了name属性，我发现了，我要去更新界面!")
            person.name=value
        }
    })
    Object.defineProperty(p,'age',{
        get(){  //有人读取age时调用
            return person.age
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了age属性，我发现了，我要去更新界面!")
            person.age=value
        }
    })*/
    // #endregion

    //模拟Vue3中实现响应式
    /*const p=new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            return target[propName]
        },
        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
            return target[propName]=value
        },
        //有人删除p的某个属性时调用
        deleteProperty(target, propName) {
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
            return delete target[propName]
        }
    })*/


    obj={a:1,b:2}
    //通过Reflect.defineProperty去操作
    const x1=Reflect.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2=Reflect.defineProperty(obj,'c',{
        get(){
            return 100
        }
    })
    if(x2){
        console.log("某某某操作成功了！")
    }else{
        console.log("某某某操作失败了！")
    }



</script>
</body>
</html>

在这里插入图片描述

通过Object.defineProperty去操作
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        age:18
    }

    //模拟Vue2中实现响应式
   // #region   解决vsCode中折叠后但又打开的情况
   /* let p={}
    Object.defineProperty(p,'name',{
        configurable:true,  //可配置的，可以删除属性
        get(){  //有人读取name时调用
            return person.name
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了name属性，我发现了，我要去更新界面!")
            person.name=value
        }
    })
    Object.defineProperty(p,'age',{
        get(){  //有人读取age时调用
            return person.age
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了age属性，我发现了，我要去更新界面!")
            person.age=value
        }
    })*/
    // #endregion

    //模拟Vue3中实现响应式
    /*const p=new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            return target[propName]
        },
        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
            return target[propName]=value
        },
        //有人删除p的某个属性时调用
        deleteProperty(target, propName) {
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
            return delete target[propName]
        }
    })*/


    obj={a:1,b:2}
    //通过Object.defineProperty去操作
    const x1=Object.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2=Object.defineProperty(obj,'c',{
        get(){
            return 100
        }
    })

    //通过Reflect.defineProperty去操作
    /*const x1=Reflect.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2=Reflect.defineProperty(obj,'c',{
        get(){
            return 100
        }
    })
    if(x2){
        console.log("某某某操作成功了！")
    }else{
        console.log("某某某操作失败了！")
    }*/



</script>
</body>
</html>

在这里插入图片描述

使用Reflect改善Vue3的响应式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3的响应式原理</title>
</head>
<body>
<script>
    let person={
        name:"张三",
        age:18
    }

    //模拟Vue2中实现响应式
   // #region   解决vsCode中折叠后但又打开的情况
   /* let p={}
    Object.defineProperty(p,'name',{
        configurable:true,  //可配置的，可以删除属性
        get(){  //有人读取name时调用
            return person.name
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了name属性，我发现了，我要去更新界面!")
            person.name=value
        }
    })
    Object.defineProperty(p,'age',{
        get(){  //有人读取age时调用
            return person.age
        },
        set(value){   //有人修改name时调用
            console.log("有人修改了age属性，我发现了，我要去更新界面!")
            person.age=value
        }
    })*/
    // #endregion

    //模拟Vue3中实现响应式
    const p=new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            // return target[propName]
            return Reflect.get(target,propName)
        },
        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
            // return target[propName]=value
            return Reflect.set(target,propName,value)
        },
        //有人删除p的某个属性时调用
        deleteProperty(target, propName) {
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
            // return delete target[propName]
            return Reflect.deleteProperty(target,propName)
        }
    })


    /*obj={a:1,b:2}
    //通过Object.defineProperty去操作
    const x1=Object.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2=Object.defineProperty(obj,'c',{
        get(){
            return 100
        }
    })
*/
    //通过Reflect.defineProperty去操作
    /*const x1=Reflect.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2=Reflect.defineProperty(obj,'c',{
        get(){
            return 100
        }
    })
    if(x2){
        console.log("某某某操作成功了！")
    }else{
        console.log("某某某操作失败了！")
    }*/



</script>
</body>
</html>

在这里插入图片描述

总结

vue2.x的响应式

  1. 实现原理
    （1）对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
    （2）数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
Object.defineProperty(data,'count',{
	get(){},
	set(){}![请添加图片描述](https://img-blog.csdnimg.cn/6b2ee7c1953e4b958834375f9718e4ec.gif)

})
  1. 存在问题
    （1）新增属性、删除属性，界面不会更新
    （2）直接通过下标修改数组，界面不会自动更新

vue3的响应式

  1. 实现原理
    （1）通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
    （2）通过Reflect（反射）：对源对象的属性进行操作
    （3）MDN文档中描述的Proxy与Reflect：
new Proxy(data,{
	//拦截读取属性值
	get(target,prop){
		return Reflect.get(target,prop)
	},
	//拦截设置属性值或添加新属性
	set(target,prop,value){
		return Reflect.set(target,prop,value)
	},
	//拦截删除属性
	deleteProperty(target,prop){
		return Reflect.deleteProperty(target,prop)
	}
})

proxy.name="tom"

reactive对比ref

  1. 从定义数据角度对比
    （1）ref用来定义：基本类型数据
    （2）reactive用来定义：对象（或数组）类型数据
    （3）备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
  2. 从原理角度对比
    （1）ref通过Object.defineProperty()
    的get与set来实现响应式（数据劫持）
  3. 从使用角度对比：
    （1）ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
    （2）reactive定义的数据：操作数据与读取数据：均不需要.value
VillanelleS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 3 中的 toRefs：响应式数据的关键函数
07-27
Vue 3 中的 toRefs 在处理响应式数据时非常有用，它允许我们在模板或计算属性中访问响应式对象的属性，并保持属性的响应式特性。同时，结合 ref、reactive 和 toRefs 的使用，我们可以更灵活地管理组件的状态和响应...
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
vue3的ref,reactive的使用和原理解析
weixin_42974827的博客
09-25 1万+
vue3新增了ref，reactive两个api用于响应式数据，Ref 系列毫无疑问是使用频率最高的 api 之一,响应式意味着数据变动，页面局部自动更新。
vue3-ref和reactive
qq_52135740的博客
08-02 597
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
总结Vue3的11种传参通信方式，非常齐全
最新发布
talentT的博客
04-14 2933
vue3出来很久了，也非常成熟了，平时项目只管用也没多想，直至今天想写一编关于vue3传参，然后我总结一下竟然总结出来11种方式那么多，11种我分别列了出来，由于vue3有两种setup写法，下面我将用最简洁的代码例子针对主流的父传子子传父兄弟组件传参（mitt）$attrsrefsv-model路由传参vuex传参pinia传参浏览器缓存空闲想总结一下，纯人工肝了一天终于写好了，我尽量用最简洁易懂的方式写了，如果有什么写错了或者不够明细都欢迎大家指出。
谈谈Vue3中的ref和reactive
热门推荐
长发程序员的博客
11-06 1万+
ref和reactive是Vue3中用来实现数据响应式的API 一般情况下，定义基本数据类型，定义引用数据类型 ref本质上是reactive的再封装reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的来实现数据响应式，相对于Vue2的，具有能监听增删操作，能监听对象属性的变化等优点使用reactive定义对象数据类型举例
vue3 ref响应式原理
gw20192019的博客
11-28 1306
vue3响应式 relative（）实现响应式原理是用proxy拦截对象中属性的添加 读写 删除 在用reflect反射 对被代理的源对象的属性进行操作（数据劫持） ref原理是通过object.defineproperty的get和set实现响应式（数据劫持） Ref中的数据会被转换成一个ref引用对象，引用对象里面有value 在模板里会自动解析ref引用对象的value，所以在模板里不用写点value，Ref会把不同的数据类型转换为不同的对象，比如对象就会转换成proxy对象。 其原
vue3-响应式函数
唯见青山不见君
11-22 876
vue3-响应式函数
# vue3 ref 和 reactive 函数.doc
07-11
在 Vue3 中，Ref 和 Reactive 函数是两个非常重要的概念，它们都是用于实现响应式数据的关键技术。本文将从基本概念开始，详细介绍 Ref 函数的用法、Reactive 函数的应用，以及它们在实际开发中的使用场景。 一、...
vue3自己的学习笔记
01-25
toRef 和 toRefs 是 Vue 3 中两个特殊的函数，toRef 函数可以将响应式对象中的某个属性单独提供给外部使用，而 toRefs 函数可以将响应式对象转换为普通对象，其中每个属性都是原始对象相应属性的 ref。 ...
vue3相关.docx
09-27
* Vue2 的响应式原理 + 对象类型：通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持） + 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹） + 存在问题：...
vue3 中的 ref、reactive和v3响应式原理
shmilynn_的博客
01-07 1057
vue3提升学习
【Vue3响应式】ref、reactive，以及toRefs 函数
正在解锁骑着骆驼去南极的世界
04-01 4901
Vue3中的ref和reactive都是响应式数据的实现方式。在Vue3中，我们可以使用ref来将基本数据类型包装为一个响应式对象，使用reactive将对象包装为响应式对象。本文将介绍这两种响应式数据的实现方式以及它们之间的区别。 toRefs 函数可以将一个响应式对象转换为一组响应式属性。这个函数可以用于将父组件中的响应式对象传递给子组件，并在子组件中以单独的响应式属性的形式使用它们。
vue3响应式原理之Ref
SK_study的博客
06-01 8022
二. 实现 1. ref 函数 我们调用的ref函数，传进来一个 val 值，调用 函数，我们来看下该函数的实现 2. createRef 函数 该函数里边做了一个判断，该值如果已经是一个,则直接返回，否则创建一个 Ref 实例，让我们看下 类的实现 3. RefImpl 类的实现 定义了四个变量 _value: 用来保存加工后实现响应化的值 _rawValue: 用来保存当前未经加工过的值 dep: 用来收集依赖，是一个 类型 _v_isRef: 用来标识该值是否经过 ref 加工 在中，我们为 和
Vue3 源码阅读（6）：响应式系统 —— ref
f18855666661的博客
08-14 1993
ref API 的官方文档点击这里，官网中需要注意的点是：如果参数是一个对象的话，ref 的内部会使用 reactive 对参数进行一层转化封装，若要避免这种深层次的转换，请使用shallowRef()来替代 ref。
手撸vue3核心源码——响应式原理(ref)
qq_63204040的博客
07-22 521
手撸vue3核心源码——响应式原理(ref)
拥抱Vue3 (三) ref 与 reactive以及响应式原理
黑猫几绛的博客
10-14 1850
一、ref 包装基本数据类型数据 在第二篇文章中举例的时候，我们创建了非响应式的数据，在控制台中查看数据发现并不存在get与set方法。在查了文档后发现，Vue3中需要使用一个新的方法 `ref ` 去让数据变成响应式的。 <template> <div class="main"> <h1>我叫{{name}}，我今年{{age}}了</h1> <button @click="changeInfo">修改<...
vue3中的reactive、ref、toRef和toRefs
九仞山的专栏
06-10 1892
详细介绍了vue3中的reactive、ref、toRef和toRefs的使用方法和注意事项
【详细】reactive函数与ref函数
liuxin1008的博客
01-06 484
reactive函数与ref函数的区别与选择
vue3中的ref函数和reactive
03-16
好的，我可以用中文回答你的问题。 在Vue 3中，`ref`和`reactive`都是用于在Vue组件中创建响应式数据的函数。 `ref`函数接受一个参数，并返回一个响应式的对象。这个参数可以是任何JavaScript类型，包括对象、数组、字符串、数字等等。`ref`函数返回的响应式对象包装了传入的参数，使得该参数的任何变化都会被Vue自动检测到并触发重新渲染视图。要访问`ref`对象的值，需要使用`.value`属性。 例如： ``` import { ref } from 'vue' const count = ref(0) console.log(count.value) // 输出0 count.value++ // 修改count的值 console.log(count.value) // 输出1 ``` `reactive`函数也接受一个参数，但这个参数必须是一个普通的JavaScript对象。`reactive`函数会递归地将这个对象的所有属性转换成响应式的对象，从而实现响应式数据的功能。要访问`reactive`对象的值，可以直接使用对象属性访问方式。 例如： ``` import { reactive } from 'vue' const state = reactive({ count: 0 }) console.log(state.count) // 输出0 state.count++ // 修改state对象中count属性的值 console.log(state.count) // 输出1 ``` 总的来说，`ref`和`reactive`都是Vue 3中非常有用的响应式数据函数，用于实现组件中的数据绑定和响应式渲染。如果你只需要创建单一的响应式值，使用`ref`更为简单；如果你需要创建一个包含多个属性的响应式对象，使用`reactive`更为方便。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值