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<n.length;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
return this.lastName+" "+ this.firstName
}
}
***写法和function一致，
1.如果用箭头函数就会this指向错误，可以使用function解决
2.如果计算属性的字段当作参数传给父组件，那么类型当作对象，而不是一个值，如图
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
}// 校验规则
}
}
