1.watch監(jiān)控
data(){
? ? return {
? ? ? ? str:'abc',
? ? ? ? obj:{
? ? ? ? ? ? name:"zhang",
? ? ? ? ? ? likes:['music','read']
????????}
????}
}
watch:{監(jiān)控內(nèi)容如下}
監(jiān)控字符串
? ? str(n,o){
? ? ? ? // 監(jiān)控一個(gè)data里面的字段粥血，在修改時(shí)候調(diào)用函數(shù)渲染處理其他字段
????????this.dataFieldOtherField.operation()
????},
?監(jiān)控對(duì)象
????obj：{
????????deep：true,//深度監(jiān)控
? ? ????immediate：true, 立即執(zhí)行監(jiān)控
? ????? handler(n,o){
? ? ? ? ? ? 不能寫(xiě)new是保留的關(guān)鍵字
? ? ? ? ????執(zhí)行方法
????????}
? ? }
}
監(jiān)控?cái)?shù)組
arr:{
? ? deep:true,
????hander(n, o){
? ? ? ? for(let i =0;i<n.length;I++){
? ? ? ? ? ? if(n[i] != o[i])){
? ? ? ? ? ? ? ? condole.log(n[i])
????????????}
????????}
? ?}
}
監(jiān)控對(duì)象具體某個(gè)的元素
compute:{
? ? name:function(){
? ? ? ? return this.obj.name
????}
}
watch:{
? ? name(n, o){
? ? ? ? console.log('n')
????}
}
2.computed計(jì)算
data(){
? ? return{
? ? ? ? firetName:'yakun'
? ? ? ? lastName：‘wang’
????}
},
computed:{
? ? // 創(chuàng)建一個(gè)新的字段用于頁(yè)面顯示
? ? 箭頭函數(shù)
? ? name: ()=>{
? ? ? ? console.log(this)
? ? ? ? undefined
????????return this.lastName+" "+ this.firstName
????}
? ? 函數(shù)
? ? name: function(){
? ? ????console.log(this)
? ? ? ? // vue的值如圖1
????????return this.lastName+" "+ this.firstName
????}
}
***寫(xiě)法和function一致改艇，
1.如果用箭頭函數(shù)就會(huì)this指向錯(cuò)誤辜御，可以使用function解決
2.如果計(jì)算屬性的字段當(dāng)作參數(shù)傳給父組件，那么類型當(dāng)作對(duì)象元践，而不是一個(gè)值，如圖
3.this值
? ? 箭頭函數(shù)有具體的上下文，指向定義時(shí)的對(duì)象父能，默認(rèn)使用父級(jí)this
? ? 普通函數(shù)體內(nèi)的this是指使用時(shí)的調(diào)用者神凑，沒(méi)有調(diào)用者就指向windows
箭頭是在哪定義就是誰(shuí)，普通函數(shù)是在哪調(diào)用就是誰(shuí)
watch和computed的使用對(duì)比
3.props
接收父組件的傳入?yún)?shù)
props:{
? ? config:{
? ? ? ? type:'String/Number/Boolean/Array/Object/Function/Symbol/undefined/null',
? ? ? ? default:''string'/89/true/()=>[]/（）=>{}/function()/****/unll和undefined會(huì)通過(guò)所有類型'何吝，//對(duì)象類型的默認(rèn)值必須是回掉 溉委，也就是用return
? ? ? ? required:true,// 是否必填
? ? ? ? validator:(val)=>{
? ? ? ? ? ? // return val>100
? ? ? ? ? ? return ['date','time','dateTime'].indexOf(val)>-1
????????}// 校驗(yàn)規(guī)則
????}
}
