vue用法笔记

1.watch监控

data(){
    return {
        str:'abc',
        obj:{
            name:"zhang",
            likes:['music','read']
        }
    }
}

watch:{监控内容如下}

监控字符串
    str(n,o){
        // 监控一个data里面的字段，在修改时候调用函数渲染处理其他字段
        this.dataFieldOtherField.operation()
    },

 监控对象
    obj：{
        deep：true,//深度监控
        immediate：true, 立即执行监控
        handler(n,o){
            不能写new是保留的关键字

            执行方法
        }
    }
}

监控数组

arr:{

    deep:true,
    hander(n, o){
        for(let i =0;i            if(n[i] != o[i])){
                condole.log(n[i])
            }
        }
   }
}

监控对象具体某个的元素

compute:{

    name:function(){
        return this.obj.name
    }
}

watch:{
    name(n, o){
        console.log('n')
    }
}

2.computed计算

data(){
    return{
        firetName:'yakun'
        lastName：‘wang’

    }
},

computed:{
    // 创建一个新的字段用于页面显示

    箭头函数
    name: ()=>{

        console.log(this)
        undefined
        return this.lastName+" "+ this.firstName
    }

    函数
    name: function(){
        console.log(this)
        // vue的值如图1

this的值 - 图1

        return this.lastName+" "+ this.firstName
    }

}

***写法和function一致，
1.如果用箭头函数就会this指向错误，可以使用function解决

2.如果计算属性的字段当作参数传给父组件，那么类型当作对象，而不是一个值，如图

computed是函数，对象属性，不是值属性

3.this值
    箭头函数有具体的上下文，指向定义时的对象，默认使用父级this
    普通函数体内的this是指使用时的调用者，没有调用者就指向windows

箭头是在哪定义就是谁，普通函数是在哪调用就是谁

watch和computed的使用对比

对比

3.props

接收父组件的传入参数
props:{
    config:{
        type:'String/Number/Boolean/Array/Object/Function/Symbol/undefined/null',
        default:''string'/89/true/()=>[]/（）=>{}/function()/****/unll和undefined会通过所有类型'，//对象类型的默认值必须是回掉 ，也就是用return
        required:true,// 是否必填
        validator:(val)=>{
            // return val>100
            return ['date','time','dateTime'].indexOf(val)>-1
        }// 校验规则
    }

}