Vue3中的ref为何要用.value进行值的调用呢

目录
  • Vue3中ref为何要用.value进行值的调用
  • Vue3 ref告别.value
    • Ref 语法糖在项目中的使用

Vue3中ref为何要用.value进行值的调用

在Vue2中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的：

<template>
  <div class="div">
    <todos :Obj="tos" :removeObj="removeObj"></todos>
  </div>
</template>
<script>
import search from '@/components/search'
import todos from '@/components/todos'
import all from '@/components/all'
export default {
  name: 'App',
  data () {
    return {
      tos: [
        { id: '001', value: '第一个', done: true },
        { id: '002', value: '第二个', done: true },
        { id: '003', value: '第三个', done: false },
        { id: '004', value: '第四个', done: true },
      ],
    }
  },
  computed: { },
  components: {
    search, todos, all,
  },
  methods: {
    removeObj (obj) {
      console.log(obj.id)
      this.tos = this.tos.filter(item => item.id !== obj.id)
      console.log(this.tos)
    },
  },
}
</script>
<style scoped>
// 样式
</style>

可以看出来这里定义的内容都在一个数组中进行，或者是一个函数，将要使用的数据返回出来，这里无论怎么进行操作处理，最终进行数据代理的时候得到的都是一个对象，Vue2中直接通过defineProperty进行处理，并绑定对应的监听事件进行响应式的处理。

而Vue3中，数据的定义可以是单独的，Vue可以让我们随时需要随时定义，这也就带来了另一个问题，我需要的一个数据可能不是对象

<script lang="ts" setup>
let str = ref('响应式字符串')
let obj = reactive({
  name: '张三',
  age: 10,
})
</script>

如果要定义的数据不是对象，还需要代理会怎么样？

在Vue2中数据的定义都在对象中统一进行，也就不会出现这种情况，如果一定要代理一个单独的数据呢？

Vue2中的数据代理通过defineProperty进行实现，也就是说我们要让defineProperty代理一个普通的数据，而不是一个对象，在defineProperty的MDN的文档中是这样定义的：

  • Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

通过这个可以明确看出，只能进行对象的代理，不能进行普通数据的代理，如果使用普通数据类型会直接报以下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1Lm0OSJ-1661407967498)(Vue3中的ref为何要用.value进行值的调用？.assets/image-20220825094409254.png)]

​ 在Vue3中数据代理可以使用单一数据了，并且也改进了数据代理的方式，使用的是Peoxy完成了数据代理，而MDN中对Proxy也进行了定义：

  • Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

可以看出，Proxy依然是为对象服务，而不是普通的内容，这样问题似乎就解决了

本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

可以看出，Proxy依然是为对象服务，而不是普通的内容，这样问题似乎就解决了

即使是Vue3中使用的Proxy的代理方式也不能进行普通数据的代理，所以当调用Ref的时候其实仍然创建了一个Proxy对象，并且Vue帮你给这个对象了一个value属性，属性值就是你定义的内容，改变的时候监视的改变依然是通过Proxy的数据劫持来进行响应式的处理，而模板中使用的时候Vue会默认调用对应的value属性，从而完成模板中的内容的直接调用

Vue3 ref告别.value

众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受.

let count = ref(1)
const add = () => {
  count.value += 1
}

后来vue3 提了一个 Ref Sugar 的 RFC，即 ref 语法糖，在ref前加上$，目前还处理实验阶段。

Ref 语法糖在项目中的使用

1. 该功能默认关闭，需要手动开启。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

2. 在.vue文件中使用

<template>
    <div>{{count}}</div>
    <button @click="add">click me</button>
</template>
<script setup>
let count = $ref(1)
const add = () => {
    count++
}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3如何定义变量及ref、reactive、toRefs特性说明

    目录 vue3定义变量及ref.reactive.toRefs特性 1.ref() 函数 2.reactive() 函数 3.toRefs() 函数 vue3定义变量 1.const 声明变量 2.reactive和ref 3.provide与inject vue3定义变量及ref.reactive.toRefs特性 1.ref() 函数 ref() 函数用来根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串.数字.boolean 等,返回值是一个对象,这个对象上只包含一个

  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在

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

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

  • Vue3如何理解ref toRef和toRefs的区别

    目录 一.基础 1.ref 2.toRef 3.toRefs 4.最佳的使用方式 二.深入 1.为什么需要ref 2.ref为什么需要.value 3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么? 一.基础 1.ref (1) 生成值类型的响应式数据, 通过 .value修改值 <template>

  • Vue3中的ref为何要用.value进行值的调用呢

    目录 Vue3中ref为何要用.value进行值的调用 Vue3 ref告别.value Ref 语法糖在项目中的使用 Vue3中ref为何要用.value进行值的调用 在Vue2中,所有的数据都通过一个Data进行统一的返回,并且在data中对某个组件要用的数据进行统一的管理,常见的使用形式是这样的: <template>   <div class="div">     <todos :Obj="tos" :removeObj=&qu

  • Vue3中的ref和reactive响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • vue3中使用ref语法糖的示例代码

    自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个.响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉 .value 以上是官方原话,大概就是新的语法糖,可以让我们更方便的使用ref,而不用每次都写.value,大概就是把这样的代码,简化成这样 <script setup lang="ts"> import { ref } from 'vue' const

  • vue3中的ref,toRef,toRefs三个的作用使用小结

    目录 1. ref的使用 2. toRef的使用 3. toRefs的使用 4.总结 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变化. import { ref } from "vue"; let obj = { name: "你好", age: 16 }; let msg = ref(obj.name); co

  • vue3中获取ref元素的几种方式总结

    目录 vue3获取ref元素方式 vue3中ref获取dom(包含for循环) 情况一:只是单纯的获取某个dom元素 情况二:在for循环中获取dom元素 情况三:获取ref中的ref vue3获取ref元素方式 1. 原生js获取dom元素: document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) 2. ref获取单个dom元素: <template

  • vue3中使用ref和emit来减少props的使用示例详解

    目录 前言 示例 示例1 示例2 前言 在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信.现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用ref 和 emit 来代替.缺点不太清楚,但是好处还是挺多的.下面结合实际的开发常见来举例. 示例 示例1 以弹窗组件来说,之前vue2时是通过props属性来控制弹窗的打开,比如下面这个新增弹窗退货的弹窗组件(大多数清空下,新增和修改一般是一个组件) <add-return-goods :visible

  • vue3中通过ref获取元素节点的实现

    vue3中通过ref获取元素节点的实现

    目录 通过ref获取元素节点 获取ref元素的几种方式小结 1. 原生js获取dom元素 2. ref获取单个dom元素 3. ref获取v-for循环中的dom元素 4. 在swiper中获取swiper的dom元素 通过ref获取元素节点 ref 在vue2中可以说简化js原生的document.getElementById("#id")操作 .当然在vue3中也一样 首先,给你想获取到的元素一个ref 属性 然后,再将这个ref对象创建出来,就可以访问到他的值 但是.这样在set

  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    目录 前言 1.回顾 Vue2 中的 ref 2.Vue3 中 ref 访问元素 3.v-for 中使用 ref 4.ref 绑定函数 5.组件上使用 ref 总结 前言 虽然在 Vue 中不提倡我们直接操作 DOM,毕竟 Vue 的理念是以数据驱动视图.但是在实际情况中,我们有很多需求都是需要直接操作 DOM 节点的,这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点:ref 属性.ref 属性是 Vue2 和 Vue3 中都有的,但是使用方式却不大一样,这也导致了很多从 Vue2

  • vue3如何使用ref获取元素

    vue3如何使用ref获取元素

    目录 vue3使用ref获取元素 vue3中ref的理解 1.什么是ref? 2.ref本质 3.ref注意点 4.ref获取元素 vue3使用ref获取元素 在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素 然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取 vue3需要借助生命周期方法,原因很简单,在setup执行时,template中的元素还没挂载到页面上,所

随机推荐