uniapp中的使用更优雅写法

一、对 uniapp 使用 setData 的思考

我最近在重写我们的小程序，使用 uniapp写的百度小程序，写出了这样一段代码

this.loadNextWaterFall({
    ...this.basePageInfo,
    page:page+1
})
setData.call(this,{
    basePageInfo:{
        ...this.basePageInfo,
        page:page+1
    },
})

• 这里的 setData 是一个函数，引入之后，就能够想微信小程序同样的设置值，后来我觉得，这很不优雅。
• 想一想，React 和 Vue 是目前的主流框架，微信小程序借鉴了 React 和 Vue，出了 setData。uniapp 使用的是 Vue，我完全可以用 Vue 的语法习惯啊，为什么还要重新造一个 API 去借鉴微信小程序呢？

所以，这段代码代码可以这样改写，两行搞定

this.basePageInfo.page += 1
this.loadNextWaterFall(this.basePageInfo)

在 Vue 中，改变 data 中变量的值后

• 在 JS 中，它是立即变化，并且立即生效的
• 在 UI 渲染中，它是异步渲染的

这是一个小知识点

对比 React 给 data 中变量重新赋值

• 变量的老值一直还是那个值，新值异步后再赋值上去（和Vue不同，不是立即生效！）

二、代码修改记录

在此记录一下，修改前后的代码比较：

// 改写前
this.loadNewWaterFall({
    ...this.basePageInfo,
    level2:id,
    level3:0,
    sortId: '',
    ratioId: -1
})
setData.call(this,{
    navSwitch:{
        ...this.navSwitch,
        mainTitleId:id,
        minorTitleIdList:[0,'',-1]
    },
    basePageInfo:{
        ...this.basePageInfo,
        level2:id,
        level3:0,
        sortId: '',
        ratioId: -1
    }
})
//**********************************************************************************
// 改写后
this.basePageInfo.level2 = id
this.basePageInfo.level3 = 0
this.basePageInfo.sortId = ''
this.basePageInfo.ratioId = -1
this.loadNewWaterFall(this.basePageInfo)
this.navSwitch.mainTitleId = id
this.navSwitch.minorTitleIdList = [0,'',-1]

// 改写前
this.loadNewWaterFall({
    ...this.basePageInfo,
    level3:idList[0],
    sortId:idList[1],
    ratioId:idList[2]
})
setData.call(this,{
    'navSwitch.minorTitleIdList':idList,
    basePageInfo:{
        ...this.basePageInfo,
        level3:idList[0],
        sortId:idList[1],
        ratioId:idList[2]
    }
})
//**********************************************************************************
// 改写后
this.basePageInfo.level3 = idList[0]
this.basePageInfo.sortId = idList[1]
this.basePageInfo.ratioId = idList[2]
this.navSwitch.minorTitleIdList = idList
this.loadNewWaterFall(this.basePageInfo)

// 改写前
if(keyword !== this.basePageInfo.keyword){
    this.loadNewWaterFall({
        ...this.basePageInfo,
        keyword
    })
}
setData.call(this,{
    navSearch:{
        ...this.navSearch,
        contentShow:false,
        keyword
    },
})
//**********************************************************************************
// 改写后
if(keyword !== this.basePageInfo.keyword){
    this.basePageInfo.keyword = keyword
    this.navSearch.keyword = keyword
    this.loadNewWaterFall(this.basePageInfo)
}
this.navSearch.contentShow = false

// 改写前
if(this.basePageInfo.keyword){
    this.loadNewWaterFall({
        ...this.basePageInfo,
        keyword:''
    })
}
setData.call(this,{
    navSearch:{
        ...this.navSearch,
        keyword:'',
        contentShow:false
    },
    basePageInfo:{
        ...this.basePageInfo,
        keyword:''
    }
})
//**********************************************************************************
// 改写后
if(this.basePageInfo.keyword){
    this.basePageInfo.keyword = ''
    this.loadNewWaterFall(this.basePageInfo)
}
this.navSearch.keyword = ''
this.navSearch.contentShow = false

// 改写前
if(keyword !== this.basePageInfo.keyword){
    this.loadNewWaterFall({
        ...this.basePageInfo,
        keyword
    })
}
setData.call(this,{
    navSearch:{
        ...this.navSearch,
        contentShow:false,
        keyword
    },
    basePageInfo: {
        ...this.basePageInfo,
        keyword,
    }
})
//**********************************************************************************
// 改写后
if(keyword !== this.basePageInfo.keyword){
    this.basePageInfo.keyword = keyword
    this.loadNewWaterFall(this.basePageInfo)
}
this.navSearch.contentShow = false
this.navSearch.keyword = keyword

这种写法，可读性和可维护性大大增加啊，感觉很 nice！
用 Vue 的时候，不要以 React 的思维方式写代码，使用什么工具，就是好好使用该工具的特性，不然代码显得很呆。

三、小结

这次的修改记录即“消灭原来的setData”，原来 300 多行的 Vue 文件缩减到了 200 多行，可读性和可维护性大大增加了。

「@浪里淘沙的小法师」