模拟vue数据监测-对象

  1. 过程原理：vue将data做一层处理（defineProperty）->赋值给 _data -> 数据代理给vue
  2. 效果：

image.png

  1. 代码 ```vue <!DOCTYPE html> 

    1.  <meta charset="UTF-8" />
    2.  <title>Document</title>

    1.  <script type="text/javascript" >
    3.      let data = {
    4.          name:'尚硅谷',
    5.          address:'北京',
    6.      }
    8.      //创建一个监视的实例对象，用于监视data中属性的变化
    9.      const obs = new Observer(data)        
    10.      console.log(obs)    
    12.      //准备一个vm实例对象
    13.      let vm = {}
    14.      vm._data = data = obs
    16.      function Observer(obj){
    17.          //汇总对象中所有的属性形成一个数组
    18.          const keys = Object.keys(obj)
    19.          //遍历
    20.          keys.forEach((k)=>{
    21.              Object.defineProperty(this,k,{
    22.                  get(){
    23.                      return obj[k]
    24.                  },
    25.                  set(val){
    26.                      console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
    27.                      obj[k] = val
    28.                  }
    29.              })
    30.          })
    31.      }
  1.     </script>
  2. </body>

  1. <a name="tzQSA"></a>
  2. # vue数据监测
  3. **vue会给data每一层递归添加defineProperty，无论是数组还是对象**<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1624878/1626516625090-e75960c8-aa54-44f5-bd2b-76a4a79ecd8b.png#clientId=u145a8a1f-3452-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=520&id=Sqdj8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1039&originWidth=940&originalType=binary&ratio=1&rotation=0&showTitle=false&size=162719&status=done&style=none&taskId=ua7e3b7c2-a36e-4dce-91b8-0fae2be25c9&title=&width=470)<br />**注意事项:**
  5. 1. vm = this
  6. 1. 不能操作数组索引要用API
  7. 1. 后追加的属性没有响应式,要用set
  8. ```vue
  9. <!DOCTYPE html>
  10. <html>
  11.     <body>
  12.         <!--
  13.             Vue监视数据的原理：
  14.                 1. vue会监视data中所有层次的数据。
  16.                 2. 如何监测对象中的数据？
  17.                     通过setter实现监视，且要在new Vue时就传入要监测的数据。
  18.                         (1).对象中后追加的属性，Vue默认不做响应式处理
  19.                         (2).如需给后添加的属性做响应式，请使用如下API：
  20.                             Vue.set(target，propertyName/index，value) 或 
  21.                             vm.$set(target，propertyName/index，value)
  23.                 3. 如何监测数组中的数据？
  24.                     通过包裹数组更新元素的方法实现，本质就是做了两件事：
  25.                         (1).调用原生对应的方法对数组进行更新。
  26.                         (2).重新解析模板，进而更新页面。
  28.                 4.在Vue修改数组中的某个元素一定要用如下方法：
  29.                     1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  30.                     2.Vue.set() 或 vm.$set()
  32.                 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
  33.         -->
  34.         <!-- 准备好一个容器-->
  35.         <div id="root">
  36.             <h1>学生信息</h1>
  37.             <button @click="student.age++">年龄+1岁</button> <br/>
  38.             <button @click="addSex">添加性别属性，默认值：男</button> <br/>
  39.             <button @click="student.sex = '未知' ">修改性别</button> <br/>
  40.             <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
  41.             <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
  42.             <button @click="addHobby">添加一个爱好</button> <br/>
  43.             <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
  44.             <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
  45.             <h3>姓名：{{student.name}}</h3>
  46.             <h3>年龄：{{student.age}}</h3>
  47.             <h3 v-if="student.sex">性别：{{student.sex}}</h3>
  48.             <h3>爱好：</h3>
  49.             <ul>
  50.                 <li v-for="(h,index) in student.hobby" :key="index">
  51.                     {{h}}
  52.                 </li>
  53.             </ul>
  54.             <h3>朋友们：</h3>
  55.             <ul>
  56.                 <li v-for="(f,index) in student.friends" :key="index">
  57.                     {{f.name}}--{{f.age}}
  58.                 </li>
  59.             </ul>
  60.         </div>
  61.     </body>
  63.     <script type="text/javascript">
  64.         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  66.         const vm = new Vue({
  67.             el:'#root',
  68.             data:{
  69.                 student:{
  70.                     name:'tom',
  71.                     age:18,
  72.                     hobby:['抽烟','喝酒','烫头'],
  73.                     friends:[
  74.                         {name:'jerry',age:35},
  75.                         {name:'tony',age:36}
  76.                     ]
  77.                 }
  78.             },
  79.             methods: {
  80.                 addSex(){
  81.           //this.student.sex = '男' //错误
  82.                     // Vue.set(this.student,'sex','男')
  83.                     this.$set(this.student,'sex','男')
  84.                 },
  85.                 addFriend(){
  86.                     this.student.friends.unshift({name:'jack',age:70})
  87.                 },
  88.                 updateFirstFriendName(){
  89.                     this.student.friends[0].name = '张三'
  90.                 },
  91.                 addHobby(){
  92.                     this.student.hobby.push('学习')
  93.                 },
  94.                 updateHobby(){
  95.           // this.student.hobby[0]='开车'//错误
  96.                     // this.student.hobby.splice(0,1,'开车')
  97.                     // Vue.set(this.student.hobby,0,'开车')
  98.                     this.$set(this.student.hobby,0,'开车')
  99.                 },
  100.                 removeSmoke(){
  101.                     this.student.hobby = this.student.hobby.filter((h)=>{
  102.                         return h !== '抽烟'
  103.                     })
  104.                 }
  105.             }
  106.         })
  107.     </script>
  108. </html>

代码 - 实现数据监测（Observer类的实现）

image.png
image.png
image.png