0
点赞
收藏
分享

微信扫一扫

【Python小项目之Tkinter应用】随机点名/抽奖工具大优化:新增查看历史记录窗口!语音播报功能!修复预览文件按钮等之前版本的bug!

九点韶留学 2023-09-21 阅读 35

1:reactive全家桶

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

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

变通

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

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

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类似,做浅层处理
举报
0 条评论