计算属性computed 监听属性 watch 和过滤器filters

1.计算属性computed
2.监听属性 watch

1.计算属性computed

当运算比较复杂的时候，我们可以使用computed来进行计算

1 首先在new Vue实例中编写computed属性，属性中自定义方法名，并且在方法中进行计算

 computed: {
     //仅访问器
   prop(){
       return...
   }
    //访问器+设置器
    fullprop:{
        get(){
          return...
      },
      set(val){
      ...
      }
    }
 }

2 直接将computed里边定义的方法名当做data来使用，进行计算结果的渲染
{{自定义方法名}}

3.计算属性和方法的区别：

计算属性可以复制，而方法不行
计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算

凡事根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性，而不是方法

2.监听属性 watch

监听属性一般情况下我们可以监听data的变化也可以后期我们将要学习的路由进行实时监听还可以对方法进行监听 ```javascript watch: {

 msg: function(val(新值), oldVal(老值)) {            //普通监听
   console.log(val, oldVal)
 },
 msg: 'getData',
 msg:{
         handler(val.oldVal){
        console,log("msg.name:"+val.name,oldVal.name);
    },
      deep:true            //深度监听，可监听到对象数组的变化
 },  
 msg: {
       handler(val, oldVal) {
         console.log(11111)
     },
       immediate: true   // 立即执行
              }

}

watch:{ msg(newVal,oldVal){ //相当于handler函数 console.log(newVal,oldVal) } }

普通的watch监听，当值第一次绑定时，不会执行监听函数，只有值发生变化才会执行，使用immediate属性，会在最开始时就执行一次
<a name="puGmI"></a>
## 3.过滤器 filters 
某些时候我们需要对某些数据进行某种方式的绑定
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：**双花括号插值和 `v-bind` 表达式** (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
```javascript
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

举例

<li v-for="(book, index) in books" :key="index">{{book | demo}}</li>    //demo等于《book》
filters: {
      demo(value) {
        console.log(value)
        return "《"+value+"》"
      }
},

计算属性computed 监听属性 watch 和 过滤器filters

1.计算属性computed

2.监听属性 watch