當前位置：
首頁 >
vue----常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()
發布時間：2025/4/16
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue----常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
常用的實例方法： $mount（）外部設置el, vue的作用范圍
$destroy()手動銷毀
$watch()監聽
$forceUpdate()強制更新
1.$mount（）外部設置el, vue的作用范圍
<body><div id="app"><h2>{{message}}</h2></div><button οnclick="add()">添加el</button> </body> </html> <script src="vue.js"></script> <script>var vm = new Vue({data:{message:"張三"}})//實例外創建el function add(){//外部設置el。vue的作用范圍 vm.$mount("#app");}</script>?
<body><div id="app"><h2>{{message}}</h2><p>{{age}}</p><input type="text" v-model="obj.name"><button @click="watchDeep()" >外部監聽</button></div><button οnclick="add()">添加el</button><button οnclick="destroy()">銷毀</button><button οnclick="update()">強制更新</button></body> </html> <script src="vue.js"></script> <script>var vm = new Vue({data:{message:"張三",obj:{name:"張三",age:18}},methods:{watchDeep(){this.$watch("obj",()=>{console.log("事件監聽");},{deep:true})}}})vm.age = 18;//實例外創建el function add(){//外部設置el。vue的作用范圍vm.$mount("#app");}function destroy(){//銷毀vm實例與DOM之間的關聯 vm.$destroy();}/*只有在實例化方法中，添加屬性，才會有setter和getter方法，實現數據雙向通信在實例化方法外，添加屬性,沒有setter和getter方法，不能雙向通信，解決方法：強制更新$.forceUpdate()*/function update(){vm.$forceUpdate();}//外部監聽// vm.$watch("obj",()=>{// console.log("執行監聽")// },{// deep:true// }) </script>?
轉載于:https://www.cnblogs.com/SRH151219/p/10390276.html
總結
以上是生活随笔為你收集整理的vue----常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL运用
- 下一篇： vue中的computed 与