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无法检测到数组的变动与对象属性的新增,只能以响应式的方法才能被监听到)

上一篇:vue-async-computed(异步计算属性使用)


下一篇:计算属性 computed