vue中watch和computed

watch

当需要在数据变化时执行异步或开销较大的操作时， watch 方式是最有用的。可以监听路由变化.它监控的变量当然必须在data里面声明才可以

<div id="box">
		<input type="text"  v-model="firstName">
		<input type="text"  v-model="secondName">
		{{fullName}}
</div>

new Vue({
		el:"#box",
		data:{
                      firstName:"",
                      secondName:"",
                      fullName:""
		},
		watch:{
			"firstName"(newval,oldval){
                              this.fullName=this.secondName+this.firstName;
			},
			"secondName"(newval,oldval){
                              this.fullName=this.firstName+this.secondName;
			}
		}
	})

//watch深度监听，可监听到对象、数组的变化
 watch:{       
        a:{
            handler(val, oldVal){
                console.log("b.c: "+val.c, oldVal.c);
            },
            deep:true
        }
    }

 

handler方法和immediate属性 

watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

注意到handler了吗，我们给 firstName 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

deep

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
  this.obj = {
    a: '456'
  }
}

这样我们的 handler 才会执行，打印obj.a changed。

相反，如果我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了！

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化，我们可以是使用字符串形式监听。

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

这样Vue.js才会一层一层解析下去，直到遇到属性a，然后才给a设置监听函数。 

computed

vue中的计算属性，在数据未发生变化时，优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。

用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义

<div id="box">
		<input type="text"  v-model="firstName">
		<input type="text"  v-model="secondName">
		{{fullName}}
</div>

new Vue({
		el:"#box",
		data:{
                     firstName:"",
                     secondName:"",
		},
		computed:{
			fullName(){
				return this.firstName+this.secondName;
			}
		}
	})

computed和methods的区别

computed相关属性发生变化时，调用

methods是方法，只要调用它，函数就会执行。

相同：两者达到的效果是同样的。

不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求值。只要相关依赖未改变，只会返回之前的结果，不再执行函数

 

 相关： 文章1    文章2