账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 2.0 mounted 会执行两次问题原因(有个人解释)
    34
    0

    20180828内容补充:
    我的代码目录结构是这样的

    -src
    --conponents_mobile
    ---bb.vue
    --conponents_pc
    ---bb.vue

    然后通过路由判断是移动还是pc进入,使用的不同文件夹里的组件,是否有可能两个组件文件夹中有两个同名的文件才会看上去加载两次?

    <template>
        <div class="a">
            <bb v-show='registerComponentShow'></bb>
            <cc v-show='projectComponentShow'></cc>
        </div>
    </template>

    如上面结构,我的一个组件 bb 里面的 mounted 生命周期被调用了两次,我就想是否是因为这个组件渲染了两次?
    然后我改成了如下

    <template>
        <div class="a">
            <bb v-if='registerComponentShow'></bb>
            <cc v-if='projectComponentShow'></cc>
        </div>
    </template>

    这样 bb 里面的 mounted 就不会调用两次了。

    我的问题是,对于一个组件,假如给它加上了 v-show 是否就是在页面渲染的时候,第一次渲染 <bb></bb> 然后再判断 v-show 是否是 true,是真的就再次渲染,所以看上去 mounted 就执行了两次了。

    望不吝指教,谢谢。

    2018.9.21
    才想起来应该要把后续讲讲,其实几个星期前已经搞清楚了,其实问题都是组件套用,且组件都是直接加载的,所以才会看出执行了两次。
    优化方法,现在是使用懒加载,用到的时候才去加载,具体可以使用 v-if 或是路由控制跳转,webpack 配置好就行。

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部