前言
如何监测数据的变化
要想准确响应数据的变化，首先需要精确及时的监测数据的变化，Vue检测数据的变化核心还是通过Object.defineProperty();下面通过实例为大家详细阐述Vue检测数据变化的过程，代码示例如下：
<script type="text/javascript" > let data = {
name:'xizhutao', address:'安徽', } //创建一个监视的实例对象，用于监视data中属性的变化 const obs = new Observer(data) console.log(obs) //准备一个vm实例对象 let vm = {
} vm._data = data = obs function Observer(obj){
//汇总对象中所有的属性形成一个数组 const keys = Object.keys(obj) //遍历 keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k] }, set(val){
console.log(`${
k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`) obj[k] = val } }) }) } </script> 注意事项
对象
Vue不能监测对象的Property的添加和删除，在监测数据变化原理中讲到，在Vue初始化实例对象时，会将data对象中的属性存到数组中进行遍历，然后调用Object.defineProperty()给属性添加get ， set方法监视data对象中属性的变化，因此如果我们在初始化实例对象后，给Vue实例添加属性，并不会给添加的属性添加对应的get、set方法，导致添加的属性并不是响应式的；如果你还不理解，请看以下示例代码：
var vm = new Vue({
data:{
a:11 } }) // vm.a 是响应式的 vm.b = 22 // vm.b 是非响应式的 //someObject为嵌套在data数据对象内的一个对象 Vue.set(vm.someObject, 'b', 22) vm.$set(this.someObject,'b',22) ⚠注意：set方法不能给vm或vm的根数据对象设置属性，只能给跟数据对象中嵌套的对象设置属性❗❗❗
数组
Vue不能监测以下数组的变动：1、通过索引号修改数组的对应值，修改后的值不是响应式的；2.通过length修改数组长度时，数据不是响应式的；示例如下：
var vm = new Vue({
data: {
items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 var vm = new Vue({
data: {
items: ['a', 'b', 'c'] } }) Vue.set(vm.items , 0 , 'aa') // 响应性的 vm.$set(vm.items , 0 , 'aa') // 响应性的 vm.items.splice(0 , 1 , 'aa')//响应性的 //通过length vm.items.splice(2)//响应性的 更详细的信息请查看Vue.js官网：深入理解响应式原理
写在最后
?(❁´◡`❁)您的点赞?➕评论?➕收藏⭐是作者创作的最大动力?
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/199154.html原文链接：https://javaforall.net
