[已解决] vue.js 在IOS7、android 4.1 默认浏览器中使用动态组件，会子组件会同时执行并渲染。

Question

vue.js 版本

v1.0.17

在ios7或android 4.1 ~ android 5.1 默认浏览器中使用动态组件，会使得子组件同时执行并渲染

在ios9、android 最新版QQ浏览器 、PC版的Chrome浏览器中并不会同时执行，正常运行

css代码：

<style type="text/css">

.box-a{
    position: absolute;
    z-index: 53;
    width: 100px;
    height: 100px;
    background: rgba(255,0,0,0.5);
}
.box-b{
    position: absolute;
    z-index: 53;
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,0.5);
}

.move-animation
{
    -webkit-animation: move .3s ease;
            animation: move .3s ease;

            animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes move
{
    from
    {
        -webkit-transform: translate(0px,0);
                transform: translate(0px,0);
    }
    to
    {
        -webkit-transform: translate(100px,0);
                transform: translate(100px,0);
    }
}

@-webkit-keyframes move
{
    from
    {
        -webkit-transform: translate(0px,0);
                transform: translate(0px,0);
    }
    to
    {
        -webkit-transform: translate(100px,0);
                transform: translate(100px,0);
    }
}

</style>

模板：

<component  :is="isPage"  :Page.sync="isPage"></component>
<template id="component-a">
    <div class="main-screen">
        <div class="box-a" v-bind:class="[animation]"></div>
    </div>
</template>

<template id="component-b">
    <div class="main-screen1">
        <div class="box-b" v-bind:class="[animation]"></div>
    </div>
</template>

代码：

var A = Vue.extend({
    data:function(){
        return{
            animation:''
        }
    },
    template:'#component-a',
    props:['Page'],
    ready:function(){

        _self = this;
        setTimeout(function(){
            _self.animation = 'move-animation';
            _self.done();
        },2000);
        console.log('component-a ok');
                
    },
    methods:{
        done:function() {
            _self = this;
            setTimeout(function(){
                _self.Page = 'B'
            },1000);
        }
    }
});

var B = Vue.extend({
    data:function(){
        return{
            animation:''
        }
    },
    template:'#component-b',
    props:['Page'],
    ready:function(){
            
        _self = this;
        setTimeout(function(){
            _self.done();
        },2000);
        console.log('component-b ok');    
        },
    methods:{
        done:function(obj) {
            this.animation = 'move-animation';
        }
    }
});

    
var app = new Vue({
    el:'#app',
    data:function(){
        return {
            animation:'',
            isPage:''
        }
    },
    props:['isPage'],
    ready:function(){
        _self = this;
        setTimeout(function(){
            _self.animation = 'move-animation';
            _self.isPage = 'A'
        },800);
        
    },
    components:{
        'A':A,
        'B':B
    }
});

Answer 1

已找到问题所在，在没有用vue-cli 或Webpack 构建的项目中，直接在html或者javascript构建的

模板必须写成 ：

<script type="x/template" id="component-a">
    <div class="main-screen">
        <div class="box-a" v-bind:class="[animation]"></div>
    </div>
</script>

<script type="x/template" id="component-b">
    <div class="main-screen1">
        <div class="box-b" v-bind:class="[animation]"></div>
    </div>
</script>

否则，移动版浏览器（如：android 4.1 ~ android 5.1 原生浏览器、IOS7 原生浏览器、微信浏览器等）会同时执行组件并渲染，而不会像PC版那样调用到再执行