Vue3 ref为何用.value进行值调用
ciarlatani 人气:0Vue3中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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容