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配置（data、methos、computed…）中可以访问到setup中的属性、方法
  • 但在setup中不能访问到Vue2.x配置（data、methods、computed…）
  • 如果有重名, setup优先

setup不能是一个async函数，因为返回值不再是return的对象, promise,

模板看不到return对象中的属性

2.ref函数

可以定义一个响应式的数据

语法: const xxx = ref(initValue)

  • JS中操作时： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

注：

  • 接收的数据可以是：基本类型、也可以是对象类型
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的

3.reactive函数

一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

4.Vue3.0中的响应式原理

vue2.x的响应式

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截

Object.defineProperty(data, 'count', {
    get () {},
    set () {}
})

但是存在一些问题： 新增属性、删除属性, 界面不会更新； 直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

  • 通过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'

5.reactive对比ref

从定义数据角度对比：

  • ref用来定义：基本类型数据。
  • reactive用来定义：对象（或数组）类型数据。
  • ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象

从原理角度对比：

  • ref通过Object.defineProperty()的get与set来实现响应式
  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据

从使用角度对比：

  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
  • reactive定义的数据：操作数据与读取数据：均不需要.value

到此这篇关于Vue API中setup ref reactive函数使用教程的文章就介绍到这了,更多相关Vue setup ref reactive内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

  • Vue3中reactive与ref函数使用场景

    Vue3中reactive与ref函数使用场景

    目录 前言 简单了解 ref & reactive reactive ref reactive 能做的 ref 也能做,并且还是用 reactive 做的 ref 能做,但是 reactive 不能做 总结 前言 如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础类型的响应式,也可以创建引用类型的响应式.而对于引用类型,底层也是转换为 reacti

  • vue3 reactive函数用法实战教程

    目录 vue3 reactive函数用法 Vue3中reactive的理解 1.什么是reactive? 2.reactive注意点 错误示范 正确实例 arr正确实例 vue3 reactive函数用法 reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一个对象类型的变量user <template> <div> <p>{{

  • vue3.2 reactive函数问题小结

    reactive函数 上篇文章给大家介绍了Vue中的reactive函数操作代码,需要的朋友点击查看. reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式). 语法:const 代理对象= reactive(源对象) . 接收一个对象(或数组),返回一个代理对象(简称proxy对象). 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. 注意点1: 问题:reactive函数使用基本类型数据会报警告 注意点2: 总结:基础类型数据推荐

  • 详解Vue3中ref和reactive函数的使用

    目录 前言 ref 函数介绍 ref 函数使用 ref 函数处理基本数据类型 ref 函数处理复杂数据类型 ref 函数获取单个DOM元素 其他相关方法 reactive 函数介绍 reactive 函数使用 ref 函数处理对象 ref 函数处理数组 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理. ref 函数介绍 ref 作用

  • vue3中的reactive函数声明数组方式

    目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="ch

  • Vue中的reactive函数操作代码

    reactive函数 之前给大家介绍过vue3.2 reactive函数问题小结,喜欢的朋友点击查看. 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数,ref函数可以用基本类型也可以对象类型) 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是“深层次的”. 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. <tem

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

  • 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组合API中setup、 ref、reactive的使用大全

    vue3组合API中setup、 ref、reactive的使用大全

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te

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

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

  • Vue项目中常用的工具函数总结

    目录 前言 一.自定义聚焦指令 1.方式一 2.方式二 3.方式三 二.输入框防抖 1.需求 2.思路 3.代码实现 三.关键字高亮 1.需求 2.思路 3.代码演示 四.格式化Excel表格中存储的时间 1.需求 2.代码演示 总结 前言 本文记录了一些Vue项目中常用的工具函数,为了工具函数的统一管理,统一将这些函数放到src目录下的utils文件夹里 一.自定义聚焦指令 1.方式一 mouted周期,ref+querySelector获取到input标签,调用focus() 2.方式二 自

  • 在vue项目中 实现定义全局变量 全局函数操作

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块

  • vue项目中定义全局变量、函数的几种方法

    前言 在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等.这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解.简单总结分享一波,希望对你有所帮助. 定义全局变量 原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1.使用全局变量专用模块,挂载到main.js文件上面 全局变量模块Glo

  • vue.js中Vue-router 2.0基础实践教程

    前言 Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router就是vue官方提供的一个路由框架.本文主要介绍了Vue-router 2.0的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.基础用法: <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通

  • 实例讲解Vue.js中router传参

    实例讲解Vue.js中router传参

    Vue-router参数传递 为什么要在router中传递参数 设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息.那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息. vue-router 参数传递的方式 Parma传参 贴代码: /router/index.vue export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work

随机推荐