Vue的实例方法

Vue的实例方法

extend：用法：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

示例：

<div id="app"></div>
    <div id="app1"></div>
    <div id="app2"></div>
    <script>
        //定一个人的类
        const people = Vue.extend({
            template:`<p>{{name}}---{{age}}</p>`,
            data(){
                return {
                    name:"xumo",
                    age:16
                }
            }
        });
        //创建people实例，并且挂载到元素上
        new people().$mount("#app");
        //同上
        new people({el:"#app1"});
        //或者，在文档之外并且随后挂载
        let component = new people().$mount();
        document.getElementById("app2").appendChild(component.$el);
    </script>

全局方法中nextTick([callback])：用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。在beforeUpdate中使用，可以取到更新后的值

示例：

 <div id="app"></div>
    <script>
        //定一个人的类
        const people = Vue.extend({
            template:`<p>{{name}}---{{age}}</p>`,
            data(){
                return {
                    name:"xumo",
                    age:16
                }
            }
        });
        //创建people实例，并且挂载到元素上
        let el = new people().$mount("#app");
        el.name = "更新后name的值"
        Vue.nextTick(function(){
            console.log("数据更新了");
        });
    </script>

实例方法中nextTick的用法：this.$nextTick(callback)

示例

 <div id="app">
        {{msg}}
        <button @click="change">点击修改msg的值</button>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                msg:"hello"
            },
            methods:{
                change(){
                    this.msg = "change"
                    this.$nextTick(function(){
                        console.log("msg的值已经被更改");
                    });
                }
            },
            //挂载之前如果修改了数据，按理说是拿不到最新的数据的，可是如果在挂载前加了this.$nextTick就能提前拿到最新的数据，
            //而且它还是始终拿的都是最新的数据
            beforeMount(){
                console.group("vue挂载之前");
                console.log(this.$el,this.$data);
                console.log("更新数据之后");
                this.msg = "change";
                this.$nextTick(function(){
                    console.log(this.$el);
                });
            },
            //如果写了mounted的钩子函数，拿到后的数据会在mounted的函数中展示，如果不写就会在挂载之前展示
            // mounted(){
            //     console.group("vue挂载之后");
            //     console.log(this.$el,this.$data.name);
            // }
        });
    </script>

mixins混入：mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

示例

<div id="app"> </div>
    <script>
        //定义msg的数据
        let mixinData = {
            data(){
                return {
                    msg:"hello"
                }
            }
        }
        //定义实例的方法
        let mixinFn = {
            methods:{
                fn(){
                    this.msg = "world"
                }
            }
        }
        //定义template模板
        let mixinTem = {
            template:`<button @click="fn">{{msg}}</button>`
        }
        let com = Vue.extend({
            mixins:[mixinData,mixinFn,mixinTem],
            // template:`<button @click="fn">{{msg}}</button>`,
            //自带的会覆盖混入过来的
             data(){
                return {
                    msg:"像风一样的自由"
                }
            }，
            // methods:{
            //     fn(){
            //         this.msg = "world"
            //     }
            // }
        });
        new com().$mount("#app");
    </script>

如果混入对象里有个钩子函数，并且Vue.extend()里面也有个同名的钩子函数，这个时候，两个钩子函数会同时调用

示例

<div id="app"> </div>
    <script>
        let mixinData = {
            data(){
                return {
                    msg:"hello"
                }
            },
            created(){
                console.log("这个是混入的钩子函数");
            }
        }
        
        let com = Vue.extend({
            mixins:[mixinData],
            template:`<button @click="fn">{{msg}}</button>`,
            methods:{
                fn(){
                    this.msg = "world"
                }
            },
            created(){
                console.log("这个是自身的钩子函数");
            }
        });
        new com().$mount("#app");
    </script>

如果混入对象里有个方法跟实例对象里的方法同名，则会运行实例中的方法

示例

<div id="app"> </div>
    <script>
        let mixinData = {
            methods:{
                test(){
                    console.log("test");
                },
                run(){
                    console.log("run1");
                }
            }
        }
        let com = Vue.extend({
            mixins:[mixinData],
            template:`<div>
                <button @click="test">test</button>
                <button @click="run">run</button>
                <button @click="play">play</button>
            </div>`,
            methods:{
                play(){
                    console.log("play");
                },
                run(){
                    console.log("run2");
                }
            }
        });
        new com().$mount("#app");
    </script>