第四节：定义一个vue实例的4个常用选项

上一节，我们讲过如何创建一个 Vue 实例，仅需 4 步走：

我们知道，定义一个Vue实例的参数有 el（指定挂载的DOM元素）， data（实例的数据），上一节讲过除了这两个之外，还可以定义其他参数。今天，我们就来学习在开发中，我们要怎么定义一个vue实例才能满足我们的需要？

下面，我们先用上一节的知识，先创建一个Vue实例：

1. <div id="app"></div>
   
2.   <script>
   
3.   let vm = new Vue({
   
4.     //挂载元素
   
5.     el:'#app',
   
6.     //实例vm的数据
   
7.     data:{}
   
8.   });
   
9.   </script>

复制代码

很简单，轻松搞掂，接下来，就用这个实例来展开讲解。

我们就具体讲一下定义一个vue实例会用到的4个常用参数选项，不常用的选项，咱先不管它（后面有需要会补充）。 因为学会这4个，就可以满足基本的开发需要了。

filters  过滤器

第一个要讲的是过滤器filters选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：

1. let vm = new Vue({
   
2.   //挂载元素
   
3.   el:'#app',
   
4. 
   
5.   //实例vm的数据
   
6.   data:{
   
7.     num1:33.141,
   
8.     num2:46.212,
   
9.     num3:78.541
   
10.   }
    
11. });

复制代码

num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：

1. <div id="app">
   
2.   数字1：{{ num1 }}<br>
   
3.   数字2：{{ num2 }}<br>
   
4.   数字3：{{ num3 }}
   
5. </div>

复制代码

利用上节讲到的双大括号{{  }}渲染出来，很简单。

突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。

这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用：

1. let vm = new Vue({
   
2.   //挂载元素
   
3.   el:'#app',
   
4.   //实例vm的数据
   
5.   data:{
   
6.     num1:33.141,
   
7.     num2:46.212,
   
8.     num3:78.541
   
9.   },
   
10.   //过滤器
    
11.   filters:{
    
12.     toInt(value){
    
13.     return parseInt(value);
    
14.     }
    
15.   }
    
16.   });

复制代码

相信大家都注意到了，参数对象除了 el和 data属性之外，还多了一个 filters属性，它的值也是一个对象，里面定义了一个叫 toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

如果 toInt( )函数的写法你看起来觉得陌生的话，这样写你会不会觉得熟悉很多：

1. //过滤器
   
2. filters:{
   
3.   toInt:function(value){
   
4.   return parseInt(value);
   
5.   }
   
6. }

复制代码

这是ES5的语法，我们后面的教程都会用ES6的最新写法，如果你还不了解，建议先学习ES6教程的知识。

我们回到过滤器filters，接着讲：定义完filters属性后，我们怎么用呢？

1. <div id="app">
   
2.   数字1：{{ num1 | toInt}}<br>
   
3.   数字2：{{ num2 | toInt}}<br>
   
4.   数字3：{{ num3 | toInt}}
   
5.   </div>

复制代码

也很简单，如上面代码所示，通过管道符  | 把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。

我们运行后得到结果：

computed  计算属性  

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。

比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

1. let vm = new Vue({
   
2.   //挂载元素
   
3.   el:'#app',
   
4.   //实例vm的数据
   
5.   data:{
   
6.     num1:1,
   
7.     num2:3,
   
8.     num3:6
   
9.   },
   
10.   //计算属性
    
11.   computed:{
    
12.     sum(){
    
13.     return this.num1+this.num2+this.num3
    
14.     }
    
15.   }
    
16. });

复制代码

计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：

1. <div id="app">
   
2.   总和：{{ sum }}
   
3. </div>

复制代码

计算属性computed用法更简洁，仅需 {{ sum }}就能读取到它的计算结果：1+3+6结果应该为10。

需要注意的是，sum的值是依赖data中的数据num1，num2，num3的， 一旦它们发生了变化，sum的值也会自动更新。

我们试一下，通过chrome控制台把num1的值从1变成2，再看看sum的结果会是多少？

methods  方法

顾名思义，在methods中，我们可以定义一些方法，供组件使用。

比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。

1. let vm = new Vue({
   
2.   //挂载元素
   
3.   el:'#app',
   
4.   //实例vm的数据
   
5.   data:{
   
6.     a:0
   
7.   },
   
8.   //方法
   
9.   methods:{
   
10.     plus(){
    
11.     return this.a++;
    
12.     }
    
13.   }
    
14. });

复制代码

定义一个 plus( )的方法在methods中，下面我们把 plus( ) 绑定在按钮的点击事件上：

1. <div id="app">
   
2.   {{ a }}
   
3.   <button v-on:click="plus">加1</button>
   
4.   </div>

复制代码

在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法 plus( )就会被调用,实现给a的值加1，并更新视图。

watch 观察

watch选项是Vue提供的用于检测指定的数据发生改变的api。

上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。

在上个例子的代码基础上，我们加上watch部分的代码：

1. let vm = new Vue({
   
2.   //挂载元素
   
3.   el:'#app',
   
4.   //实例vm的数据
   
5.   data:{
   
6.     a:0
   
7.   },
   
8.   //方法
   
9.   methods:{
   
10.     plus(){
    
11.     return this.a++;
    
12.     }
    
13.   },
    
14.   //观察
    
15.   watch:{
    
16.     a(){
    
17.     console.log(`有变化了，最新值：`);
    
18.     console.log(this.a);
    
19.     }
    
20.   }
    
21. });

复制代码

最后一部分watch就是我们新加的代码， a( ) 表示我们要观察监听的就是数据a，我们看运行结果：

看到了，我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。

本节小结

定义一个vue实例常用的4个选项：过滤器 filters、计算属性 computed、方法 methods、观察 watch。