vue.js - Vue.extend()中，生命周期mounted好像一直不会触发

问题描述

问 题

Vue.component(), new Vue(), Vue.extend()有什么区别
Vue.extend()中，生命周期mounted好像一直不会触发，不知道怎么回事。created测试正常。

var test= Vue.extend({
                template: '#test',
                data: function() {
                    return {
                        msg: 'test'
                    }
                },
                mounted: function() {
                    console.log(1);
                }
            })

router.map({
                '/test': {
                    component: test
                }
            })

这时候component后面应该是new（实例化）的Vue而不能是Vue.extend()?

解决方案

Vue.component('my-component', { ... })

等同於

var myComponent = Vue.extend(...)
Vue.component('my-component', myComponent)

Vue.component 會註冊一個全局的組件，其會自動判斷第二個傳進來的是 Vue 繼承對象(Vue.extend) 還是 普通對象 ，如果是普通對象的話會自動在調用 Vue.extend ，所以你先繼承再傳還是直接傳普通對象對 Vue.component 的最終結果是沒差的。

而為何 mounted 沒有執行是因為 Vue.extend() 只是單純建立一個繼承 vue 構造 的對象，他並沒有實際掛載與渲染，自然 mounted 也不會執行，等你把它掛載並使用時，自然可以看到 mounted 被執行了。

<div id="app">
    <test></test>
</div>

var test= Vue.extend({
    template: '<div>123</div>',
    mounted: function() {
        console.log(1);
    }
})

new Vue({
    el: '#app',
    components: {
      test: test,
    },
})

这篇关于vue.js - Vue.extend()中，生命周期mounted好像一直不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！