ref 对比 react
发表于|前端
1. 【ref 对比 reactive】
宏观角度看：
ref用来定义：基本类型数据、对象类型数据；
reactive用来定义：对象类型数据。
- 区别：
ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
- 使用原则：
- 若需要一个基本类型的响应式数据，必须使用
ref。 - 若需要一个响应式对象，层级不深，
ref、reactive都可以。 - 若需要一个响应式对象，且层级较深，推荐使用
reactive。
- 若需要一个基本类型的响应式数据，必须使用
文章作者: admin
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 ！
相关推荐
2021-07-10
JS基础
01：JS基础一、JavaScript 介绍 网页的组成：结构html，样式css，行为js html：超文本标记语言 css：层叠样式表 javascript：网页的脚本语言，用来描述网页的逻辑交互行为 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。 javascript的组成：ECMAScript，DOM，BOM ECMAScript：语法，规范，标准，定义了javascript的语法规范,描述了语言的基本语法和数据类型。 用来约束代码用什么样的格式书写，写什么，如何执行 DOM（Document Object Model）：文档对象模型，document，表示网页。 提供了网页的相关操作，标准化组织是W3C。 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。 如：增加元素，删除元素，改变元素位置等 BOM（Browser Object...
2021-07-10
分支
02：分支一、程序结构 顺序结构：默认的程序执行顺序，从上到下依次执行 分支结构：根据程序执行过程中可能产生的不同信息，决定执行不同的功能 配合分支语句 循环结构：根据执行条件重复执行某个功能 配合循环语句 二、分支语句 单分支：if(){} 根据条件决定执行或不执行 123456789101112// if(){}// if 语句名，关键字// () 执行条件// {} 执行条件符合时（true），要执行的代码console.log(1);if( true ){ console.log("hello");}console.log(2); 双分支：if(){}else{} 根据条件决定执行A或执行B 12345678910111213141516// if(){}else{} // if 语句名1，关键字 // () ...
2021-07-11
循环
03：循环一、循环结构介绍 循环结构存在的意义 计算1+2+3+……+1000的和 需要向计算机输入重复的命令 节省向计算机输入命令的时间，并没有提升性能 循环结构的三要素 创建（初始化）计数器 执行条件 计数器的改变 死循环：无法通过自身控制结束的循环 瞬间占用大量性能，造成计算机死机，程序崩溃 尽量避免产生死循环 但可以利用死循环解决无法确定重复执行次数的问题 二、循环语句 while 循环语句 1234567891011// while(){} // while 语句名，关键字 // () 执行条件 // {} 当执行条件为true时，要重复执行的语句// 打印10次hellovar i = 0;while(i < 10){ console.log("hello"); i++;} do...while 循环语句 123456789101112//...
2021-07-11
函数
04：函数一、函数的基本概念 函数的概念 函数，即功能。将实现了某个功能的代码，集中起来，通过函数语句进行封装，封装之后，可以选择直接执行或行为 的 代码段。 函数是一种数据类型：function 对象：数据的打包，函数：代码的打包 函数最大的意义：封装功能 函数的特点： 重复使用 选择使用 忽略细节 二、函数的使用 创建函数 声明式：使用function关键字创建函数 function 函数名(){} var 变量名 赋值式：配合变量，赋个函数值，将函数作为一个值或表达式使用 var 变量名 = function(){} 将函数作为值使用 123456789// 固定语法：// function 函数名(){} // function：声明关键字，用来声明函数 // 函数名 // ()：参数，函数的入口 // {}：函数体，内放置要封装的代码function fn(){ console.log("hello js");} 使用函数...
2021-07-11
对象
05：对象一、对象的概念和特点 对象：是一种复杂数据，是数据的打包形式 无序集合，object对象，花括号形式 以键值对的形式存在，键和值一一对应，使用冒号连接，键值对之间使用逗号隔开 键：key，要遵守变量的命名规则，一个对象中不允许出现重复的键 值：value，就是正常数据 使用场景：一般用来打包非同类但属于同一个个体的数据 一个班级中某一个学生的所有信息 姓名，性别，年龄，手机号，住址 有序集合，array对象，中括号形式 数据之间默认以索引的形式，进行标记，索引从0开始，到length-1 使用场景：一般用来打包同类数据 一个班级所有学生的姓名 姓名，姓名，姓名 特点： 提升了数据的查找速度 提升了数据的传输速度 本质：键值对 键和值成对出现，键和值使用冒号连接，键值对之间使用逗号隔开，使用花括号做包裹 {name:"admin",age:18,sex:"男"} 意义 存储数据 编程（面向对象编程） 二、对象的创建 字面量：var obj = {...
2021-07-12
数组
06：数组一、数组的概念和特点 数组是对象的一种，数组内的数据会按照顺序进行排列，是一种有序集合 数据按照顺序被标记，序号，也叫索引，从0开始 arr[0] 数组拥有length属性，用来表示自身有多少个数据 arr.length 因为索引的规律为从0开始递增，通过length属性标记数据总数，所以可以通过循环语句遍历数组 123for(var i=0; i<arr.length; i++){ console.log( arr[i] );} 二、数组的创建 字面量：var arr1 = [数据1, 数据2, 数据3, ...]; 创建函数：var arr2 = new Array(数据1, 数据2, 数据3, ...); 区别：当有且只有一个数值型数据时，字面量创建就是作为一个数据，构造函数创建会作为数组的长度，每个位置为undefined 三、数组的操作 索引+长度操作 原生操作，底层操作，所有数组操作功能的基础 查：arr[索引] 改：arr[索引] = "新值" 增：默认只能在数组的最后增加...
评论