需求：点击按钮更新页面数据

如果这么写，数据会更新，但是页面不会更新：
在这里插入图片描述

在这里插入图片描述

如果想让页面显示与数据同步，也就是响应式更新，要用ref函数

在这里插入图片描述
ref包裹后是个对象，是refImpl的实例对象
在这里插入图片描述
refImpl是 reference+implement译为引用实现。也就是说在vue3里面，如果想办字符串、整形这类基本数据类型变成响应式的，应该用ref函数包裹，也就是把该基本数据类型变成引用实现的实例对象。

在这里插入图片描述
在这里插入图片描述
可以看到ref包裹基本数据类型，也就是给该基本数据类型加上gettter，读取vue源码可知，在vue3中，也是通过defineobjectproperty实现基本数据类型的响应式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以读的使用，要使用xx.value去读。人家vue3底层是调用get。改的时候底层调用的是set

在这里插入图片描述
此时，点击按钮页面就会响应式了
在这里插入图片描述

提示：

模板template里面使用变量值不用.value，因为vue3在编译template的时候发现引用了ref对象会帮忙读取上去。

在这里插入图片描述

总结：

在这里插入图片描述

# html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue