vue中的手动销毁与强制更新
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue中的手动销毁与强制更新</title>
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue中的手动销毁与强制更新</title>
<script src="./toolkit/vue.js"></script>
</head>
<body>
<div id="app"></div>
<p><button onclick="destroy()">卸载</button></p>
<p><button onclick="reload()">刷新</button></p>
</body>
<script type="text/javascript">
var jspang=Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return{
message:'hello , i am jspang'
}
},
mounted(){
console.log('mouted 被创建!');
},
//销毁方法后执行的生命周期
destroyed(){
console.log("销毁");
},
//更新方法生命周期
updated(){
console.log("更新之后");
}
})
var vm= new jspang().$mount("#app");
//销毁方法
function destroy(){
vm.$destroy();//手动销毁
}
//属性方法l
function reload(){
vm.$forceUpdate();//强制更新
}
</script>
</html>
更多推荐
已为社区贡献6条内容
所有评论(0)