《Vue 数据响应式的理解》

什么是响应式

• 就是我打你一拳你会感觉到疼，这就是响应式。
• 若一个物体对外界的刺激做出反应，他就是响应式的。
• 当我修改vue实例中的数据时，视图就会重新渲染，出现新的内容，这就是vue的数据响应式。

代码如下

new Vue({
      data: {
        n: 0
      },
      template: `
        <div>
        {{n}}
        <hr/>
        <button @Click ="add">+10</button/>
        </div>
       `,
      methons: {
        add(){
          this.n += 10;
        }
    }
}).$mount("#app")

数字n在页面上显示的是0，当我按+10按钮时，数字就会从0变成10，这就是数据响应式

响应式原理

Object.defineProperyt的用法：

let data1 = {}
Object.defineProperty(data1, 'n', {value: 0 })
//用Object.defineProperyt定义n

getter和setter的用法：

示例1：

const obj1 = {
  姓: '靓',
  名: '仔',
 姓名() {
 return this.姓 + this.名
  }
}
console.log("姓名:" + obj1.姓名())
//这里姓名后面需要加括号才可以调用
//如果我就是想要不加括号，是否能打印出姓名

示例2：

const obj2 = {
  姓: '靓',
  名: '女',
 get 姓名() {
 return this.姓 + this.名
  },
 };
 console.log("姓名:" + obj2.姓名)
 //getter就是这样用的，不加括号的函数，仅此而已。

示例3:

const obj3 = {
  姓: '靓',
  名: '女',
 get 姓名() {
 return this.姓 + this.名
  },
  set 姓名(xxx){
  this.姓 = xxx[0]
  this名字 = xxx.substring(1)
  }
 };
 console.log(obj3)
 //setter就是这样用的，用 = xxx触发

const vm=new Vue({data:mydata})

1. Vue会让vm成为mydata的代理
2. 会对mydata所有属性进行监控
3. 当数据变时触发UI更新

Vue中数组的变异方法

Vue、被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些被包裹过的方法包括：

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