Vue计算、侦听属性

计算属性

• 作用:对数据做计算(操作data中的数据然后返回出去)
• 计算属性的计算结果不可修改，计算属性不能传参数
• 计算属性中的key可以当作全局变量直接使用

// 函数写法
computed:{
    newStr(){
        return this.str.split('').reverse().join('')
    }
}

//存储器写法
computed:{
    newMsg:{
        get(){
            return this.full=this.first+this.last
        },
        set(val){
            this.first=val.slice(0,1)
            this.last=val.slice(1)
        }
    }
}

侦听属性-watch

• 监听data中数据的变化，当数据改变时，可以做一些数据请求
  • 上拉加载、分页(异步数据请求)
• watch中方法名(key)和data选项中的数据要相同
• 分类: 浅监听、深度监听

const vm=new Vue({
    el:'#app',
    data:{
        count:0,
        obj:{
            number:1
        }
    },
    watch:{
        count(){
            console.log('浅监听')
        },
        obj:{
            deep:true,
            hanlder(){
                console.log('深度监听')
            }
        }
    }
})

watch computed methods的区别

• watch 是对数据进行监听,更多完成的是异步数据请求
• methods 是事件处理程序
• computed 是对数据进行重计算

ui库

1. 移动端
   • weUI(微信)
   • SUI Mobile(淘宝)
   • Framework7(苹果)
2. pc端
   • bootstrap