Vue 实例身上的方法外部挂载强制更新组件销毁

最新推荐文章于 2024-06-12 16:13:25 发布

鲸是鲸鱼的鲸

最新推荐文章于 2024-06-12 16:13:25 发布

阅读量1.8k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97393060

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h2>{{obj.age}}</h2>

    </div>


    <hr/>


    <button onclick="handleMount()">挂载</button>
    <button onclick="handleDestroy()">销毁</button>
    <button onclick="handleUpdate()">强制更新</button>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        data:{
            msg:1910,
            obj:{
                name:"zhangsan"
            }
        },
        beforeMount(){
            this.obj.age = 20;
        }
    })

    function handleMount(){
        vm.$mount("#app");
    }
    
    function handleDestroy() { 
        vm.$destroy();
    }

    function handleUpdate(){
        vm.$forceUpdate();
    }


/*
vm.$mount
    组件外部挂载


vm.$forceUpdate
    强制更新

    当属性身上没有getter/setter方法的时候可以通过forceUpdate进行手动调用render函数的方式进行更新，
    因为是手动更新，因此使用的时候要注意，因为会浪费性能



vm.$destroy

    组件销毁：将vm与视图之间的关联进行了断开

*/
</script>

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 实例身上的方法外部挂载强制更新组件销毁

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫