Vue2侦听器及计算属性

Watch

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

监听器函数需要定义到Vue实例的watch节点下

监听器本质上是一个函数，要监听哪个数据的变化，就把数据名作为方法名

方法格式监听

 const app=new Vue({
    el: '#app',
    data:{
      username: ''
    },
    watch:{
     //监听username值得变化
     //newVal是变化后的新值，oldVal是变化之前的旧值
      username(newVal, oldVal){
        console.log(newVal, oldVal)
      }
    }
  })

如果要侦听的是对象的子属性变化，也可以使用方法格式的侦听

  watch:{
  		//如果侦听的是对象的子属性的变化，需要包裹一层单引号
        'info.username'(newVal, oldVal){
          //code
        }
    }

方法格式的监听器无法在刚进入页面时自动触发

数组格式监听

当侦听器传入一个回调数组，他们会被逐一调用

  watch:{
  		//如果侦听的是对象的子属性的变化，需要包裹一层单引号
        info:[
        	'handle1',
        	function handle2 (val, oldvalue){ /* code */ },
        	{
        		handler: function handle3 (val, oldvalue){ /* code */ }
        	}
        ]
    }

对象格式监听

默认情况下，组件在初次加载完毕后不会调用watch侦听器

如果想让watch立即被调用，需要使用immediate选项

  watch:{
      username: {
      //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
        handler(newVal, oldVal){
          //code
        },
      //表示页面初次渲染好之后，就立即触发当前的watch侦听器
      immediate: true
      }
    }

如果监听到的是一个对象，那么对象中的值发生变化不会触发侦听器

此时需要对象格式侦听器中的另一个属性deep开启深度监听

开启深度监听后无法获得旧的值 旧的值获取到的为新的值

  watch:{
      info: {
      //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
        handler(newVal, oldVal){
          //code
        },
      //开启深度监听，只要对象中任意一个属性变化了，就会触发"对象的侦听器"
      deep: true
      }
    }

每次对象中属性变化都会触发深度监听，此时在对象的监听函数handler中对变化的属性进行处理

监听路由中query参数的变化

watch: {
	$route: {
		handler() {
			// code 业务逻辑
		}
	},
	deep: true,
	// 深度监听 同时可以监听到params参数变化
}

计算属性

计算属性将被混入Vue实例中，所有getter和setter的this上下文自动的绑定Vue实例

计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算

如果某个依赖（非响应式property）在该实例范畴之外，则计算属性是不会被更新的

函数

计算属性指的是通过一系列运算之后，最终得到的一个属性值

这个动态计算出来的属性值可以被模板结构或methods方法使用

  const app=new Vue({
    el: '#app',
    data: {
      r: 0, g: 0, b: 0
    },
    computed: {
      rgb(){
        return `rgb(${this.r},${this.g},${this.b})`
      }
    },
    methods: {
      show(){
        console.log(this.rgb);
      }
    }
  })

当有部分代码需要重复操作时，可以封装到Vue实例的computed节点下，必须以函数声明

实际产生的为一个Vue实例中的属性，且属性名是函数名，属性值就是return的值

可以在Vue实例中通过this调用

箭头函数

计算属性可以使用箭头函数，但是箭头函数不能通过this获取到vue的实例

Vue为箭头函数提供了一个形参用于获取Vue实例

  const app=new Vue({
    el: '#app',
    data: {
      r: 0, g: 0, b: 0
    },
    computed: {
    // 箭头函数的this 不指向实例自身 所以如果计算属性写成箭头函数 vue 会给我们提供一个变量来访问实例的数据
    // vm为Vue的实例对象
      rgb:(vm)=>{
        return `rgb(${vm.r},${vm.g},${vm.b})`
      }
      
    }
  })

对象写法

当访问计算属性时会触发get方法 返回值为计算属性的值

当设置计算属性时会触发set方法

  const app=new Vue({
    el: '#app',
    template:`
    <div>
    	<div>{{ cd }}</div>
    	<button @click='cd="abc"'>设置cd的值</button>
    </div>
    `,
    computed: {
    	cd:{
    		// 取值函数 表示读取cd属性的值会执行的函数
			get(){
				return 'cd的值'
			},
			// 储值函数 表示打算修改cd属性会执行的函数
			set(val){
				console.log('cd的值被修改',val)
			}
		}
    }
  })