小白学习Vue(7)--实例方法/生命周期（vm.$nextTick | vem.$mount）

本文链接：https://blog.csdn.net/weixin_43901882/article/details/109695387

- - - 7. 实例方法/生命周期

7. 实例方法/生命周期

7.1. vm.$mount( [elementOrSelector] )

用于手动挂载一个未挂载的实例，方法返回实例本身，elementOrSelector为需要挂载到的dom节点

<div id="test-instanceMount"></div>
<div id="test-instanceMountEL"></div>

<script>
    var component = Vue.extend({
        template: '<div>Hello</div>'
    });

    new component().$mount('#test-instanceMount');// 子组件挂载到test-instanceMount
    new component({el: '#test-instanceMountEL'})
</script>

7.2. vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

7.3. vm.$nextTick( [callback] )

在数据变化后要执行某个操作，当你设置vm.someData = ‘new value’ ，DOM并不会马上更新
如果此时你想要根据更新的DOM状态去做某些事，可以在数据变化后立即使用vm.$nextTick( [callback] )

<div id="test-instanceNextTick">
    <example></example>
</div>
<script>
    Vue.component('example', {
        data: function () {
            return {
                message: '未更新'
            }
        },
        methods: {
            updateMessage: function () {
                this.message = '已更新';
                console.log(this.$el.textContent); // 未更新
                this.$nextTick(function () {
                    console.log(this.$el.textContent); // 已更新
                })
            }
        },
        template: `<button v-on:click="updateMessage">{{message}}</button>`
    });
    new Vue({
        el: '#test-instanceNextTick'
    });
</script>