Vue实例常用的4个选项

我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。

今天我们讲Vue实例常用的4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察）

1、filters（过滤器）

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

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      number1: 3.1415,
      number2:31.415,
      number3:314.15
    }
  }
}
</script>

number1、number2、number3都是Vue实例的小数，我们把它展示在视图上：

<template>
  <div class="hello">
    <div> 数字1：{{ number1 }}</div>
    <div> 数字2：{{ number2 }}</div>
    <div> 数字3：{{ number3 }}</div>
  </div>
</template>

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

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

下面我们来看看怎么用：

<template>
  <div class="hello">
    <div> 数字1：{{ number1|toInt }}</div>
    <div> 数字2：{{ number2|toInt }}</div>
    <div> 数字3：{{ number3|toInt }}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      number1: 3.1415,
      number2: 31.415,
      number3: 314.15
    }
  },
  //过滤器
  filters:{
    toInt(val){
      return parseInt(val);
    }
  }
}
</script>

ffilters属性，它的值是一个对象，里面定义了一个叫toInt（）的方法，传入了一个val的参数，函数的作用就是把传入的参数val，简单地转成一个整数并return回去；

接着我们通过管道符' | '把函数toInt放在变量后面即可，number1、number2、number3会分别作为参数val传入toInt（val）方法进行运算，并返回一个整数。

运行后，得到结果如下：

根据结果可以看出，成功过滤转换成整数。

2、computed（计算属性）

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

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

<template>
  <div class="hello">
    <div> 总和：{{ sum }}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      number1: 3.1415,
      number2: 31.415,
      number3: 314.15
    }
  },
  //计算属性
  computed:{
    sum(){
      return this.number1+this.number2+this.number3;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

3、methods（方法）

顾名思义，在methods中，我们可以定义一些方法，供组件使用。
比如，我们定义一个数据msg，当用户点击按钮的时候，msg的值加1。这种情况，我们可以利用methods 来实现。

定义一个plus()的方法在methods中，下面我们把plus()绑定在按钮的点击事件上。
在 Vue 中通过v-on：指令来绑定事件，我们点击按钮，methods中的方法plus()就会被调用，实现给msg的值加1，并更新视图。

<template>
  <div class="hello">
    <div>{{ msg }}</div>
    <button @click="plus">加1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 0
    }
  },
  //方法
  methods: {
    plus() {
      return this.msg++;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

4、watch（观察）

watch 选项是 Vue 提供的用于检测指定的数据发生改变的api。
上面点击按钮msg的值加1的例子，不就是数据发生变化了吗?我们就用watch 选项来监听数字msg是否发生了变化，如果监听到了变化，我们就在控制台输入msg的最新值。
在上个例子的代码基础上，我们加上watch 部分的代码：

<template>
  <div class="hello">
    <div>{{ msg }}</div>
    <button @click="plus">加1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 0
    }
  },
  //方法
  methods: {
    plus() {
      return this.msg++;
    }
  },
  //观察
  watch: {
    msg() {
       console.log('有变化了，最新值：');
       console.log(this.msg);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

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

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