路由傳參，父向子傳值：
子向父傳值：
同級元件傳值：
vue的watch和computed的用法及區別:
vue的watch和computed的用法及區別:
watch:
理解：一個依賴資料影響多個資料.比如正數5=3+2;5變化,5後面的3或者2變化;6 = 3 +3,3+3依賴於6
————————————————
型別： Object
———————————————
用法：觀察 Vue 例項的一個表示式或計算函式
————————————————
引數(任意合法繫結表示式/object/鍵路徑,對應回撥(新值,舊值),方法)
———————————————
方法：deep：true/false 為了發現物件內部值的變化;也叫深度監聽,陣列的改變不需要使用深度watch
immediate:true/false 表示以表示式的當前值觸發回撥
——————————————
computed:一個資料被多個資料影響
理解：計算屬性持續追蹤它的響應依賴。在計算一個計算屬性時，Vue更新它的依賴列表並快取結果，只有當其中一個依賴發生了變化，快取的結果才無效。因此，只要依賴不發生變化，訪問計算屬性會直接返回快取的結果，而不是呼叫 getter。快取為計算巨型陣列給了好處。
比如：已知a和b的值，求 a + b = c的值,就是a或者b或者同時改變時c發生變化，c依賴於a 或者 b
————————————
型別： Object
————————————
用法：為vue例項提供了計算屬性,getter和setter的this自動地繫結到例項。
————————————
方法：getter 和 setter 預設為getter函式
getter(在獲取值時觸發) 優點：在資料未發生變化時，優先讀取快取,計算屬性被快取了，在訪問它時 getter 不總是被呼叫;關閉快取(總是被呼叫)cache: false
set(在設定時值觸發)
下面瞧瞧watch和computed的用例:
<template>
<div>
<input type="text" outfous="outfous" required="required" v-model:value="first.name"/>
<input type="text" name="" v-model:value="last.name">
以上通過v-model繫結一個物件在value上，並自定義屬性name
<input type="text" name="" v-model:value="full">
</div>
</template>
<script>
export default {
data () {
return {
first: {
name:''
},
last:{
name:''
},
full:''
}
},
watch: {
first: {
handler: function (val1,oldVal1) {
this.full = this.last.name + val1.name
},
deep:true,
// deep:true,//監聽物件內部值的變化，深度監聽，在引數中指定 deep: true
// immediate: true將立即以表示式的當前值觸發回撥
},
last: {
handler: function (val2,oldVal2) {
this.full = val2.name + this.first.name
},
deep:true
},
// 以鍵路徑的方式監聽物件的屬性,鍵路徑要加引號
'first.name': function (val1,oldVal1) {
this.full = val1 + this.last.name;
},
'last.name': function (val2,oldVal2) {
this.full = val2 + this.first.name;
}
},
// computed實現監聽
computed: {
// 普遍寫法
full:function () {
return this.first.name + this.last.name
},
// 標準寫法 預設是每個計算屬性計算時有get函式，可以進行快取
full:{
get () {
return this.first.name + this.last.name
}
}
}
}
</script>
<template>
<div>
<p>{{a}}</p>1
<p>{{b}}</p>2
<p>{{c}}</p>3
</div>
</template>
<script>
export default {
data () {
return {
a: 1
}
},
computed: {
// 不需要set設定值時
b () {
get:{
return this.a + 1
},
// cache: false,為指定的計算屬性關閉快取
},
// 設定set值時：
b: { //b依賴於a
set (val) {
this.a = val + 3
},
get () {
return this.a + 1
},
},
c () {
get:{
return this.a + this.b
}
}
c: {
get () {
可以通過Date.now()證明c和b依賴於a,只要a和b變更，Date.now()就變
return this.a + ' ' + this.b + ' '+ Date.now()
}
}
}
}
</script>複製程式碼