Vue生命周期-手动挂载理解

改前端遇到个bug，console能够输出值，但是前端不能显示。

我简直一脸懵逼，vue的问题？网络的问题？浏览器的缓存问题？

 

公司网络，所以直接排除网络问题。

浏览器缓存，试了下确实一定概率可以显示，但是，哪怕浏览器不行，我们也只能从自己的代码里修改来配合它，兼容它。

 

所以，这是vue的问题。

那么是vue的兼容问题？vue的缓存问题？vue的数据显示问题？

 

兼容这玩意，要改只能大改vue的代码了，我是后端工程师，所以，直接pass，真到这步肯定直接给前端的搞了。

那么是缓存还是显示？

console能够输出值，但是前端不能显示。显然，是显示问题。

 

所以，直接看vue的生命周期

 

显然能输出空值，应该是绑定事件之后出的错，那么就是数据挂载的问题。

解决方法：默认的挂载不行，那么就手动挂载呗。

但是，网上的手动挂载什么的js代码都很长，其实可以直接利用html5的特性，绕过绑定。

 

 <option v-show="false" selected="selected">{{v.userId}}</option>

//v-show="false" 不显示 
//{{v.userId}} 直接在html5页面取出来

 

 

 

不适用绑定方法，直接取值，然后不显示，这是最简单的手动挂载，只用一句！

 

                           <select class="form-control" v-model="v.userId">
                                <option v-show="false" selected="selected">{{v.userId}}</option>
                                <option v-for="object in clientDTO.userList" :value="object.userId">
                                    {{object.userId}}
                                </option>
                            </select>

 

 

后接js的方法

用$mount()手动挂载

    var obj= {name: '张三'}  
    var vm = new Vue({  
        data: obj
    })  
    function test() {  
        vm.$mount("#app");  
    }  

 用extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例，即直接js写html页面

var app= Vue.extend({  
    template: '<p>{{firstName}} {{lastName}}</p>',  
         data: function () {  
             return {  
                firstName: 'Walter',  
                lastName: 'White' 
               }  
             }  
           })  
  // 创建 app实例，并挂载到一个元素上。  
  new app().$mount('#app')