vue3.0提前了解系列一 ref和reactive
非常抱歉,昨天电脑玩废了,跑了大半个北京都没招,最终直接重装系统了。所以没来得及更新,抱歉。
话不多说进入今天的主题,搭建好项目后,我们来尝试composition语法,本来想讲一节大的语法,但是发现ref和reactive这个东西还挺多的,所以将就这两个API进行一波分享
老规矩先上完整代码片段
<template> <div class="test"> <h1>ref && reactive</h1> <h2> ref:{{ count }} </h2> <h2> reactive:{{ reactiveField }} </h2> <h2> reactive:{{ a[0].a }} </h2> <button @click="addRef"> addRef </button> <button @click="addReactive"> addReactive </button> <button @click="addA"> addA </button> </div> </template> <script> import { ref, reactive, toRefs} from 'vue' export default { setup () { const count = ref(0) const state = reactive({ reactiveField: 0, a: [ { a:1 } ] }) const addRef = () => { count.value++ } const addReactive = () =>{ state.reactiveField++ } const addA = () => { state.a[0].a++ } return { count, ...toRefs(state), addA, addRef, addReactive } } } </script> <style lang="scss" scoped> .test { color: red; } </style>
上面这么多,我只是在做同一件事情,双向数据绑定。vue一共提供了两种数据响应式监听,有点React Hooks的味道了。ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,就像我们改写后的示例代码一样,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值。
其实,除了 ref 函数,Vue3.0中还提供了另外一个可以创建响应式对象的函数,那就是 reactive 函数。下面就来说说为什么要提供两种API
1、是为了适应不同的写法的人群
有的人可能喜欢这种写法
const a = 1 const b = 2
也有的人可能喜欢这种写法
const field = { a : 1, b : 1 }
在这里不评价哪种合适,也没有什么准确的答案,两者的主要区别在于:一,我们使用了2个变量来存储值;而风格二则当作对象的属性存储。这两种风格的代码工作的都没问题,关键在于个人或团队的偏好:使用单独的变量还是使用对象封装,我觉得ref更偏向于第一类人,而reactive更偏向于第二类吧
2、ref只可以监听简单数据,reactive可以监听所有数据
ref这种写法简单,但也有弊端,经过尝试,我发现他只能监听一些如数字、字符串、布尔之类的简单数据而如果需要监听如上面代码一样的jsonArray我们在vue2种都会使用$set来进行变更,到了vue3我们终于可以愉快的使用reactive来实现了。
3、使用方式不一样
1、ref修改数据需要使用这样count.value=xxx的形式,而reactive只需要state.reactiveField=值这样来使用
2、第二点体现在template中引用时候为reactiveField,不需要state,也就是说我reactive对象里面字段是应该直接使用的
3、体现在reactive在return时候需要toRefs来转换成响应式对象
目前刚刚接触,我总结出的不同大概就这么些吧,我上面也提到了使用reactive需要用toRefs来包裹,那这个函数干嘛用的呢?
toRefs函数我是这么理解的 他能将reactive创建的响应式对象,转化成为普通的对象,并且这个对象上的每个节点,都是ref()类型的响应式数据。
今天分享大概就这么多吧,我还要去吧软件都安装回来,,,,下一次分享内容:composition生命周期、计算属性、watch属性的使用
原文地址:https://www.cnblogs.com/jinzhenzong/p/12778729.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 这就是你日日夜夜想要的docker!!!---------Docker四种网络模式解析
- C语言队列的基本操作
- 10款好用到爆的Vim插件,你知道几个?
- 这就是你日日夜夜想要的docker!!!---------Docker Compose容器编排理论+实操
- 模式检验库Meteva笔记:加载本地观测数据
- Go by Example 中文版: SHA1 哈希
- C语言中缀表达式转后缀表达式
- C语言逆波兰表达式计算(后缀表达式计算器)
- SpringBoot+Druid+Mybatis配置多数据源
- C语言共享栈
- C语言二叉树的基本操作
- 《GEO数据挖掘课程》配套练习题
- C语言中缀表达式计算器
- 安装 Rancher2.x 并部署工作负载
- Redis学习笔记 -- 1