iview vue.js监听页面或者数据渲染完成判断是手机还是PC做一些初始化操作-web前端开发|在线助手，您的在线生成制作工具箱

iview vue.js监听页面或者数据渲染完成判断是手机还是PC做一些初始化操作-web前端开发|在线助手，您的在线生成制作工具箱!

iview vue.js监听页面或者数据渲染完成判断是手机还是PC做一些初始化操作是在线助手博客专栏，web前端开发系列博文,在线助手以及在线助手博客专注于提供在线生成、在线制作等在线工具，以及web前端开发、html、javascript、thymeleaf、view、vue.js、vue等常见问题的解决方案!

iview vue.js监听页面或者数据渲染完成判断是手机还是PC做一些初始化操作

在线助手博客首页

####一、监听页面渲染完成 核心方法 mounted

```javascrip
<script th:inline="javascript">

new Vue({

el: '#app',

data: {
            showImageOnMobile:false,
            showImageOnPc:false,
            modal1:false,
            formItem: {
                type:'女',
                school: '',
                name: ''
            },
        
            imageUrl:"https://www.it399.com/imgs/tools/gaokao/gaokao_zhunkaozheng_demo.jpg"
        },
        mounted:function(){
            if (IsPC()){
                this.showImageOnMobile = false;
                this.showImageOnPc = true;
            } else{
                this.showImageOnMobile = true;
                this.showImageOnPc = false;
            }
        },

methods: {
        
        }

});

</script>
```

####二、监听数据渲染完成 核心方法 nextTick
**vue里面本身带有两个回调函数：**
一个是 **Vue.nextTick(callback)**，当数据发生变化，更新后执行回调。
另一个是 **Vue.$nextTick(callback)**，当dom发生变化，更新后执行的回调。
举个例子
```javascrip

new Vue({
    el:'#demo',
    data:{
        list=[0,1,2,3,4,5,6,7,8,9,10]
    },
    methods:{
        push:function(){
            this.list.push(11);
            this.nextTick(function(){
                alert('数据已经更新')
            });
            this.$nextTick(function(){
                alert('v-for渲染已经完成')
            })
        }
    }
})

```

####三、vue生命周期
![vue生命周期](https://upload-images.jianshu.io/upload_images/2704327-91aa8a7d6664dd60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620)

下面是vue生命周期
```javascript
var myVue =new Vue({
        el: '.box',
        data: {
            msg: '呵呵'
        },
        beforeCreate: function () {
            alert("实例要创建了,要开始表演了");
        },
        created: function () {
            alert('vue实例已经new出来了,方法和属性还没有编译');
        },
        beforeMount: function () {
            alert('vue实例已经创建完成,马上要执行内部属性和方法的编译');
        },
        mounted: function () {
            alert('对象和属性已经编译完成');
        },
        beforeUpdate: function () {
            alert('数据马上更新,没保存赶紧保存');
        },
        updated: function () {
            alert('数据已经更新');
        },
        beforeDestroy: function () {
            alert('vue实例已经走到尽头了');
        },
        destroyed: function () {
            alert("vue实例永远活在我们心中!!!");
        }
    })
```

-------------
[个人网站](https://www.it399.com)
[个人博客](https://www.it399.com/blog/index)
-------------

> 本文同步发布在 [在线助手](https://www.it399.com) ，**转载请注明来自 [在线助手博客](https://www.it399.com/blog/index) 频道【[iview vue.js监听页面或者数据渲染完成判断是手机还是PC做一些初始化操作](https://www.it399.com/blog/html/201806141418)】,原文链接**:**https://www.it399.com/blog/html/201806141418**