今日知识点-Vue2的computed和watch

Vue的响应式原理

vue只会将data中的数据使用Object.defineProperty（）进行数据劫持，将data中的属性使用getter/setter转化为响应式的属性。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 属性。

动态添加响应式属性的方法如下：

1. Vue.set(object, propertyName, value)
2. this.$set(object, propertyName, value)

进入正题，我们来讲讲计算属性和侦听器

1、计算属性

一个计算属性仅会在其响应式依赖更新时才重新计算

2.计算属性的用法

计算属性的写法和函数一样，必须要有一个返回值，和data中的普通属性一样使用，因此计算属性的名字和data中声明的属性不能重名

3.计算属性的优点

计算属性只有在依赖的数据发生变化时才会重新计算，它会将计算出来的值进行缓存，如果依赖项没有发生变化，就会使用缓存的数据

侦听器watch

一般会通过侦听某个属性的变化对某些功能的完成做一个判断的依据。

1.使用方法

watch:{

immediate：true/false  是否在页面初次加载时就监听该字段

deep：true/false,深度侦听复杂类型内变化，如果监听的是一个对象，那么对象中的任何一个属性发生变化都会被监听到

handler(newVal,oldVal){//侦听函数}

}

2.使用用例

watch:{

//1.普通变量

name(val){

},

//对象

obj:{

deep:true,

handler(val,oldVal){}

}

//对象的某一个属性

"obj.name"(val){

}

}