Vue数据响应式

本篇主要原理可在深入响应式原理章节可以找到

---

Vue对data做了什么？

1、getter和setter

这里引用一个非常形象的示例代码例子

通过这个代码中的例子，我们可以很直观的理解getter和setter的作用

2、Object.definePronperty
如果已经声明完了，想要添加缺添加不了，这时候就用Object.defineProperty

        let num = {
            age:20
        }
        let person={
            name:'小张',
            gender:'女'
        }
        Object.defineProperty(person,'age',{
            get(){
                return num.age
            },
            set(value){
                num.age = value
            }
        })

这要是一个最基础的数据代理

---

数据响应式

1、什么是响应式
能对外界的刺激做出反应，他就是响应式的（例如：我扎你一下你会喊疼，那你就是响应式的）

2、Vue的data是响应式

const vm = new Vue ({data:{n:0}})

如果我修改了 vm.n，那么UI中的 n 就会响应我
Vue2通过 Object.defineProperty 来实现数据响应式

补充：响应式网页 就是：如果我改变窗口大小，网页内容会做出响应，那他就是响应式网页

---

Vue 有 bug

1、Object.defineProperty 的问题

Object.defineProperty(obj, 'n' ,{...})
因为必须要有一个 'n' ，才能监听 & 代理obj.n
那如果因为有点水，忘了给 n 就会给出一个警告
例子一
例子二
例子二中，即使点击 set b ，也不会显示 1 。因为Vue没法监听一开始就不存在的obj.b

解决办法

( 1 )先把key都声明好
( 2 )使用Vue.set 或者 this.$set
例如：

Vue.set(this.obj, 'b' , 1)
this.$set(this.obj, 'b' , 1)
//他们是一模一样的，绝对等于的

Vue.set 和 this.$set 的作用

1、新增key
2、自动创建代理和监听（如果没有创建过）
3、被动触发UI更新（不会立刻更新，这是个异步操作）

---

给数组添加元素

用 Vue.set(this.array,3,'d') 实现数据响应
也可以用 this.array.push('d');实现数据响应，这个push是被Vue修改过的

PS：在给数组添加元素的时候，Vue.set 和 this.$set 可以：新增key 和 被动触发UI更新。但是 不会自动创建代理和监听

---

Vue内置用来 变异数组 的API，七个API被尤大所更改，调用后会更新UI

push( )
pop( )
shift( )
unshift( )
splice( )
sort( )
reverse( )