1. vue2响应式原理

1.1 添加属性

  1. <template>
  2.   <div id="app">
  3.     <h1>姓名：{{person.name}}</h1>
  4.     <h1>年龄：{{person.age}}</h1>
  5.     <h1 v-show='person.sex'>性别：{{person.sex}}</h1>
  6.     <button @click="addSex">添加一个sex属性</button>
  7.     <button @click="deleteName">删除name属性</button>
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   name: 'App',
  14.   data() {
  15.     return {
  16.      person:{
  17.        name: 'IRIC',
  18.       age: 20,
  19.      }
  20.     }
  21.   },
  22.   methods: {
  23.     addSex() {
  24.       /**
  25.        * 下面的不会生效， 数据变了， 但是页面不会渲染
  26.        * 因为这样添加Object.defainePropoty监测不到， 所以页面不会渲染
  27.        */
  28.       // this.person.sex = 'girl'
  29.       this.$set(this.person,'sex','女')
  31.     },
  32.     deleteName() {
  34.     },
  35.   },
  36. }

添加属性如果直接使用this.person.sex = ‘girl’， 则页面不会显示改属性。 此时数据已经加上了， 但是页面不会渲染。 因为Object.defainePropoty监测不到。

1.2 第二种方法

this.$set(this.person,’sex’,’女’)

  1. <template>
  2.   <div id="app">
  3.     <h1>姓名：{{person.name}}</h1>
  4.     <h1>年龄：{{person.age}}</h1>
  5.     <h1 v-show='person.sex'>性别：{{person.sex}}</h1>
  6.     <button @click="addSex">添加一个sex属性</button>
  7.     <button @click="deleteName">删除name属性</button>
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   name: 'App',
  14.   data() {
  15.     return {
  16.      person:{
  17.        name: 'IRIC',
  18.       age: 20,
  19.      }
  20.     }
  21.   },
  22.   methods: {
  23.     addSex() {
  24.       this.$set(this.person,'sex','女')
  25.     },
  26.     deleteName() {
  28.     },
  29.   },
  30. }
  31. </script>

1.3 添加属性

:::success import Vue from ‘vue’
Vue.set(this.person, ‘sex’,’女’) :::

  1. <template>
  2.   <div id="app">
  3.     <h1>姓名：{{person.name}}</h1>
  4.     <h1>年龄：{{person.age}}</h1>
  5.     <h1 v-show='person.sex'>性别：{{person.sex}}</h1>
  6.     <button @click="addSex">添加一个sex属性</button>
  7.     <button @click="deleteName">删除name属性</button>
  8.   </div>
  9. </template>
  11. <script>
  12. import Vue from 'vue'
  13. export default {
  14.   name: 'App',
  15.   data() {
  16.     return {
  17.      person:{
  18.        name: 'IRIC',
  19.       age: 20,
  20.      }
  21.     }
  22.   },
  23.   methods: {
  24.     addSex() {
  25.       Vue.set(this.person, 'sex','女')
  27.     },
  28.     deleteName() {
  30.     },
  31.   },
  32. }

1.4删除属性

删除对象的属性：

  1. <template>
  2.   <div id="app">
  3.     <h1 v-show='person.name'>姓名：{{person.name}}</h1>
  4.     <h1>年龄：{{person.age}}</h1>
  5.     <h1 v-show='person.sex'>性别：{{person.sex}}</h1>
  6.     <button @click="addSex">添加一个sex属性</button>
  7.     <button @click="deleteName">删除name属性</button>
  8.   </div>
  9. </template>
  11. <script>
  12. import Vue from 'vue'
  13. export default {
  14.   name: 'App',
  15.   data() {
  16.     return {
  17.      person:{
  18.        name: 'IRIC',
  19.       age: 20,
  20.      }
  21.     }
  22.   },
  23.   methods: {
  24.     addSex() {
  25.       Vue.set(this.person, 'sex','女')
  27.     },
  28.     deleteName() {
  29.       //直接删除不会生效
  30.       // delete this.person.name
  31.       // Vue.delete(this.person,'name')
  32.       this.$delete(this.person, 'name')
  33.     },
  34.   },
  35. }
  36. </script>

更新数组：

  1. <template>
  2.   <div id="app">
  3.     <h1 v-show='person.name'>姓名：{{person.name}}</h1>
  4.     <h1>年龄：{{person.age}}</h1>
  5.     <h1 v-show='person.sex'>性别：{{person.sex}}</h1>
  6.     <button @click="addSex">添加一个sex属性</button>
  7.     <button @click="deleteName">删除name属性</button>
  8.     <ul>
  9.      <li v-for="(item, index) in hobby" :key="index">
  10.       {{ item }}
  11.     </li>
  12.     </ul>
  13.     <button @click='addHobby'>添加hobby</button>
  14.     <button  @click='updateHobby'>修改hobby</button>
  15.   </div>
  16. </template>
  18. <script>
  19. import Vue from 'vue'
  20. export default {
  21.   name: 'App',
  22.   data() {
  23.     return {
  24.      person:{
  25.        name: 'IRIC',
  26.       age: 20,
  27.      },
  28.      hobby:['画画','游泳']
  29.     }
  30.   },
  31.   methods: {
  32.     addSex() {
  33.       Vue.set(this.person, 'sex','女')
  35.     },
  36.     deleteName() {
  37.       //直接删除不会生效
  38.       // delete this.person.name
  39.       // Vue.delete(this.person,'name')
  40.       this.$delete(this.person, 'name')
  41.     },
  42.     addHobby(){
  43.       this.hobby.push('跑步')
  44.     },
  45.     updateHobby(){
  46.       //不会生效， 只是数据改了， 但是页面不会变化， 因为无法检测到改操作
  47.       // this.hobby[0] = '钓鱼'
  48.       console.log(this.hobby) //[钓鱼', '游泳', '跑步',]
  49.       // Vue.set(this.hobby,0,'逛街')
  50.       this.$set(this.hobby,0,'跳舞')
  51.       this.hobby.splice(0,1,'唱歌')
  52.     }
  53.   },
  54. }
  55. </script>

2. 总结：

vue2.x的响应式

  • 实现原理：

    • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
      1. Object.defineProperty(data, 'count', {
      2. get () {}, 
      3. set () {}
      4. })

  • 存在问题： :::success

  • 新增属性、删除属性, 界面不会更新。

  • 直接通过下标修改数组, 界面不会自动更新。
  • 解决方案
    • 使用Vue.set、Vue.delete或者vm.$set、vm.$delete这些API， 数组使用重写数组的方法 :::