目录

监视属性（侦听属性）

watch

正常使用

简写

深度监视

VUE监视数据原理

监听属性和计算属性的区别

总结

监视属性（侦听属性）

watch

1、当被我们监事的属性发生变化的时候，回调函数他是自动调用的。进行相关的操作。

2、监事属性他必须是存在的

正常使用

监视实现的两种方案

1）、new Vue的时候传入我们的watch配置信息

// 监视属性（他也能够监视我们的计算属性）
watch:{name:{// 初始化的时候，handler调用一下immediate:true,//当name属性发生变化的时候，handler就会被调用handler(newValue,oldValue){}}
}

2）、通过vm.$watch监视

vm.$watch('name',{handler(newValue,oldValue){}
})

简写

其实和前面将的大同小异，分别如下

new Vue({el:'#root', // el用于指定当前vue实例是为哪一个容器服务的，通常是css选择器字符串data:{  // 此处的data用于存储数据，数据是供我们el所指定的容器去使用的，我们这里暂且吧值写为一个对象。name:'world123'},// 计算属性computed:{fullName:{reutrn "全名信息"}},// 监视属性（他也能够监视我们的计算属性）watch:{/*   name:{// 初始化的时候，handler调用一下immediate:true,//当name属性发生变化的时候，handler就会被调用handler(newValue,oldValue){}}*/name(newValue,oldValue){}}
})
/*vm.$watch('name',{handler(newValue,oldValue){}
})*/
vm.$watch('name',(newValue,oldValue){})

深度监视

1、Vue 中的watch他默认不会监视对象内部值的变化（1层的）

        说的直白点就是，Vue会监视内部的变化，但是watch中没有对我们程序员开放

2、通过配置一个属性deep:true可以监测对象内部值得变化（多层的）

注意：

1、Vue自身可以监视到对象内部的任何变化，但是为我们提供的watch他默认是不支持的。

2、我们在使用watche的时候会根据他的具体情况，再去判断是否需要我们去使用深度监视

VUE监视数据原理

1、vue默认他会监视data中所有层次的数据

2、vue通过setter方法实现对对象的监视，并且还需要在我们new Vue的时候就要将进行监视的数据传入。

        1）、当我们对对象后面新添加的属性进行监视的时候，Vue他默认是不会进行任何响应式的处理。

        2）、如果我们要对后加入的属性进行一些响应式的操作，那么就要使用vue为我们提供的api，具体如下2中方式：

•                 Vue.set(target,propertyName/index,value)
•                 vm.$set(target,propertyName/index,value)

        3）、如果我们要对数组中的属性进行一些响应式的操作，也就是通过包裹数组的更新元素方法来实现，他其实就是做了下面两件事：

•                 调用原生的对应方法对我们的数组进行更新
•                 我们要对模板进行重新解析，以达到更新页面的效果    

               修改的具体方法如下：

•                 使用数组的原生api：push()/pop()/shift()/unshift()/splice()/sort()/reverse()
•                 Vue.set()
•                 vm.$set()

注意：vm.$set()和Vue.set()他们两个不能给vm或者vm的跟数据对象进行添加任何属性

监听属性和计算属性的区别

1、计算属性（computed）能完成的功能，我们的侦听属性（watch）都能够实现

        换句话说：watch可以代替computed来实现功能

2、侦听属性（watch）能够给实现的功能，计算属性（computed）却不一定能够实现，。

        换句话说：1中提的的，不能返回来。比如：watch可以进行异步操作。但是computed不能

总结

1、我们所有已知的Vue管理的函数，最好要用我们的普通函数写，这样的话，它内部的this的指向确定是vm或者组件实例对象。

2、不是我们Vue管理的函数（ajax回调函数、定时器的回调函数），最好要写成箭头函数，只有这样的话，它内部的this才会指向vm或者组件实例对象

好了，今天关于侦听属性以及计算属性笔记就到这里吧！

欢迎大家点击下方卡片，关注《coder练习生》