1.什么是ref?

  1. 1.refreactive-样
  2. 也是用来实现响应式数据的方法
  3. 由于reactive必须传递一个对象,
  4. 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦
  5. 所以Vue3就给我们提供了ref方法,实现对简单值的监听
  6. 2.ref本质:
  7. ref底层的本质其实还是reactive
  8. 系统会自动根据我们给ref传入的值将它转换成
  9. ref(xx) -> reactive({value:xx})
  10. 3.ref注意点:
  11. Vuehtml中使用ref的值不用通过value获取
  12. JS中使用ref的值必须通过value获取

2.在Vue的html中使用ref的值不用通过value获取

  1. <template>
  2. <div>
  3. <div>
  4. <!--在Vue的html中使用ref的值不用通过value获取 -->
  5. <li>{{state}}</li>
  6. <button @click="func1">按钮</button>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import {ref} from 'vue'
  12. export default {
  13. name: 'App',
  14. setup(){
  15. let state=ref(100);
  16. function func1(){
  17. <!-- JS中使用ref的值必须通过value获取 -->
  18. state.value=200
  19. }
  20. return {state ,func1}
  21. },
  22. }
  23. </script>

3. ref和reactive区别:

  1. 区别一:
  2. 如果在template里使用的是ref类型的数据,那么Vue会自动帮我们添加.value
  3. 如果在template里使用的是reactive类型的数据,那么Vue不会自动帮我们添加.value
  4. 区别二:
  5. ref函数只能够去监听简单类型的数据变化,不能够去监听,复杂类型的变化(数组、对象)
  6. reactive函数传递的参数必须是对象(json/arr)
  7. 区别三
  8. __v_isRef ref中拥有的属性
  9. Vue底层就是根据这个来进判断是否需要在template添加.value的哈
  10. reactive 是没有__v_isRef这个属性的,所以不会帮我们添加.value

4.ref类型中有__v_isRef 这个属性

  1. <template>
  2. <div>
  3. <div>
  4. <li>{{state}}</li>
  5. <button @click="func1">按钮</button>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import {ref} from 'vue'
  11. export default {
  12. name: 'App',
  13. setup(){
  14. let state=ref(100)
  15. function func1(){
  16. console.log( 'stateObj下的属性',state );// 有 __v_isRef 这个属性
  17. state.value=200;
  18. }
  19. return {state,func1}
  20. },
  21. }
  22. </script>

5. isRef,isReactive 类型判断

  1. isRef是用来检测ref类型的,如果是返回的是true,否者返回false
  2. isReactive是用来检测reactive类型的,如果是返回的是true,否者返回false
  1. <template>
  2. <div>
  3. <div>
  4. <li>{{state}}</li>
  5. <button @click="func1">按钮</button>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import {ref} from 'vue'
  11. // 引入,你也可以在上一句中直接导入
  12. import {isRef,isReactive} from 'vue'
  13. export default {
  14. name: 'App',
  15. setup(){
  16. let state=ref(100)
  17. function func1(){
  18. //是否是ref类型的
  19. console.log(isRef(state));//true
  20. //是否是reactive类型的
  21. console.log(isReactive(state));//false
  22. state.value=200;
  23. }
  24. return {state,func1}
  25. },
  26. }
  27. </script>

认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断的更多相关文章

  1. 第三十九篇:Vue3 watch(ref和reactive的监视)

    好家伙, 1.vue2中的watch是调用配置项,(只能写一个) vue3中的watch是一个函数(可以写很多个) 2.watch一些用法: 这里是定义的数据 set up(){ let sum =r ...

  2. 熬夜讲解vue3组合API中setup、 ref、reactive的用法

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变 ...

  3. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  4. # vue3 ref 和 reactive 函数

    vue3 ref 和 reactive 函数 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并 ...

  5. Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

    1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...

  6. C#中ref和out的区别浅析

    这篇文章主要介绍了C#中ref和out的区别浅析,当一个方法需要返回多个值的时候,就需要用到ref和out,那么这两个方法区别在哪儿呢,需要的朋友可以参考下   在C#中通过使用方法来获取返回值时,通 ...

  7. [转] C#中out和ref之间的区别

    gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...

  8. Spring中<ref local=""/>与<ref bean=""/>区别

    小 Spring中<ref local=""/>与<ref bean=""/>区别 (2011-03-19 19:21:58) 转载▼ ...

  9. Spring配置文件中使用ref local与ref bean的区别

    Spring配置文件中使用ref local与ref bean的区别.在ApplicationResources.properties文件中,使用<ref bean>与<ref lo ...

随机推荐

  1. C#-web Post/Get

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  2. SQL注入注释符(#、-- 、/**/)使用条件及其他注释方式的探索

    以MySQL为例,首先我们知道mysql注释符有#.-- (后面有空格)./**/三种,在SQL注入中经常用到,但是不一定都适用.笔者在sqlilabs通关过程中就遇到不同场景用的注释符不同,这让我很 ...

  3. Java常用类详解

    目录 1. String类 1.1 String的特性 1.2 String字面量赋值的内存理解 1.3 String new方式赋值的内存理解 1.4 String 拼接字面量和变量的方式赋值 1. ...

  4. Codeforces Round #692 (Div. 2, based on Technocup 2021 Elimination Round 3)

    A.In-game Chat 题目:就是从后面数连着的'('的个数是不是严格比剩下的字符多 思路:水题,直接从后往前遍历即可 代码: #include<iostream> #include ...

  5. 再谈vbo

    我们之前都是通过glNamedBufferData初始化buffer object,初始化的意思是为buffer object开辟显存空间,并填充数据: GLfloat position[] = { ...

  6. 使用ldap客户端创建zimbra ldap用户的格式

    cat << EOF | ldapadd -x -W -H ldap://:389 -D "uid=zimbra,cn=admins,cn=zimbra" dn: ui ...

  7. Bash技巧:使用 set 内置命令帮助调试 shell 脚本

    Bash技巧:使用 set 内置命令帮助调试 shell 脚本 霜鱼片发布于 2020-02-03   在 bash 中,可以使用 set 内置命令设置和查看 shell 的属性.这些属性会影响 sh ...

  8. Ubuntu 16.04 Bridge配置

    Ubuntu 16.04 Bridge配置 一.安装网桥拓展包 bridge-utils root@ubuntu:~# apt-get install bridge-utils 二.创建网桥设备 // ...

  9. 【山外笔记-SVN命令】svn命令详解

    本文打印版文件下载地址 [山外笔记-SVN命令]svn命令详解-打印版.pdf 一.命令简介 svn命令用于Subversion命令行客户端,执行svn相关的操作. 二.命令语法 1.svn语法: ( ...

  10. mysql不停库恢复

    环境搭建:yum -y install mysql-co*servervim /etc/my.cnf############server-id=1log-bin=binbinlog-format=RO ...