常用的實例方法：
$mount（）外部設置el, vue的作用范圍
$destroy()手動銷毀
$watch()監聽
$forceUpdate()強制更新
1.$mount（）外部設置el, vue的作用范圍
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<button onclick="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 onclick="add()">添加el</button>
<button onclick="destroy()">銷毀</button>
<button onclick="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>