vue中computed与watch的理解

使用vue这个框架已经很久了，其间也遇到了很多的坑，在此记录一下，给自己一个总结，希望也能给大家带来一些启发（总结在文章末尾）

首先说一下computed，
定义：计算属性，对数据进行一些处理，筛选，但不影响原数据
eg：

```javascript
<div id="v1">
    <!--这里显示的是computed中的函数-->
    共计：{{ total }}
</div>


<script src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            val:[
                { price: 199,num:30},
                { price: 299,num:20},
                { price: 399,num:10}
            ]
        },
        computed:{
            total:function () {
                var vel=this.val;
                var sum=0,len=vel.length;
                for(var i=0;i<len;i++){
                    sum+=vel[i].price * vel[i].num
                }
                return sum;
            }
        }
    })
</script>

``

特点：
*1.computed中定好的变量，可以再页面中直接调用，不能再data中在此声明
2.computed中的数据会被缓存，只有当依赖值发生变化的时候才会重新渲染
这就是computed的基本用法。相对来说比较简单
下面说一下computed的get和set

```javascript
computed: {
	fullName: {
		get() {
			let getFullName = ""
            this.nameDate.forEach(item => {
                getFullName += item.value
            })
            return getFullName
		},
		set(val) {
			// 这个地方获取到的 val 就是改变的 fullName 的数据
			console.log(val)
			this.nameDate.forEach(item => {
               item.value = ""
            })
		}
	}
},

get可以直接拿到已声明的属性，从而设置计算属性，set是获取oldval和newval，但是一般我们只是用get去设置计算属性
``

接下来说watch，这个方法我用的很多，因为很多异步数据的操作需要用到他
定义：可以及时监听到data内数据的变化
用法：假设data中有一个名为obj的数据

watch: {
		obj(newValue, oldValue) {
			//do something
			console.log(newValue,oldValue)
		}
	}

这样我们就可以实现简单的一个监听，但是这种写法会导致一些问题，如果该对象有深层的数据，那么这种写法是监听不到的，需要改成以下这种写法

watch: {
		obj: {
  handler(newVal) {
   console.log(newVal);
                  },
  deep: true,
  immediate: true
             }
        }  

handler：控制器，当数据发生改变的时候，我们可以在这里做一些想要的操作
immediate：如果当数据初次被声明赋值时也想让对他进行操作，就需加上immediate：true
deep：这是最关键的配置项，当我们监听的是对象中的深层属性时，就需要加上deep：true
（当对象中属性改变后，我们输出newval和oldval，结果显示值是一样的，这是因为他们索引同一个数组/对象，vue是不会保留修改之前的副本的）

总结：
区别：
计算属性computed :
1.支持缓存，只有依赖数据发生变化时，才会重新计算，此特点在适当的情况下可以节省很多性能

2.不支持异步数据，当存在异步数据时方法会失效

3.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

监听属性watch：
1 不支持缓存，数据改变直接会触发回调；
2 支持异步
3 immediate：组件加载立即触发回调函数执行，
　　 deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用（deep无法检测到数组的变动与对象属性的新增，只能以响应式的方法才能被监听到）