vue

Vue中使用router.meta.keepAlive对页面进行缓存

https://blog.csdn.net/qq_42127308/article/details/94445321
https://www.cnblogs.com/sysuhanyf/p/7454530.html

v-if v-show

• 都可控制页面元素 显示与隐藏
• v-if动态的向DOM树内添加或者删除DOM元素
  初始渲染开销较小，切换开销比较大
  适合条件不经常改变的场景
• v-show控制css中的display设置为none
  初始初始开销较大,切换开销比较小
  适合条件频繁切换的场景

// v-if
<view class="row-center" v-if="item.country != ''">
<view class="row-center" v-if-else="item.country = ''">

// v-show
<view class="row-center" v-show="item.country != ''">

v-for

<view v-for="(item,index) in labelList" :key="index">
    <view>
        {{item.name}}
    </view>
</view>

watch computed

• 计算属性computed
• 监听属性watch

写法示例

watch: {
    //监听筛选弹出框 
    //isSearchShow 是被监听的数据，必须是data的数据
    'isSearchShow': function() {
        if (this.isSearchShow) {
            // 隐藏tab
            uni.hideTabBar()
            } else {
                // 显示tab
                uni.showTabBar()
            }
        }
    }

computed: {
    //滑动组件置顶
    pageFixed() {
        if (this.rect + 50 > this.nameTop) {
            this.isFixed = true;
        } else {
            this.isFixed = false;
        }
    }
}

https://www.cnblogs.com/jiajialove/p/11327945.html

vue中动态类写法

:class="'row-center bg-white entry-btn lg primary ' + (goodsActive == 1 ? 'goods-active' : '')"

<view url="" hover-class="none"
                    :class="'row-center bg-white entry-btn lg primary ' + (goodsActive == 1 ? 'goods-active' : '')"
                    @click="onChangeGoodsActive(1)">
                    拼团列表
                </view>

微信小程序动态类写法

 <view class="combine-container {{0 == goodsActive ? 'goods-hide' : ''}}">

uniapp 数组的用法

https://blog.csdn.net/joker6295/article/details/116275629

vue加ts时

watch使用注解@watch，记得引入注解

vue中的data有map类型数据，修改后视图层没反应，应该要this.forceUpdate()同时使用才有用

// data中有该数据currentSwiper: new Map(),
// 获取轮播图索引
            getChangId(e, index) {
                this.$set(this.currentSwiper, index, e.detail.current)
                this.$forceUpdate()
            },

https://blog.csdn.net/weixin_44288250/article/details/104859439

vue 复制内容到剪切板

https://blog.csdn.net/weixin_42398560/article/details/90766534

• 另一方法 ts写法

/**
 * @description 复制到剪切板
 * @param value { String } 复制内容
 * @return { Promise } resolve | reject
 */
export const copyClipboard = (value: string) => {
    const elInput = document.createElement('input')

    elInput.setAttribute('value', value)
    document.body.appendChild(elInput)
    elInput.select()

    try{
        if(document.execCommand('copy'))
            return Promise.resolve()
        else
            throw new Error()
    } catch(err) {
        return Promise.reject(err)
    } finally {
        document.body.removeChild(elInput)
    }
}

// 调用方式
// 复制到剪贴板
        onCopy(value: String) {
            copyClipboard(value).then(() => {
                this.$message.success('复制成功')
            }).catch(err => {
                this.$message.error('复制失败')
                console.log(err)
            })
        }

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null"

• 接收数据时，如果数组被赋值为null，会报错

可以这样处理

 if (this.form.invite_appoint_user === null) {
                    this.form.invite_appoint_user = []
                     }