当前位置：首页 > news >正文

【Vue篇】组件的武林绝学：状态风暴下的乾坤挪移术

news 来源：原创 2025/5/21 7:54:10

引言

🔍 Vue组件迷雾重重？
✧ Scoped如何实现样式隔离？
✧ Data为何必须是函数？
✧ 父子组件如何跨域通信？
✧ Props单向数据流如何破局？

🚀 本文直击组件化七大核心：
▸ 样式隔离原理 → 数据独立法则 → 父子通信协议
▸ Props校验黑盒 → 非父子通信方案 → 双向绑定内核
▸ $nextTick异步陷阱破解

💼 以「小黑记事本」组件化重构为实战样本，揭秘企业级开发规范。文末附事件总线+跨层通信秘籍，3分钟助你打通组件任督二脉！

🌟 若有所获，❤️⭐️📦三连助力，组件开发从此如臂使指！

一、Scoped样式隔离机制

1. 默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2. 代码演示

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script>
<style scoped>
</style>

BaseTwo.vue

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>
</style>

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

3.scoped原理

当前组件内标签都被添加data-v-hash值 的属性
css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

二、data必须是一个函数

1. data为什么要写成函数

一个组件的 data 选项必须是一个函数。

目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

2. 代码演示

BaseCount.vue

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {data: function () {return {count: 100,}},
}
</script><style>
.base-count {margin: 20px;
}
</style>

App.vue

<template><div class="app"><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount'
export default {components: {BaseCount,},
}
</script><style>
</style>

三、组件通信

1. 什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2. 组件之间如何通信

3. 组件关系分类

父子关系
非父子关系

4. 通信解决方案

5. 父子通信流程

父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新

6. 父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件 <Son></Son></div>
</template><script>
import Son from './components/Son.vue'
export default {name: 'App',data() {return {myTitle: '学前端，就来黑马程序员',}},components: {Son,},
}
</script><style>
</style>

子组件Son.vue

<template><div class="son" style="border:3px solid #000;margin:10px">我是Son组件</div>
</template><script>
export default {name: 'Son-Child',
}
</script><style></style>

父向子传值步骤

给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值

7. 子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

$emit触发事件，给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数

四、Props vs Data：单向数据流原则

1. 什么是props

（1）Props 定义

组件上 注册的一些 自定义属性

（2）Props 作用

向子组件传递数据

（3）特点

可以传递 任意数量 的prop
可以传递 任意类型 的prop

（4）代码演示

父组件App.vue

<template><div class="app"><UserInfo:username="username":age="age":isSingle="isSingle":car="car":hobby="hobby"></UserInfo></div>
</template><script>
import UserInfo from './components/UserInfo.vue'
export default {data() {return {username: '小帅',age: 28,isSingle: true,car: {brand: '宝马',},hobby: ['篮球', '足球', '羽毛球'],}},components: {UserInfo,},
}
</script><style>
</style>

子组件UserInfo.vue

<template><div class="userinfo"><h3>我是个人信息组件</h3><div>姓名：</div><div>年龄：</div><div>是否单身：</div><div>座驾：</div><div>兴趣爱好：</div></div>
</template><script>
export default {}
</script><style>
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo > div {margin: 20px 10px;
}
</style>

2. props校验

（1）思考

组件的props可以乱传吗？

（2）作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

（3）语法

类型校验
非空校验
默认值
自定义校验

（4）代码演示

App.vue

<template><div class="app"><BaseProgress :w="width"></BaseProgress></div>
</template><script>
import BaseProgress from './components/BaseProgress.vue'
export default {data() {return {width: 30,}},components: {BaseProgress,},
}
</script><style>
</style>

BaseProgress.vue

<template><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><span>{{ w }}%</span></div></div>
</template><script>
export default {props: ['w'],
}
</script><style scoped>
.base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}
.inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px;
}
.inner span {position: absolute;right: 0;top: 26px;
}
</style>

3. props校验完整写法

（1）语法

props: {校验的属性名: {type: 类型,  // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},

（2）代码实例

<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},},
}
</script>

（3）注意

default和required一般不同时写（因为当时必填项时，肯定是有值的）
default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

4. props&data：单向数据流

（1）共同点

都可以给组件提供数据

（2）区别

data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

（3）单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

（4）代码演示

App.vue

<template><div class="app"><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components:{BaseCount},data(){},
}
</script><style></style>

BaseCount.vue

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改  （谁的数据 谁负责）data () {return {count: 100,}},// 2.外部传过来的数据 不能随便修改//props: {//  count: {//    type: Number,//  }, //}
}
</script><style>
.base-count {margin: 20px;
}
</style>

（4）口诀

谁的数据谁负责

五、综合案例-小黑记事本(组件版)

1. 需求说明

拆分基础组件
渲染待办任务
添加任务
删除任务
底部合计和清空功能
持久化存储

2. 拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)

3. 列表渲染

思路分析：

提供数据：提供在公共的父组件 App.vue
通过父传子，将数据传递给TodoMain
利用v-for进行渲染

4. 添加功能

思路分析：

收集表单数据 v-model
监听时间 （回车+点击都要进行添加）
子传父，将任务名称传递给父组件App.vue
父组件接受到数据后进行添加 unshift(自己的数据自己负责)

5. 删除功能

思路分析：

监听时间（监听删除的点击）携带id
子传父，将删除的id传递给父组件App.vue
进行删除 filter (自己的数据自己负责)

6. 底部功能及持久化存储

思路分析：

底部合计：父组件传递list到底部组件 —>展示合计
清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
持久化存储：watch监听数据变化，持久化到本地

TodoHeader.vue

<template><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> {{ list.length }} </strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任务</button></footer>
</template><script>
export default {props: {list: {type: Array,},},methods:{clear(){this.$emit('clear')}}
}
</script><style>
</style>

TodoMain.vue

<template><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todoName" @keyup.enter="handleAdd"/><button class="add" @click="handleAdd">添加任务</button></header>
</template><script>
export default {data(){return {todoName:''}},methods:{handleAdd(){// console.log(this.todoName)this.$emit('add',this.todoName)this.todoName = ''}}
}
</script><style></style>

TodoFooter.vue

<template><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span><label>{{ item.name }}</label><button class="destroy" @click="handleDel(item.id)"></button></div></li></ul></section>
</template><script>
export default {props: {list: {type: Array,},},methods: {handleDel(id) {this.$emit('del', id)},},
}
</script><style>
</style>

App.vue

<template><!-- 主体区域 --><section id="app"><TodoHeader @add="handleAdd"></TodoHeader><TodoMain :list="list" @del="handelDel"></TodoMain><TodoFooter :list="list" @clear="clear"></TodoFooter></section>
</template><script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'// 渲染功能：
// 1.提供数据： 提供在公共的父组件 App.vue
// 2.通过父传子，将数据传递给TodoMain
// 3.利用 v-for渲染// 添加功能：
// 1.手机表单数据  v-model
// 2.监听事件（回车+点击都要添加）
// 3.子传父，讲任务名称传递给父组件 App.vue
// 4.进行添加 unshift（自己的数据自己负责）
// 5.清空文本框输入的内容
// 6.对输入的空数据 进行判断// 删除功能
// 1.监听事件（监听删除的点击） 携带id
// 2.子传父，讲删除的id传递给父组件的App.vue
// 3.进行删除filter（自己的数据 自己负责）// 底部合计：父传子  传list 渲染
// 清空功能：子传父  通知父组件 → 父组件进行更新
// 持久化存储：watch深度监视list的变化 -> 往本地存储 ->进入页面优先读取本地数据
export default {data() {return {list: JSON.parse(localStorage.getItem('list')) || [{ id: 1, name: '打篮球' },{ id: 2, name: '看电影' },{ id: 3, name: '逛街' },],}},components: {TodoHeader,TodoMain,TodoFooter,},watch: {list: {deep: true,handler(newVal) {localStorage.setItem('list', JSON.stringify(newVal))},},},methods: {handleAdd(todoName) {// console.log(todoName)this.list.unshift({id: +new Date(),name: todoName,})},handelDel(id) {// console.log(id);this.list = this.list.filter((item) => item.id !== id)},clear() {this.list = []},},
}
</script><style>
</style>

六、非父子通信-event bus 事件总线

1. 作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2. 步骤

创建一个都能访问的事件总线（空Vue实例）

import Vue from 'vue'
const Bus = new Vue()
export default Bus

A组件（接受方），监听Bus的 $on事件

created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
}

B组件（发送方），触发Bus的$emit事件
```
Bus.$emit('sendMsg', '这是一个消息')
```

3. 代码示例

EventBus.js

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(接受方)

<template><div class="base-a">我是A组件（接收方）<p>{{msg}}</p>  </div>
</template><script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},
}
</script><style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

BaseB.vue(发送方)

<template><div class="base-b"><div>我是B组件（发布方）</div><button>发送消息</button></div>
</template><script>
import Bus from '../utils/EventBus'
export default {
}
</script><style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

App.vue

<template><div class="app"><BaseA></BaseA><BaseB></BaseB> </div>
</template><script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {components:{BaseA,BaseB}
}
</script><style></style>

七、非父子通信-provide&inject

1. 作用

跨层级共享数据

2. 场景

3. 语法

父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}

2.子/孙组件 inject获取数据

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

4. 注意

provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
子/孙组件通过inject获取的数据，不能在自身组件内修改

八、v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和 input事件的合写

<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

2.作用：

提供数据的双向绑定

数据变，视图跟着变 :value
视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

4.代码示例

<template><div class="app"><input type="text"  /><br /> <input type="text" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

九、表单类组件封装

1. 需求目标

实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）

①父传子：数据应该是父组件props 传递过来的，拆解v-model 绑定数据

②子传父：监听输入，子传父传值给父组件修改

2. 代码演示

App.vue

<template><div class="app"><BaseSelect></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

BaseSelect.vue

<template><div><select><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {
}
</script><style>
</style>

十、v-model简化代码

1. 目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2. 如何简化：

v-model其实就是 :value和@input事件的简写

子组件：props通过value接收数据，事件触发 input
父组件：v-model直接绑定数据

3. 代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

父组件

<BaseSelect v-model="selectId"></BaseSelect>

十一、.sync修饰符

1. 作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

2. 场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3. 本质

.sync修饰符就是 :属性名 和 @update:属性名 合写

4. 语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>

子组件

props: {visible: Boolean
},this.$emit('update:visible', false)

5. 代码示例

App.vue

<template><div class="app"><button @click="openDialog">退出按钮</button><BaseDialog :isShow="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from './components/BaseDialog.vue'
export default {data() {return {isShow: false,}},components: {BaseDialog,},
}
</script><style>
</style>

BaseDialog.vue

<template><div class="base-dialog-wrap" v-show="isShow"><div class="base-dialog"><div class="title"><h3>温馨提示：</h3><button class="close">x</button></div><div class="content"><p>你确认要退出本系统么？</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {props: {isShow: Boolean,}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

十二、ref和$refs

1. 作用

利用ref 和 $refs 可以用于获取 dom 元素 或 组件实例

2. 特点：

查找范围 → 当前组件内(更精确稳定)

3. 语法

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {console.log(this.$refs.chartRef)
}

4. 注意

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子

5. 代码示例

App.vue

<template><div class="app"><BaseChart></BaseChart></div>
</template><script>
import BaseChart from './components/BaseChart.vue'
export default {components:{BaseChart}
}
</script><style>
</style>

BaseChart.vue

<template><div class="base-chart-box" ref="baseChartBox">子组件</div>
</template><script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'export default {mounted() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelect('.base-chart-box'))// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例',},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],})},
}
</script><style scoped>
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
</style>

十三、异步更新 & $nextTick

1. 需求

编辑标题, 编辑框自动聚焦

点击编辑，显示编辑框
让编辑框，立刻获取焦点

2. 代码实现

// 显示输入框
this.isShowEdit = true  
// 获取焦点
this.$refs.inp.focus()

3. 问题

“显示之后”，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

4. 解决方案

$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(() => {this.$refs.inp.focus()
})

注意：$nextTick 内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

📜 以上就是 【Vue篇】组件的武林绝学：状态风暴下的乾坤挪移术 的核心奥义！

通过本文的修炼，你已掌握：
✨ 组件内功心法：Scoped样式结界、Data函数化形、Props单向数据流
✨ 通信乾坤术：父子组件传音入密、事件总线凌波微步、跨层Provide/Inject虚空引渡
✨ 绝杀实战：小黑记事本组件涅槃、表单双向绑定秘术、$nextTick时空校准法则

🔍 招式存疑？文中表述欠妥之处，欢迎各位少侠在评论区「剑气留痕」，共同论剑切磋！
💡 进阶求索？若有组件化「奇经八脉」待打通，或遭遇「状态风暴」难题，速速留言共探玄机！

🗡️ 你的每一记 ❤️点赞｜⭐收藏｜📤分享 ，皆为吾辈持续精进「Vue真经」的绝世内力！

详解MySQL 的 binlog，redo log，undo log

FreeSWITCH 纯内网配置

第10天-Python操作MySQL数据库全攻略：从基础连接到高级应用

Java中的集合详解

跨境业务服务器部署实战 - 低延迟架构设计

【SPIN】PROMELA数据与程序结构详解（SPIN学习系列--7）

GitHub 自动认证教程

⼀个并发访问量⽐较⼤的key在某个时间过期，在redis中这个时间过期什么意思

thread 的mutex优化

大数据相关操作

BPMN.js编辑器设计器与属性面板数据交互

Fluent Bit持久化配置指南：保障日志不丢失的关键策略

uthash是一个非常轻量级的库

链表的面试题8之环形链表

SpringBoot 商城系统高并发引起的库存超卖库存问题乐观锁悲观锁抢购商品秒杀高并发

kafka入门(二)

Golang的文件上传与下载

【北邮通信系统建模与仿真simulink笔记】（1）主要用到的模块库介绍

Linux：面试题

jenkins授权管理.

港股上市首日大涨，宁德时代“新动力”何在？曾毓群详谈零碳科技布局

丹泽尔·华盛顿惊喜收获戛纳终身成就奖

上海蝉联全国中小企业发展环境评估综合排名第一

瑞幸首度牵手成都国际非遗节，用一杯饮品将非遗之美推向全国

体育文化赋能国际交流，上海黄浦举办国际友人城市定向赛

美国务卿与以色列总理通话，讨论加沙局势

引言

一、Scoped样式隔离机制

1. 默认情况：

2. 代码演示

3.scoped原理

二、data必须是一个函数

1. data为什么要写成函数

2. 代码演示

三、组件通信

1. 什么是组件通信？

2. 组件之间如何通信

4. 通信解决方案

5. 父子通信流程

6. 父向子通信代码示例

7. 子向父通信代码示例

四、​​Props vs Data：单向数据流原则​

1. 什么是props

（1）Props 定义

（2）Props 作用

（3）特点

（4）代码演示

2. props校验

（1）思考

（2）作用

（3）语法

（4）代码演示

3. props校验完整写法

（1）语法

（2）代码实例

（3）注意

4. props&data：单向数据流

（1）共同点

（2）区别

（3）单向数据流：

（4）代码演示

（4）口诀

五、综合案例-小黑记事本(组件版)

1. 需求说明

2. 拆分基础组件

3. 列表渲染

4. 添加功能

5. 删除功能

6. 底部功能及持久化存储

六、非父子通信-event bus 事件总线

1. 作用

2. 步骤

3. 代码示例

七、非父子通信-provide&inject

1. 作用

2. 场景

3. 语法

4. 注意

八、v-model原理

1.原理：

2.作用：

3.注意

4.代码示例

5.v-model使用在其他表单元素上的原理

九、表单类组件封装

1. 需求目标

2. 代码演示

十、v-model简化代码

1. 目标：

2. 如何简化：

3. 代码示例

十一、.sync修饰符

1. 作用

2. 场景

3. 本质

4. 语法

5. 代码示例

十二、ref和$refs

1. 作用

2. 特点：

3. 语法

4. 注意

5. 代码示例

十三、异步更新 & $nextTick

1. 需求

2. 代码实现

四、Props vs Data：单向数据流原则