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()

猜你喜欢