Vue基础

Vue简介

Vue是什么

是一套用于构建用户界面的渐进式JavaScript框架

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件

渐进式：Vue可以自底向上逐层的应用 （从简单应用到复杂应用就是渐进式）

Vue特点：

1、采用组件化模式，提高代码复用率、且让代码更好维护

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

初始Vue

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

      const vm = new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用
                name: '我恁爹'
            }
        });

2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

<h1>Hello,{{name}}</h1>

3、root容器里的代码被称为【Vue模板】

4、Vue实例和容器是一 一对应的

5、真实开发中只有一个Vue实例，并且会配合着组件一起使用

6、{{XXX}}中的XXX要写js表达式，且XXX可以自动读取到data中的所有属性

7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

Vue模板

插值语法

功能: 用于解析标签体内容

语法: {{xxx}}

xxxx 会作为 js 表达式解析，且可以直接读到data中的所有属性

例：

<h3>你好，{{name}}</h3>

指令语法

功能: 解析标签属性、解析标签体内容、绑定事件。。。

语法：v-bind:href = 'xxxx'

xxxx 会作为 js 表达式被解析 （可以简写为：href=“xxxx”）

说明：Vue 中有很多的指令，形式都是v-？？？，此处只是用 v-bind 举个列

<a v-bind:href="url">点我去尚硅谷学习</a>

数据绑定方式

单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href

特点：数据只能从 data 流向页面

<input type="text" v-bind:value="name">

双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"

特点：数据不仅能从 data 流向页面，还能从页面流向 data

注：双向绑定一般都应用在表单元素上（如input、select）

v-model：value可以简写为v-model，因为v-model默认收集的就是value值

<input type="text" v-model:value="name">

el和data的两种写法

el

1、new Vue时配置el属性

  new Vue({
            el: '#root',//第一种
            data: {
                name: 'sb'
            }
        })

2、先创建Vue 实例，随后通过vm.$mount('#root')指定el的值

v.$mount('#root') //第二种

data

1、对象式

  data的第一种写法，对象式
             data: {
                 name: 'sb'
            }

2、函数式

使用组件时，data必须使用函数式，否则会报错

//data的第二种写法，函数式
            data() {
                console.log(this);
                return {
                    name: 'sb'
                }
            }

注：由Vue管理的函数，一定不要写箭头函数，因为箭头函数的this指向不是Vue实例

mvvm模型

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象

注：data中所有的属性，最后都出现在了vm身上

vm身上所有的属性及Vue原型上的所有属性，在Vue模板中都可以直接使用

数据代理

Object.defineProperty()方法

        let number = 18;
        let person = {
            name: 'sv',
            sex: 'man'
        }
        Object.defineProperty(person, 'age', {

            // enumerable: true, //控制属性是否可以枚举（遍历），默认值是false
            // writable: true, //控制属性是否可以被修改，默认值是false
            // configurable: true //控制属性是否可以被删除，默认值是false
            //当有人读取person对象的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了');
                return number;
            },

            //当有人修改person对象的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性，且值是', value);
                number = value;
            }
        })

通过一个对象对另一个对象中属性的操作（读/写）就是数据代理

例：通过obj2操作obj1中的x

        let obj1 = {
            x: 100
        }
        let obj2 = {
            y: 200

        }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x
            },
            set(value) {
                obj1.x = value
            }
        })

Vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

好处：更加方便的操作data中的数据

原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性

事件处理

事件的基本使用

语法：使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名

事件的回调需配置在methods对象中，最终会在vm上

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象

@click=“demo” 和 @click=“demo（$event）” 效果一样，但后者可以传参

   <div id="root">
        <h2>你是来{{name}}的吧！</h2>
        <button v-on:click="showInfo1">需要手纸吗(不传参)</button>
        <button @click="showInfo2($event,'老六')">需要手纸吗（传参）</button>
    </div>

  new Vue({
            el: '#root',
            data: {
                name: '拉屎'
            },
            methods: {
                showInfo1() {
                    alert('叫爸爸！')
                },
                showInfo2(event, number) {
                    alert(number + '叫爸爸！！')
                }
            }
        })

事件修饰符

prevent：阻止默认事件（常用）

<a href="http://www.baidu.com" @click.prevent="showInfo">快张嘴</a>

stop：阻止事件冒泡（常用）

<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">给我张开！</button>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="http://www.baidu.com" @click.stop.prevent="showInfo"></a> -->
</div>

once：事件只触发一次（常用）

<button @click.once="showInfo">我最后说一次！张开！</button>

capture：使用事件的捕获模式（外层执行）

<div class="box1" @click.capture="showMsg('靓仔')">
    div1
    <div class="box2" @click="showMsg('吊毛')">div2</div>
</div>

self：只有event.target是当前操作的元素时才触发的元素（也可以阻止冒泡）

<div class="demo1" @click.self="showInfo">
    <button @click.stop="showInfo">给我张开！</button>
</div>

passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!-- scroll是给滚动条添加滚动事件，wheel是给滚轮添加滚动事件 -->
<ul class="list" @wheel.passive="demo">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

     new Vue({
            el: '#root',
            data: {
                name: '小飞棍'
            },
            methods: {
                showInfo(e) {
                    alert('啊！！！')
                },
                showMsg(msg) {
                    console.log(msg);
                },
                demo() {
                    for (let i = 0; i < 1000000; i++) {
                        console.log('#');
                    }
                    console.log('一滴都没了');
                }
            }
        })

键盘事件

1、Vue中常用的按键别名：

回车：enter

删除：delete（捕获’删除‘和’退格’键）

退出：esc

空格：space

换行：tab（特殊，必须配合keydown去使用）

上：up

下：down

左：left

右：right

2、Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3、系统修饰键（特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，在按下其他键（可以固定一个键生效，例如@keyup.ctrl.y），随后释放其他键，事件才被释放

配合keydown使用：正常触发事件

4、也可以使用keyCode去指定具体的按键（不推荐）

5、Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

计算属性

定义：要用的属性不存在，要通过已有的属性计算得来

原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行？

1、初次读取时执行一次

2、当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高

注：

1、计算属性最终都会出现在vm上，直接读取使用即可

2、如果计算属性要被修改，那必须写set函数去响应修改，且set中引起计算时依赖的数据发生改变

    <div id="root">
        姓：<input type="text" v-model="firstName"><br> 
        名：<input type="text" v-model="lastName"><br> 
        全名：<span>{{fullName}}</span>
    </div>

        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName: {
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用？1.初次读取fullName时 2、所依赖的数据发生变化时
                    get() {
                        //此处的this是vm
                        return this.firstName + '-' + this.lastName
                    },
                    //set什么时候调用？当fullName被修改时
                    set(value) {
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })

只考虑读取不考虑修改的时候就可以使用简写形式

        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName() {
                    return this.firstName + '-' + this.lastName
                }
            }
        })

监视属性watch

当被监视的属性变化时，回调函数自动调用，进行相关操作

    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

监视的属性必须存在，才能进行监视！！

监视的两种方法：

new Vue时传入watch配置

 const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '冻人'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
             watch: {
                 isHot: {
                     handler(newValue, oldValue) {
                         // immediate:true,//初始化时让handler调用一下 
                         console.log('isHot被修改了', newValue, oldValue);
                     }
                 }
             }
        })

通过vm.$watch监视

        vm.$watch('isHot', {
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        })

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）

配置deep：true可以监测对象内部值改变（多层）

注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据数据的具体结构，决定是否采用深度监视

watch简写

            watch: {
                isHot(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue);
                }
            }

vm.$watch简写

        vm.$watch('isHot', function(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        })

computed和watch之间的区别

1、computed能完成的功能，watch都可以完成

2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

1、所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

2、所有不被Vue所管理的函数（定时器的回调、ajax的回调等），最好写成箭头函数，这样this的指向才是vm 或 组件实例

绑定样式

class样式

语法： :class="xxx"

xxx可以是字符串、对象、数组（这三个数据类型是指在vm的data中存储的数据类型）。

字符串写法适用于：类名不确定，要动态获取。

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

 mood: 'normal',

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<div class="basic" :class="classArr">{{name}}</div>

classArr: ['atguigu1', 'atguigu2', 'atguigu3'],

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

<div class="basic" :class="classObj">{{name}}</div>

classObj: {
     atguigu1: false,
     atguigu2: false,
},

style样式

语法：:style="{fontSize: xxx}"

其中xxx是动态值

<div class="basic" :style="styleObj">{{name}}</div>

styleObj: {
    fontSize: '40px',
    color: 'red',
},

语法：:style="[a,b]"是（数组对象）

其中a、b是样式对象。

<div class="basic" :style="styleArr">{{name}}</div>

styleArr: [{
    fontSize: '40px',
    color: 'blue',
}, {
    backgroundColor: 'gray'
}]

条件渲染

v-if

写法：

(1).v-if="表达式"

<h2 v-if="false">欢迎来到{{name}}</h2>

(2).v-else-if="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>

(3).v-else="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能插入其他元素），v-else-if、v-else不能单独使用，要配合v-if一起使用。

v-show

语法：v-show="表达式"

<h2 v-show="false">欢迎来到{{name}}</h2>

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-if与template的配合使用，template不影响结构，渲染时自动脱掉

<template v-if="n === 1">
        <h2>你好</h2>
        <h2>尚硅谷</h2>
        <h2>北京</h2>
</template>

基本列表

v-for指令（遍历）

用于展示列表数据

语法：v-for="(item, index) in xxx" :key="yyy"

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。

列表过滤（案例）

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

watch（监视属性）实现

          new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ],
                filPerons:[]
            },
            watch:{
                keyWord:{
                    immediate:true,
                    handler(val){
                        this.filPerons = this.persons.filter((p)=>{
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })

computed（计算属性）实现

        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [
                    {id: '001',name: '马冬梅',age: 19,sex: '女'}, 
                    {id: '002',name: '周冬雨',age: 20,sex: '女'}, 
                    {id: '003',name: '周杰伦',age: 21,sex: '男'}, 
                    {id: '004',name: '温兆伦',age: 22,sex: '男'}
                ]
            },
            computed: {
                filPerons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })

列表排序（案例）

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
                <input type="text">
            </li>
        </ul>
    </div>

        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                sortType: 0, //0原顺序 1降序 2升序
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 30,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 31,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 18,
                    sex: '男'
                }, {
                    id: '004',
                    name: '温兆伦',
                    age: 19,
                    sex: '男'
                }]
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                        //判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
                }
            }
        })

Vue监视数据的原理

vue会监视data中所有层次的数据。

如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value)

或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

注册过滤器

Vue.filter(name,callback) 或 new Vue{filters:{}}

使用过滤器

{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

内置指令

学过的指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令

作用：向其所在的节点中渲染文本内容。

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令

作用：向指定节点中渲染包含html结构的内容。

与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令

跳过其所在节点的编译过程。

可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

定义语法：

局部指令：

new Vue({      directives:{指令名:配置对象} })                    

或

new Vue({ directives{指令名:回调函数} })

全局指令（new Vue外）：

Vue.directive(指令名,配置对象)

或

Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

注：一般来说，bind和update中的内容基本一致

例：创建一个fbind自定义属性

 fbind: {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }

备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名，出现这种情况使用引号将名字括住，不然会报错。

生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。

生命周期分析

1. 初始化显示

beforeCreate()数据代理、数据监测前

此时，无法通过vm访问到data中的数据、methods中的方法

created()数据代理、数据监测后

此时，可以通过vm访问到打data的数据、methods中配置的方法

beforeMount()虚拟DOM转为真实DOM前

此时：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作都不奏效

mounted()虚拟DOM转为真实DOM后

此时：页面呈现的是经过Vue编译的DOM结构，所有对DOM的操作都奏效（尽量避免操作），一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件

1. 更新状态: this.xxx = value

beforeUpdate()数据更新前

此时，数据是新的，页面是旧的。即：页面和数据未保持同步

updated()数据更新后

此时，数据与页面都是新的。即：页面和数据保持同步

销毁 vue 实例: vm.$destory()

beforeDestory()

此时：vm中所有的data、methods、指令等都处于可用状态（可用但不再进行数据更新），马上执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

destoryed()

常用的生命周期钩子

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。