一、监听数据变化的三种形式
假设我们需要提供两个输入框，分别输入姓和名，然后自动拼接为姓名。这样，我们就需要监听输入框的数据变化，让完整的姓名跟随输入的变动而变化。我们可以使用以下三种方式：
1、结合DOM事件使用mothod来监听数据变化html代码：使用keyup事件来监听数据的改变。
<div> <input type="text" v-model="firstname" @keyup="getFullname"> <input type="text" v-model="lastname" @keyup="getFullname"> <input type="text" v-model="fullname"> </div>js代码：
new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { getFullname(){ this.fullname = (this.firstname + ' ' + this.lastname).trim(); return this.fullname; } } }); 2、使用watch侦听器类似methods的使用，我们可以在Vue实例中使用watch来监听表达式数据的变化，并执行对应的回调函数。
html代码：
<div> <input type="text" v-model="firstname"> <input type="text" v-model="lastname"> <input type="text" v-model="fullname"> </div>js代码：
new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, watch: { firstname: function(){ this.fullname = (this.firstname + ' ' + this.lastname).trim(); }, lastname: function(){ this.fullname = (this.firstname + ' ' + this.lastname).trim(); } } });可以发现，watch监听器以要监听的数据表达式作为键，值为处理数据变化后的函数。
3、使用计算属性computed直接看效果：
html代码不变，注意js代码：
new Vue({ el: '#app', data: { firstname: '', lastname: '' }, computed: { fullname: function(){ return (this.firstname + ' ' + this.lastname).trim(); } } });首先去掉了data中的fullname属性，取而代之的是computed中的fullname属性。计算属性需要返回一个值作为属性值，且能自动监听内部依赖的变化，自动更新属性值，并对值进行存储，以供多次调用。
4、三者的区别watch侦听器更像是专门用于监听数据变化的处理方法，但容易造成滥用，而methods一般用于处理业务逻辑，即相同的逻辑可以直接调用。计算属性很直接，将需要的属性进行计算处理后再进行调用。
二、webpack的简单使用 1、静态资源的处理对于Web项目来说，包含各式各样的静态资源页面，且格式种类繁多，如：
js
css
image
模块&组件
静态资源多而杂的时候，页面加载效率就低，且难以处理好资源之间的依赖关系。
所以我们需要对资源进行整合压缩，对于小图片来说还可以使用图片精灵图（image sprite）、转码为Base64字节码等。
而依赖关系除了手动处理我们还可以使用一些工具。
而以上问题我们都可以使用webpack工具进行解决，如文件格式转化、压缩整合等。下面我们将结合Vue来使用webpack。
2、webpack的配置 场景请看以下场景：
我们在Node中使用jquery来改变表格的样式，其中，我们还使用了大多浏览器不支持的es6语法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table rules="all"> <thead> <td>header1</td> <td>header2</td> <td>header3</td> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> </tbody> </table> <script type="text/javascript" src="http://www.likecs.com/dist/main.js"></script> </body> </html> import $ from 'jquery';//es6语法：等价于const $ = require('jquery'); $(function(){ $('#tab > thead').css({ backgroundColor: '#bdccc2' }); $('#tab > tbody > tr:even').css({ backgroundColor: '#c1f1cd' }); $('#tab > tbody > tr:odd').css({ backgroundColor: '#f3ffab' }); });这样，当我们直接访问这个页面时就会报错。现在我们使用webpack对mian.js进行打包处理，并保存到新的目录文件中，如: \dist\bundle.js
在使用之前，我们需要先安装webpack。
安装 # 全局安装 npm install webpack -g # 本地开发环境安装 npm install webpack --save-dev # 4.0以上版本还需要安装 npm install --save-dev webpack-cli 打包使用命令行工具执行：
webpack ./src/mian.js -o ./dist/bundle.js然后main.js就会被打包成新的bundle.js文件，我们在页面中引用这个js，就可以看到jquery做出的样式效果：
我们发现，webpack为我们做了以下几点：
打包压缩js文件（main.js）
自动处理包之间的依赖（jqurey）
改进：配置文件