vue3 reactive使用(四)

1:reactive全家桶

rective直接赋值无效,会破坏proxy响应式代理

javascript 复制代码
const newList = reactive<string[]>([])
const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList = res  
    console.log('newList:', newList)  // dom没有变化,log会有变化
  }, 500)
}

变通

方案一
javascript 复制代码
const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList.push(...res)  // 使用push方法,和解构语法
    console.log('newList:', newList) // dom双向绑定成功,log也正常
  }, 500)
}
方案二

添加一个对象,把数组作为一个属性去解决

javascript 复制代码
let newList = reactive<{
  array: string[]
}>({
  array: [],
})

const newCreate = () => {
  setTimeout(() => {
    const res = ['生活', '升华', '生生不息']
    newList.array = res  // 直接赋值,可以生效
    console.log('newList:', newList)  // dom和log正常显示
  }, 500)
}
  1. readonly:只读
  2. shallowReactive和shallowRef类似,做浅层处理
相关推荐
ZJ_.6 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营10 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood36 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端37 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8542 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML(三)
前端·html