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

 更新时间:2022年09月14日 10:07:47   作者:ciarlatani  
这篇文章主要介绍了Vue3中的ref为何要用.value进行值的调用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。 

相关文章

  • vue中常用的缩写方式

    vue中常用的缩写方式

    这篇文章主要介绍了vue中常用的缩写方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue使用Tinymce富文本自定义toolbar按钮的实践

    Vue使用Tinymce富文本自定义toolbar按钮的实践

    本文主要介绍了Vue使用Tinymce富文本自定义toolbar按钮,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Vue实现可复用轮播组件的方法

    Vue实现可复用轮播组件的方法

    这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue props default Array或是Object的正确写法说明

    vue props default Array或是Object的正确写法说明

    这篇文章主要介绍了vue props default Array或是Object的正确写法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue一个页面实现音乐播放器的示例

    vue一个页面实现音乐播放器的示例

    这篇文章主要介绍了vue一个页面实现音乐播放器的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 最简单的vue消息提示全局组件的方法

    最简单的vue消息提示全局组件的方法

    这篇文章主要介绍了最简单的vue消息提示全局组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue filter介绍及其使用详解

    Vue filter介绍及其使用详解

    本篇文章主要介绍了Vue filter介绍及其使用详解,VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理。一起跟随小编过来看看吧
    2017-10-10
  • 如何理解Vue的render函数的具体用法

    如何理解Vue的render函数的具体用法

    本篇文章主要介绍了如何理解Vue的render函数的具体用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue脚手架安装时遇到的无法安装问题详解

    Vue脚手架安装时遇到的无法安装问题详解

    开发中遇到bug是在正常不过了,而程序也基本都是bug堆里爬出来的,下面这篇文章主要给大家介绍了关于Vue脚手架安装时遇到的无法安装问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue.js移动端tab组件的封装实践实例

    vue.js移动端tab组件的封装实践实例

    本篇文章主要介绍了vue.js移动端tab的封装实践实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论

?


http://www.vxiaotou.com