vue api強化學習之-------實例方法
實例方法----數據
- vm.$watch
vm.$watch( expOrFn, callback, [options] )
expOrFn爲要監聽的屬性，callback監聽到變化時的回調函數，options配置一些參數，如是否深度監聽(deep參數)，是否將立即以表達式的當前值觸發回調（immediate參數）
返回一個取消觀察函數，用來停止觸發回調
觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數得到的參數爲新值和舊值。表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代
- vm.$set
vm.$set( target, propertyName/index, value ) 全局Vue.set()的別名 爲目標對象添加數據
target爲一數組或者對象； propertyName/index 對象的key或者數組的下表；需要設置的值
返回設置的值
- vm.$delete
vm.set方法的
以上三個方法示例
<template>
<div class="instance">
<div>{{a}}</div>
<button @click="method1">改變val</button>
<div>{{obj.name}}</div>
<button @click="method2">vm.set</button>
<button @click="method3">vm.delete</button>
</div>
</template>
<script>
export default {
name: 'InstanceMethods',
data(){
return {
a:{b:{c:66}},
obj:{name:"張飛"}
}
},
methods:{
method1(){
this.a.b.c = Math.random()*100
},
method2(){
// 此處通過vm.$set方法修改數據，vue實例會自動刷新
this.$set(this.obj,"name",Math.random()+"_張飛")
},
method3(){
// 刪除目標對象下的name屬性
this.$delete(this.obj,"name")
}
},
mounted(){
// 此處若監聽a,參數deep設置爲false，用上面方法改變值，則監聽不到變化
// 當監聽a.b.c此路徑時，即使deep設置爲false，也可以監聽到變化
// 當監聽a時，deep設置爲true時，也可堅挺到變化
this.$watch("a",function(newval,oldval){
console.log(newval,oldval,".........監聽到val屬性的變化了...")
},{deep:true,immediate:true})
}
}
</script>
實例方法—事件
- vm.$on
vm.emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數 ,和vm.$emit結合通常構建一個空vue實例，在組件之間進行通信
- vm.$emit
vm.$emit( eventName, […args] )
觸發當前實例上的事件。附加參數都會傳給監聽器回調。
- vm.$off
vm.$off( [event, callback] )
移除自定義事件監聽器。如果沒有提供參數，則移除所有的事件監聽器；如果只提供了事件，則移除該事件所有的監聽器；如果同時提供了事件與回調，則只移除這個回調的監聽器。
- vm.$once
vm.$once( event, callback ) 監聽一個自定義事件，只執行一次，執行過後移除監聽器
事件方法示例
<template>
<div class="instance">
<button @click="method5">觸發自定義的事件</button>
<button @click="method4">移除自定義事件監聽器</button>
</div>
</template>
<script>
export default {
name: 'InstanceMethods',
data(){
return {
}
},
methods:{
// 移除自定義事件監聽器
method4(){
// 此處沒有寫，回調函數名，則移除test事件所有的監聽器
this.$off("test")
},
// 觸發某一事件
method5(){
this.$emit("test","hello")
},
},
mounted(){
// 監聽test事件
this.$on("test",function(msg){
console.log("自定義的事件觸發了............",msg)
})
// 監聽test事件 執行一次後，移除此監聽器
this.$once("test",function(msg){
console.log("自定義的事件觸發了.監聽到消息....執行一次後移除子監聽器.......",msg)
})
}
}
</script>
實例方法—生命週期
- vm.$mount
vm.mount() 手動地掛載一個未掛載的實例;
如果沒有參數，則會被渲染到文檔之外，此時必須使用原生 DOM API 把它插入文檔中
返回vue實例自身
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 創建並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文檔之外渲染並且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
- vm.$forceUpdate
vm.$forceUpdate()
迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件
- vm.$nextTick
vm.nextTick函數的特性推後執行
- vm.$destroy
完全銷燬一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。觸發 beforeDestroy 和 destroyed 的鉤子,通常不用；
實例生命週期方法示例
<template>
<div class="instance">
<button @click="method6">vm.$forceUpdate</button>
<div>{{message}}</div>
<button @click="updateMessage">vm.$nextTick</button>
</div>
</template>
<script>
export default {
name: 'InstanceMethods',
data(){
return {
message:'未更新'
}
},
beforeUpdate(){
console.log("重新渲染之前。。。。。。。")
},
updated(){
console.log("重新渲染之後。。。。。。。")
},
methods:{
// 強制vue實例重新渲染
method6(){
this.$forceUpdate();
},
updateMessage: function () {
this.message = '已更新'
// dom還未更新，
console.log(this.$el.textContent,"........updateMessage...............") // => '未更新'
// dom更新之後執行此回調
this.$nextTick(function () {
console.log(this.$el.textContent,"....this.$nextTick..updateMessage....") // => '已更新'
})
}
},
}
</script>