1. 模块化介绍
随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），更不要说”模块”（module）了。所幸当前ECMAScript标准第六版，将正式支持”类”和”模块”，在现有的运行环境中，实现了”模块”的效果。
模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。
模块化开发的4点好处：
- 避免变量污染，命名冲突
- 提高代码复用率
- 提高维护性
- 依赖关系的管理
通俗点说，ref就是 vue 提供的获取DOM的属性，我们在页面元素上添加ref="自定义名"，然后就可以在JS中通过vue实例.$refs.自定义名 获取到绑定的节点或组件实例对象。
示例：
<html>
<body>
<div id="app">
<p ref="select">日照香炉生紫烟</p>
<button @click="getEl">点击获取p标签</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
getEl(){
console.log('获取的p标签', this.$refs.select); // <p>...</p>
}
}
})
</script>
</body>
</html>如果我们的元素是通过v-for循环生成的，那么获取在循环元素上绑定的ref属性获取到的将是一个节点数组：
<html>
<body>
<div id="app">
<!-- v-for ref 可以获取节点数组 -->
<ul>
<li v-for="n in 10" ref="list">LI_{{n}}</li>
</ul>
<button @click="getEl">点击获取li标签</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
getEl(){
console.log(this.$refs.list); // [li_1, li_2, ...]
}
}
})
</script>
</body>
</html>将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
简单来说，这个API就是帮助我们在数据更新后可以立即通过页面节点获取到最新的数据，示例：
<div id="app">
<p ref="msg">{{ message }}</p>
<button @click="change">修改msg</button>
</div>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data(){
return {
message: 'world'
}
},
methods: {
change(){
this.message = 'hello'
console.log('立刻获取页面更新后的数据，不成功', this.$refs.msg.innerText)
// 可以让元素获取到 内容更新之后的值
this.$nextTick(() => {
console.log('使用$nextTick', this.$refs.msg.innerText)
})
}
}
})
</script>
