vue 生命周期 返回不触发_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 被執行了。

var test= Vue.extend({

template: '

123

',

mounted: function() {

console.log(1);

}

})

new Vue({

el: '#app',

components: {

test: test,

},

})

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起