文档章节

vue实例的生命周期讲解

 李晓艳
发布于 2017/09/06 14:52
字数 4561
阅读 45
收藏 0
点赞 0
评论 0

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

在Vue的整个生命周期中,它提供了一系列的事件,可以让我们注册js方法,可以让我们达到控制整个过程的目的地,值得注意的是,在这些事件响应方法中的this直接指向的是vue的实例。

首先看看下面官网的一张生命周期的图,我做一下标注,看看整体的流程,后面我们上代码做一下效果。

Vue提供的可以注册的钩子都在上图片的红色框标注。 他们是:

beforeCreate

beforeCreate在官方文档描述中说,在做一些数据监视和事件初始化,这里有一个容易让人走偏的地方,就是事件初始化,其实就是为vue对象添加一些属性,就是methods中的一些函数全部作为vue对象的属性存在,Vue会讲所有的data数据和methods中的函数添加到创建的vue对象上面。

在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前被调用。

执行beforeCreate事件钩子(创建之前)的方法的时候,数据观测(比如data里面的变量)和事件配置(methods属性里面的方法和computed计算属性或者watch事件监听等)都没有被调用,所以在创建之前调用this.demo或者是this.list()等都是调用不到的。

beforeCreate:function(){
        //beforeCreate在官方文档描述中说,在做一些数据监视和事件初始化,这里有一个容易让人走偏的地方,就是事件初始化,其实就是为vue对象添加一些属性,就是methods中的一些函数全部作为vue对象的属性存在,Vue会讲所有的data数据和methods中的函数添加到创建的vue对象上面。

        //执行beforeCreate事件钩子(创建之前)的方法的时候,数据观测(比如data里面的变量)和事件配置(methods属性里面的方法和computed计算属性或者watch事件监听等)都没有被调用,所以在创建之前调用this.demo会显示undefined或者是调用this.list()等是会报错找不到这个方法的,因为还没有创建成功,所以调用不到,都是调用不到的。
    	console.log("创建前")     //创建前       
        console.log(this.demo);    //undefined        
		console.log(this.attrcomputed); //undefined
        this.list();   //Error in beforeCreate hook: "TypeError: this.list is not a function"               
		console.log(this.$el);
    },

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

created 这个方法表示,vue对象已经创建成功,这里要搞清楚vue对象并不是我们所说的虚拟dom,vue对象就是一个js对象,他内部只是对数据进行操作,通过对数据的操作进而影响到虚拟dom的构建,所以在这个方法中我们可以做一些数据初始化工作,最常见的就是发送ajax请求来对已经构建完毕的vue对象的静态属性进行一些初始化。

created:function(){
        //实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
    	console.log("创建成功")  //创建成功           
		console.log(this.demo);   //vue.js         
        console.log(this.attrcomputed); //sj.euv
        this.list();     //vue对象的methods方法中list事件调用  调用成功     
        console.log(this.$el); //undefined  vue对象还没有开始挂载到html上
    },

beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

beforeMount 这个过程就是根据编译以后产生的虚拟dom结构来构造一个真实的dom结构,再说一遍,这两个dom有很大的区别,前者只表示数据结构,后者可以直接添加到html文档结构中来渲染一个效果。在这个期间,我们就可以操作真实的dom对象了,包括我们为某一个特定的dom节点绑定事件,标签属性,内容的操作等,例如使用select2来修饰select,但是并不推荐在这里进行一些事件绑定或者dom操作,因为在这期间,Vue还要做一件非常重要的事情就是通过Vue自己的方式来标识每一个真实的dom节点,我们在vue里一般都是通过$els或者$refs来操作对应的dom元素,但是这期间正是标注所有元素的过程,很有可能会出一些意想不到的错误。

beforeMount:function(){
        //在挂载开始之前被调用:相关的 render 函数首次被调用。
    	console.log("挂载前")      //挂载前  
		console.log(this.demo);    //vue.js        
        console.log(this.attrcomputed); //sj.euv
        this.list();  //vue对象的methods方法中list事件调用    调用成功               
        console.log(this.$el);   //这个过程就是根据编译以后产生的虚拟dom结构来构造一个真实的dom结构
        //<div id="app">
            //<div>{{demo}}</div>
            //<div>{{attrcomputed}}</div>
            //<span @click="btn()">数据更新</span>
        //</div>
    },

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

mounted 见名知意,挂载,表示真实dom已经够早完毕,我们可以append到父容器当中来构造页面了,在这里我们就可以完成一些对于真实dom的操作,不论是直接访问dom的属性内容或者事件的绑定,都可以在这里放心大胆的做了,一般情况下我们不需要直接操作dom,Vue也不推荐这么做,但是这里你需要知道的事如果你有这种需求,完全可以在这里完成,挂载的过程就是将生成的真实DOM对象append到挂载点下面,就是appendChild的过程,这个时候的虚拟dom结构根生成出来的real dom结构一模一样,我们以后要操作的就是这个虚拟dom结构,就是前面根据模版生成出来的dom数据结构。

mounted:function(){
        //el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    	console.log("挂载成功")            
		console.log(this.demo);    //vue.js        
        console.log(this.attrcomputed); //sj.euv
        this.list();  //vue对象的methods方法中list事件调用    调用成功               
        console.log(this.$el);  //el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
        //<div id="app">
            //<div>vue.js</div>
            //<div>sj.euv</div>
            //<span>数据更新</span>
        //</div>
    },

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

beforeUpdate这个方法在整个生命周期之中也只被调用一次,在做什么呢,想一想上面所做的事情,上面是根据模版构造出来一个真实的dom对象,到现在他并没有跟我们的vue实例对象扯上关系,怎么通过我们的vue实例来影响到真实的dom对象呢,怎么把我们的数据绑定的真实dom当中了,以后我们只需要操作数据就可以影响到dom结构的渲染呢?在这个方法里,Vue同样依据前面的规则根据vue实例提供的数据在模版中的位置来重新生成一个虚拟dom数据结构,没错,你没看错,我们要生成两个虚拟dom,前一个dom只是dom结构,并没有绑定我们vue的属性数据,这一个dom是绑定了我们vue实例数据的dom结构,在这个dom生成的过程中,vue根据自己的语法规则,对比如指令,表达式之类的东西进行替换,生成一个新的虚拟dom结构,接下来我们要做什么,我想大家应该所料不错,没错,鼻孔朝天的那位同学说的很对,就是进行比较两个虚拟dom之间存在的差异。请不要走开,广告之后更加精彩。。。。。

beforeUpdate:function(){
        //数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
    	console.log("数据更新前")            
		console.log(this.demo);    //vue对象的data属性数据更新       
        console.log(this.attrcomputed); //新更据数性属atad的象对euv     
        console.log(this.$el);
        //<div id="app">
            //<div>vue对象的data属性数据更新</div>
            //<div>新更据数性属atad的象对euv</div>
            //<span>数据更新</span>
        //</div>
    },

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

update,接着上一集,我们继续吹,这个方法在我们整个生命周期之内会反复调用,你会发现,每一次对vue对象的变更都会触发update方法,他做了什么呢,他就是在反复的生成一个virtual dom,生成的新dom不断跟之前的dom结构进行比对,这里又一个比较高大上的比对算法,叫differ,我想在座各位同学是不是有一种恍然大悟的赶脚,前面几集我说过,Vue在beforeMount的时候会对每一个dom节点进行标记,他为了什么嘞? 你懂了没有呢?不懂去面壁,Vue对每一个节点进行标记就是为了更加快速准确的定位dom节点。。。

用一种更加清楚明了的总结方式就是代码:

// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])

// 2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])

// 4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上应用变更
patch(root, patches)
updated:function(){
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
        //当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
        //该钩子在服务器端渲染期间不被调用。
    	console.log("数据更新成功")            
		console.log(this.demo);    //vue对象的data属性数据更新       
        console.log(this.attrcomputed); //新更据数性属atad的象对euv     
        console.log(this.$el);
        //<div id="app">
            //<div>vue对象的data属性数据更新</div>
            //<div>新更据数性属atad的象对euv</div>
            //<span>数据更新</span>
        //</div>
    },

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

beforeDestroy:function(){
        //实例销毁之前调用。在这一步,实例仍然完全可用。
    	console.log("销毁前")            
		console.log(this.demo);          
        console.log(this.attrcomputed);        
        console.log(this.$el); 
    },

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

destroyed:function(){
        //Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
        console.log("销毁成功")            
        console.log(this.demo);          
        console.log(this.attrcomputed);        
        console.log(this.$el); 
    },

接下来我们做一个例子,看一下Vue中所有的生命周期怎么用的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    	span{
    		margin-top: 20px;
    		color: red;
    		display: block;
    	}
    </style>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <div>{{demo}}</div>
        <div>{{testtxt}}</div>
        <div>{{attrcomputed}}</div>
        <span @click="btn()">数据更新</span>
    </div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        demo:0,
        testtxt:'vue.js'
    },
    computed: {
        // 计算属性的 getter
        attrcomputed: function () {
          // `this` 指向 vm 实例
          return this.testtxt.split('').reverse().join('')
        }
    },
    beforeCreate:function(){
        //beforeCreate在官方文档描述中说,在做一些数据监视和事件初始化,这里有一个容易让人走偏的地方,就是事件初始化,其实就是为vue对象添加一些属性,就是methods中的一些函数全部作为vue对象的属性存在,Vue会讲所有的data数据和methods中的函数添加到创建的vue对象上面。

        //执行beforeCreate事件钩子(创建之前)的方法的时候,数据观测(比如data里面的变量)和事件配置(methods属性里面的方法和computed计算属性或者watch事件监听等)都没有被调用,所以在创建之前调用this.demo会显示undefined或者是调用this.list()等是会报错找不到这个方法的,因为还没有创建成功,所以调用不到,都是调用不到的。
    	console.log("创建前")     //创建前       
        console.log(this.demo);    //undefined        
		console.log(this.attrcomputed); //undefined
        this.list();   //Error in beforeCreate hook: "TypeError: this.list is not a function"               
		console.log(this.$el);
    },
    created:function(){
        //实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
    	console.log("创建成功")  //创建成功           
		console.log(this.demo);   //vue.js         
        console.log(this.attrcomputed); //sj.euv
        this.list();     //vue对象的methods方法中list事件调用  调用成功     
        console.log(this.$el); //undefined  vue对象还没有开始挂载到html上
    },
    beforeMount:function(){
        //在挂载开始之前被调用:相关的 render 函数首次被调用。
    	console.log("挂载前")      //挂载前  
		console.log(this.demo);    //vue.js        
        console.log(this.attrcomputed); //sj.euv
        this.list();  //vue对象的methods方法中list事件调用    调用成功               
        console.log(this.$el);   //这个过程就是根据编译以后产生的虚拟dom结构来构造一个真实的dom结构
        //<div id="app">
            //<div>{{demo}}</div>
            //<div>{{attrcomputed}}</div>
            //<span @click="btn()">数据更新</span>
        //</div>
    },
    mounted:function(){
        //el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
    	console.log("挂载成功")            
		console.log(this.demo);    //vue.js        
        console.log(this.attrcomputed); //sj.euv
        this.list();  //vue对象的methods方法中list事件调用    调用成功               
        console.log(this.$el);  //el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
        //<div id="app">
            //<div>vue.js</div>
            //<div>sj.euv</div>
            //<span>数据更新</span>
        //</div>
    },
    beforeUpdate:function(){
        //数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
    	console.log("数据更新前")            
		console.log(this.demo);    //vue对象的data属性数据更新       
        console.log(this.attrcomputed); //新更据数性属atad的象对euv     
        console.log(this.$el);
        //<div id="app">
            //<div>vue对象的data属性数据更新</div>
            //<div>新更据数性属atad的象对euv</div>
            //<span>数据更新</span>
        //</div>
    },
    updated:function(){
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
        //当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
        //该钩子在服务器端渲染期间不被调用。
    	console.log("数据更新成功")            
		console.log(this.demo);    //vue对象的data属性数据更新       
        console.log(this.attrcomputed); //新更据数性属atad的象对euv     
        console.log(this.$el);
        //<div id="app">
            //<div>vue对象的data属性数据更新</div>
            //<div>新更据数性属atad的象对euv</div>
            //<span>数据更新</span>
        //</div>
    },
    beforeDestroy:function(){
        //实例销毁之前调用。在这一步,实例仍然完全可用。
    	console.log("销毁前")            
		console.log(this.demo);          
        console.log(this.attrcomputed);        
        console.log(this.$el); 
    },
    destroyed:function(){
        //Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
        console.log("销毁成功")            
        console.log(this.demo);          
        console.log(this.attrcomputed);        
        console.log(this.$el); 
    },
    methods: {
    	btn(){
    		this.demo++;
    	},
        list(){
            console.log('vue对象的methods方法中list事件调用');
        }
    },
})
</script>

</html>

参考资料:http://www.cnblogs.com/fly_dragon/p/6220273.html

 http://www.cnblogs.com/chihaiping/p/6390886.html

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 41
码字总数 28448
作品 0
朝阳
Vue.js视频教程

Vue.js 1.0 免费中文视频教程在线观看和网盘下载地址收集 原文地址:http://phpecshop.blog.51cto.com/6296699/1834208 NideShop:基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小...

ch10mmt ⋅ 2016/08/04 ⋅ 0

Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。 一个 Vu...

逝岁月 ⋅ 04/18 ⋅ 0

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM vm.$data Vue 实例观察的数据对象。Vue 实例代理了对其 ...

逝岁月 ⋅ 04/19 ⋅ 0

人人都能懂的Vue源码系列(八)—initLifecycle

上篇文章,我们讲了vm._renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中,为大家讲解initLifecycle。 initLifeCycle方法用来初始化一些生...

淼淼真人 ⋅ 05/15 ⋅ 0

如何解释vue的生命周期才能令面试官满意?

当面试官问:“谈谈你对vue的生命周期的理解”,听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDes...

闰土大叔 ⋅ 04/14 ⋅ 0

人人都能懂的Vue源码系列(一)—Vue源码目录结构

阅读Vue的源码,或者阅读一个框架的源码,了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。 Vue各目录简介 Vue源码各个目录的详细介绍 熟悉每个模块具体的功能,对之后深...

淼淼真人 ⋅ 05/14 ⋅ 0

vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar ⋅ 04/17 ⋅ 0

太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在...

闰土大叔 ⋅ 06/08 ⋅ 0

Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY ⋅ 2017/03/27 ⋅ 0

使用 Mpvue 开发微信小程序的最佳实践

本文由 授权转发,转载需与GitChat联系。 原文链接 本文作者:美团点评 胡成全 前言 小程序面世一年多以来,给前端开发带来了巨大的影响,有移动应用的地方,就有小程序的踪迹。经过一年多的...

乌骑凤 ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 42分钟前 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 52分钟前 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部