vue的常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()
Posted srh151219
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()相关的知识，希望对你有一定的参考价值。
常用的实例方法：
$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>
以上是关于vue的常用实例方法--$mount(),$destroy(),$watch(),$forceUpdate()的主要内容，如果未能解决你的问题，请参考以下文章