computed与watch的区别和属性

1.computed：

（多个值变化，影响到一个结果）属性会被缓存，除非依赖的响应式属性变化 才会重新计算，主要当作属性来使用，原来没有属性（结果），可创建可计算属性 （get/set，一个默认体）； 计算属性computed的特点：计算属性会依赖于它使用的data中的属性，只要它所依赖的 这些属性值没有改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要 高一些，所以vue中尽可能使用computed代替watch

<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="gender" value="男" /> 男</label> <label><input type="radio" v-model="gender" value="女" /> 女</label> <hr> <ul> <li v-for="user of showUsers"> {{user.username}} </li> </ul> </div> let app = new Vue({ el: '#app', data: { gender: '', users: [ {id: 1, username: 'baogege', gender: '男'}, {id: 2, username: 'mt', gender: '男'}, {id: 3, username: 'haigege', gender: '男'}, {id: 4, username: 'zMouse', gender: '男'}, {id: 5, username: 'reci', gender: '女'}, {id: 6, username: 'lisi', gender: '女'} ] }, computed: { showUsers() { return this.gender === '' ? [...this.users] : this.users.filter(user=>user.gender===this.gender); } } });

2.watch：异步的派生数据

<div id="app"> <input type="text" v-model="keyWord"> <hr> <ul> <li v-for="user of showUsers"> {{user.username}} </li> </ul> </div> let app = new Vue({ el: '#app', data: { keyWord: '', users: [ {id: 1, username: 'baogege', gender: '男',checked:false}, {id: 2, username: 'mt', gender: '男',checked:false}, {id: 3, username: 'haigege', gender: '男',checked:false}, {id: 4, username: 'zMouse', gender: '男',checked:false}, {id: 5, username: 'reci', gender: '女',checked:false}, {id: 6, username: 'lisi', gender: '女',checked:false} ], showUsers: [] }, watch: { keyWord(newVal, oldVal) { // 模拟网络请求 setTimeout(_=>{ this.showUsers = this.users.filter(user=>user.username.includes(newVal)); }, 1000); } } });

3.区别：

a:computed是依赖数据变化才去计算 watch：主动处理数据变化 b:computed：没法处理异步的数据 watch：可以直接处理异步

各自适用的场景： 1.watch适合处理：一个数据影响多个数据，更适合处理数据，相互独立的场景，主动监听 2.computed适合处理：一个数据受多个数据的影响或多个数据影响一个数据，数据相互不 独立的场景，也可以（get/set）

多层监听

对于多层数据的监听，可以使用字符串+点语法

watch: { 'a.b.c': function() { //... } }

深度监听

默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听

watch: { a: { handler() { console.log('a deep'); }, deep: true } }