Vue2.0——过滤器,计算属性,属性监听器

12、过滤器filter

过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

总结：

• filter主要用于数据展示之前的处理

• 过滤器只能用在v-bind或者插值表达式中

• 要定义到filters节点下，本质上是一个函数

• 在过滤器函数中，一定要有return值

• 再过滤器的形参中，就可以获取到“管道符”前面待处理的那个值。

• 语法

  //在花括号中使用，两次过滤,将tool的返回值又传给tool2作为参数，再一次过滤
   <p>{{birth|tool|tool2}}</p>
  
  //在v-bind中使用
   <a :href="url|tool3">baidu</a>
  
  <script>
      new Vue({
          el: "#app",
          data: {
              birth: "2000-01-18",
              url: "www.baidu.com"
          },
          methods: {
              timerformatter(str) {
                  let age = new Date().getFullYear() - new Date(str).getFullYear();
                  return age + "岁"
              }
          },
          filters: {
              tool(str) {
                  let age = new Date().getFullYear() - new Date(str).getFullYear();
                  return age + "岁"
              },
              tool2(str) {
                  if (parseInt(str) > 18) {
                      return str + '欢迎光临'
                  } else {
                      return str + '未成年，不能进'
                  }
              },
              tool3(str) {
                  return "http://" + str
              }
          }
      })
  </script>
  

13、计算属性–computed

• 作用：1、减少代码冗余，便于维护； 2、有缓存，提升性能。

• 使用案例

  //页面调用{{}}
  <div id="app">
  			<p>{{msg}}</p>
  			<p>方法获取的年龄:{{getAge()}}</p>
  			<p>计算属性获取的年龄:{{getAge_computed}}</p>
  			<button @click="change">改变birth的值看看年龄变不变</button>
  		</div>
  
  
  new Vue({
          el: "#app",
          data: {
              msg: "hello",
              birth: "1995-02-03"
          },
          methods: {
              getAge() {
                  var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
                  return age + "岁"
              },
              change() {
                  this.birth = "1996-02-03"
              }
          },
      //计算属性
          computed:{
             //计算属性第一种用法:函数格式
              getAge_computed(){
                  var age = new Date().getFullYear() - new Date(this.birth).getFullYear()
                  return age + "岁"
              }
              //计算属性第二种用法：对象格式（这才是比较正宗的使用方法）
              xx:{
                  set(oldvalue){},
                  get(){}
              }
          }
      })
  

• 计算属性和方法的区别:(面试)
  计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，
  提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性
  methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍
  方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

• 补充:关于计算属性 函数什么情况下调用

  1. 计算属性使用时当做属性使用

  2. 计算属性设计时当做函数设计(就像es6中的属性)

  3. 当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI

     1. 如果是修改了data中监听的某个的属性值 计算属性就会运行

     2. 如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行；

        比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性

     3. 解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性；办法2:赋值 JSON.parse(JSON.stringfy(data))

     methods:{ 
      change(arg,index1){
     	 this.arr[index1]=arg
     	 this.arr=[...this.arr]
      }
     },
     computed:{
     	total(){
     		//eval(this.arr.join("+"))
     		//  eval("100+200+88")==>把字符串当做代码运行 产生运算结果
     		return  eval(this.arr.join("+"))
     		}
     	}
     

14、属性监听器(面试)watch

watch:{x(){}}

• 本质上是一个函数，要监听谁，就把他作为方法名；
• 只要监听到了变化，就会执行函数；
• 侦听器属性，比计算属性计算效率消耗大
• 函数内部的参数可以拿到原先的值和改变后的值，新值在前，旧值 在后。

new Vue({
	el:"",//关联界面元素
	data:{x:12},//vm的数据源
	methods:{},//方法
	filter:{},//过滤器
	computed:{xx(){}}, //xx就是一个计算属性
	watch:{x(){}} //x就是监听了data中的x属性的一个监听器
})

侦听器的格式

1. 方法格式的侦听器

   • 缺点1：无法在刚进入的时候，自动触发
   • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。

2. 对象格式的监听器

   • 好处1：可以通过immediate选项，让监听器自动触发；immediate的默认值是false ， 改成true就会触发一次；

   • 好处2：可以通过深度监听deep属性，让侦听器监听每个属性的变化。如果监听到的对象是子属性的变化，则必须包裹一层单引号。

     body>
         <div id="app">
             <input type="text" v-model=" info.name">
             <input type="text" v-model=" price">
         </div>
     
         <script>
             new Vue({
                 el: "#app",
                 data: {
                     info: {
                         name: "karen"
                     },
                     price: 20
     
                 },
                 methods: {
     
                 },
                 filter: {
     
                 },
                 computed: {
     
                 },
                 watch: {
                     //如果监听到的对象是子属性的变化，则必须包裹一层单引号。
                     'info.name'(newname, oldname) {
                         console.log(newname, oldname);//新值在前面，旧值在后面
                     },
                     //对象格式的写法：可以通过immediate选项，让监听器自动触发；immediate的默认值是false ， 改成true就会触发一次；
                     price: {
                         handler: function (newprice) {
                             console.log(newprice);
                         },
                         immediate: true
                     }
                 }
             })
         </script>
     </body>
     

3. 为了使用方便建议使用方法格式。

1、计算属性，属性侦听器，方法，过滤器有什么区别？哪些是被this对象劫持过的？

1. 计算属性：会把计算的结果缓存起来，并监听计算过的数据源，如果监听到的数据源发生变化才会重新计算（没有坚挺的属性发生变化，模板会重新渲染）
2. 方法一般是提供给模板时间和其它方法（比如钩子函数）使用，如果在模板中使用了方法，而不是事件，如果模板中渲染的任意数据源改变了，他都会重新调用；
3. 过滤器往往用于数据渲染钱的数据处理，除了用发根方法不一样，其他都一样，没有被劫持；
4. 侦听器：只有侦听器的属性发生变化才会触发（可以深度侦听，但是更消耗内存）

2、为什么要把这些函数分开设计？

为了业务更明显，功能更好劫持