Vue3 ref构建响应式变量失效问题及解决
作者:周飞飞丶 发布时间:2023-07-02 16:33:49
vue3 ref构建响应式变量失效
问题描述
在Vue3中使用ref声明响应式变量,同时用函数对值进行变化,但是无法响应式改变值
<template>
<p>{{userName}}</p>
<button @click='change()'>change</button>
</template>
<script>
//引入定义响应式数据的函数
import {reactive} from 'vue';
import {ref} from "@vue/reactivity"; //!!!!!注意,这里有个坑,ref必须是引用自vue,而非@vue/reactivity
export default {
name: 'App',
//为Vue3的新特性提供统一入口,代码都会在这个函数中添加
//在beforecreated之前进行,因此无法访问this,亦即无法访问data和method
setup(){
//定义响应式数据:数据变化,模板中渲染会自动刷新
// const obj=reactive({
// userName:'jack',
// });
//只定义一个变量,可以使用ref将变量定义为响应式
let userName=ref('jack')
console.log(userName);
const change=()=> {
userName.value='rose' //注意修改的是ref对象的value属性,但是在template中使用的时候不需要再加value
console.log(userName);
}
return {userName,change}
},
}
</script>
解决方案
不知道为什么,当引用为
import {ref} from "@vue/reactivity"
时,就会出现不响应的情况,但是只需要改为
import {ref} from "vue"
vue3响应式API之ref和reactive
我们知道 ref 函数和 reactive 函数用于实现数据的响应性。但是开发中如何选择使用 ref 和 reactive 呢?来说说 ref 和 reactive 的区别。
回顾
在 Vue3 版本之前,响应数据在 data 函数中定义
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: "Hello, Vue!"
};
}
};
</script>
Vue2 会遍历 data 中的所有属性,使用 Object.defineProperty 把每个 property 全部转为 getter/setter,getter 用来收集依赖,setter 用来执行 notify,发布更新事件。
Vue2 对每个属性创建一个 Dep 对象,作为订阅发布模式的中间机构来收集依赖。Vue 追踪这些依赖,在其被访问和修改时通知变更。
Vue3
Vue3 中引入了 ref,reactive 来创建响应式数据:
<template>
<h1>{{ title }}</h1>
<h2>{{ data.author }}</h2>
<button @click=""changeTitle>修改title</button>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
export default {
setup() {
const title = ref("Hello, Vue 3!");
// 修改
function changeTitle(){
title.value == "Hello, Vue3!"
}
const data = reactive({
author: "青年码农",
age: "18"
});
return { title, data, changeTitle };
}
};
</script>
从上面的代码我们大概可以看出区别。ref 的作用就是将一个原始数据类型转换成一个响应式数据,原始数据类型共有 7 个,分别是:String、Number、BigInt、Boolean、Symbol、Undefined、Null。但是有个奇淫技巧,那就是 ref 也可以是对象。后面我们再说。reactive 的作用就是将一个对象转换成一个响应式对象。
ref:
ref 的作用就是将一个原始数据类型转换成一个带有响应式特性的数据类型。
const title = ref("Hello, Vue 3!");
ref 接收参数并将其包裹在一个带有 value 属性的对象中返回,然后可以使用该属性访问或更改响应式变量的值,比如上面的代码我们使用 count.value 去修改值,如下:
title.value = "Hello, Vue3!"
上面提到了 ref 也是可以接受对象类型
const data = ref({
author: "青年码农",
age: "18"
});
这种也是可以的,赋值的时候就会有点别扭了。
data.value.author = "nmgwap";
ref 响应式原理是依赖于 Object.defineProperty(),因此如果是对象,还是建议用 reactive。
reactive:
reactive 返回对象的响应式副本, 它将解包所有深层的 refs,同时维持 ref 的响应性。一般我们用来实现对象或者数组的响应性。
const data = reactive({
author: "青年码农",
age: "18"
});
修改和普通对象没区别,视图会实时更新
data.author = "nmgwap"
注意:
ref 是针对原始数据类型 和 reactive 是用于对象 这两个 API 都是为了给 JavaScript 普通的数据类型赋予响应式特性(reactivity)。
来源:https://blog.csdn.net/zhouflyfly/article/details/123534218
猜你喜欢
- 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于
- 导语贪吃蛇,大家应该都玩过。当初第一次接触贪吃蛇的时候 ,还是我爸的数字手机,考试成绩比较好,就会得到一些小奖励,玩手机游戏肯定也在其中首位
- 1.substring_index函数的语法及其用法(1)语法:substring_index(string,sep,num)即substr
- 网上搜索出来的结果多是下面答案:MySQL中,如何查询两个日期之间的记录,日期所在字段的类型为datetime(0000-00-00 00:
- 有些使用Z-Blog的用户询问我,怎么实现我的月光博客首页上这种自动图文混排的版式效果,今天我就详细介绍一下在Z-Blog中实现这种图文混排
- 当用到socket来进行网络程序开发时,大多数情况下会遇到中文字符的发送与接收,这时若对发送的字符串用默认的方式进行处理,则一般会得到一堆乱
- 前言问题需求:拥有两个文件夹,一个保存图片image,一个保存标签文件,要求把标签文件中的标注提取出来,并在图片中画出来相应的思路首先提出各
- 使用python画图,发现生成的图片在console里。不仅感觉很别扭,很多功能也没法实现(比如希望在一幅图里画两条曲线)。想像matlab
- PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统(ORDBMS),是以加州大学计算机系开发的POSTGRES,4
- 背景目前项目在移动端上,首推使用微信小程序。各项目的小程序访问数据有必要进行采集入库,方便后续做统计分析。虽然阿拉丁后台也提供了趋势分析等功
- 利用Keras构建完普通BP神经网络后,还要会构建CNNKeras中构建CNN的重要函数1、Conv2DConv2D用于在CNN中构建卷积层
- 前言笔者用的是mac开发,但是mac自带的php功能安装十分不方便,并且和线上的linux开发环境不一致。在没有用docker之前一直用va
- 有时候写爬虫的时候需要将浏览器中的headers信息复制到Pycharm中使用,但是复制过来的格式不是需要的键值格式,挨个手动敲键盘太累,毕
- 背景:不久前,设计实现了京东api的功能,发现如果换了其它快递再重新设计,岂不是会浪费太多的时间,所以选个第三方提供的快递API是最为合理的
- 使用场景公司内部使用Django作为后端服务框架的Web服务,当需要使用公司内部搭建的Ldap 或者 Windows 的AD服务器作为Web
- 一,封装封装是面向对象编程思想的重要特征之一。(一)什么是封装封装是一个抽象对象的过程,它容纳了对象的属性和行为实现细节,并以此对外提供公共
- 下列语句部分是Mssql语句,不可以在access中使用。 SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECL
- 下列代码都是以自己的项目实例讲述的,相关的文本内容很少,主要说明全在代码注释中自制图形验证码这里所说的图形验证码都是自制的图形,通过画布、画
- 目录初期操作分析参数分析salt、signPython代码运行效果初期操作打开有道翻译界面—F12—Network—在翻译框中输入'
- 一级行政区经纬度一级行政区(省级行政区):34个(23个省、5个自治区、4个直辖市、2个特别行政区)provinces = {