• Vue监测数据的原理（对象、数组）、Vue.set()、vm.$set()

    目录

    一、Vue监测数据的原理---对象

    二、Vue.set()

    1.Vue.set()

    其他用法

    2.vm.$set(target,key,val)

    3.重要注意：

     二、Vue监测数据的原理---数组

    1.push()

    2.shift

     3.splice()

    三、总结

    总结：Vue监视数据的原理

    为什么我们要研究一下Vue监测数据的原理？

         以防我们后续在给data赋值或者修改data中数据时导致修改不成功

      比如下面这个例子：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>人员列表h2>
    12.  
    13.            <button @click="updateMei">更改马冬梅信息button>
    14.             <ul>
    15.                 <li v-for="(p,index) in  persons" :key="p.id" >
    16.                     {{p.name}}-{{p.age}}-{{p.sex}}
    17.                 li>
    18.             ul>
    19.  
    20.         div>
    21.  
    22.         <script type="text/javascript">
    23.             //阻止vue在启动时生成生产提示
    24.             Vue.config.productionTip=false
    25.             
    26.           const vm=  new Vue({
    27.                 el:'#root',
    28.                 data:{
    29.  
    30.                   persons:[
    31.                     {id:'001',name:'马冬梅',age:19,sex:'女'},
    32.                     {id:'002',name:'周冬雨',age:20,sex:'女'},
    33.                     {id:'003',name:'周杰伦',age:21,sex:'男'},
    34.                     {id:'004',name:'温兆伦',age:22,sex:'男'}
    35.                   ],
    36.                  
    37.                 },
    38.                 methods: {
    39.                     updateMei(){
    40.                         this.persons[0].name = '马老师'
    41.                         this.persons[0].age = 50,
    42.                         this.persons[0].sex = '男'
    43.                         
    44.  
    45.                     }
    46.                 },
    47.                
    48.             })
    49.  
    50.         script>   
    51.     body>
    52. html>

    当我们点击按钮之后，会发生下面这种情况

     我们不难发现：页面中的内容修改了，Vue中的数据也修改了

    但是如果我们把代码中的数据改成下面这个样子：

    1.                 methods: {
    2.                     updateMei(){
    3.                         //this.persons[0].name = '马老师'
    4.                         //this.persons[0].age = 50,
    5.                         //this.persons[0].sex = '男'
    6.                          this.persons[0] ={id:'001',name:'马老师',age:50,sex:'男'}
    7.  
    8.                     }
    9.                 },

    初始界面和上面还是相同的，但是我们点击按钮之后，页面和Vue并没有反应

    原因：我们直接操作的数组的索引值，用赋值的方式去改（具体参照Vue监测数据的原理---数组）

            数组中 persons[0]  persons[1]  persons[2].....这种没有getter和setter，但是persons[0]  persons[1]里面的属性有getter和setter，比如name、age、sex都会有getter和setter

    修改成下面这个样子：

     所以我们就要研究一下Vue监测数据的原理

    一、Vue监测数据的原理---对象

    过程：

    对于上面监视对象的例子我们不难发现，只要我们有对象，就会有getter和setter

    二、Vue.set()

    1.Vue.set()

      我们在代码中没有写某个对象，但是在后期我们想添加上

       比如下面这种情形

      我们在页面的Vue中给学生添加一个性别，我们不难发现我们新添加的这个性别没有getter和setter

     

    那如果我们前期没添加，但是后期又想添加怎么把？

     API给我提供了一个Vue.set（target,key,val）方法

       target:我们要往谁的身上追加一个属性

       key：往target身上加一个什么属性

       val:值

    虽然我们是后天添加，但是我们依然享有getter和setter

    其他用法

    2.vm.$set(target,key,val)

    另外一种方法：

    3.重要注意：

     案例：我们要点击一个按钮，给学生追加性别

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.  
    10.     <body>
    11.         <div id="root">
    12.             、<h1>学校信息h1>
    13.              <h2>学校名称：{{name}}h2>
    14.              <h2>学校地址：{{address}}h2>
    15.              <hr/>
    16.              <h1>学生信息h1>
    17.              <button @click="addSex" >添加一个学校信息，默认值是男button>
    18.  
    19.              <h2>学生姓名：{{student.name}}h2>
    20.              <h2>学生性别：{{student.sex}}h2>
    21.              <h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}h2>
    22.              <hr/>
    23.              <ul>
    24.                 <li v-for="(f,index) in student.friends">
    25.                     {{f.name}}---{{f.age}}
    26.                 li>
    27.              ul>
    28.         div>
    29.  
    30.     body>
    31.     <script type="text/javascript">
    32.         //阻止vue在启动时生成生产提示
    33.         Vue.config.productionTip=false
    34.         
    35.       const vm=  new Vue({
    36.             el:'#root',
    37.             data:{
    38.               name:'尚硅谷',
    39.               address:'北京',
    40.               student:{
    41.                 name:'tom',
    42.                 // sex:'男',
    43.                 age:{
    44.                     // 真实年龄
    45.                     rAge:40,
    46.                     sAge:29
    47.                 },
    48.                 friends:[
    49.                     {name:'jerry',age:35},
    50.                     {name:'tony',age:36}
    51.                 ]
    52.             },
    53.             },
    54.  
    55.             methods: {
    56.                 addSex(){
    57.                  Vue.set(this.student,'sex','男')
    58.                 }
    59.             },
    60.         })
    61.     script>   
    62. html>

    不难发现，我们上面那个案例成功了

    但是！！！！！我们现在要变一下，我们不给data里面的对象追加属性了，我们给data追加！

    不难发现，出错了！

    结论：Vue.set不能给data追加属性（也不能给vm 追加），但是可以给data里面的对象追加属性

     二、Vue监测数据的原理---数组

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.  
    10.     <body>
    11.         <div id="root">
    12.             、<h1>学校信息h1>
    13.              <h2>学校名称：{{school.name}}h2>
    14.              <h2>学校地址：{{school.address}}h2>
    15.              <h2>校长是:{{school.leader}}
    16.              <hr/>
    17.              <h1>学生信息h1>
    18.              <button @click="addSex" >添加一个学校信息，默认值是男button>
    19.  
    20.              <h2>学生姓名：{{student.name}}h2>
    21.              <h2>学生性别：{{student.sex}}h2>
    22.              <h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}h2>
    23.              <hr/>
    24.              <h1>爱好h1>
    25.              <ul>
    26.                 <li v-for="(h,index) in student.hobby">
    27.                     {{h}}
    28.                 li>
    29.              ul>
    30.              <h1>朋友们h1>
    31.              <ul>
    32.                 <li v-for="(f,index) in student.friends">
    33.                     {{f.name}}---{{f.age}}
    34.                 li>
    35.              ul>
    36.         div>
    37.  
    38.     body>
    39.     <script type="text/javascript">
    40.         //阻止vue在启动时生成生产提示
    41.         Vue.config.productionTip=false
    42.         
    43.       const vm=  new Vue({
    44.             el:'#root',
    45.             data:{
    46.                 school:{
    47.                 name:'尚硅谷',
    48.                  address:'北京'
    49.                 },
    50.               student:{
    51.                 name:'tom',
    52.                 // sex:'男',
    53.                 age:{
    54.                     // 真实年龄
    55.                     rAge:40,
    56.                     sAge:29
    57.                 },
    58.                 hobby:['抽烟','喝酒','烫头'],
    59.                 friends:[
    60.                     {name:'jerry',age:35},
    61.                     {name:'tony',age:36}
    62.                 ]
    63.             },
    64.             },
    65.  
    66.             methods: {
    67.                 addSex(){
    68.                  Vue.set(this.student,'sex','男')
    69.                 }
    70.             },
    71.         })
    72.     script>   
    73. html>

    注意看，我们的爱好写成的是一个数组的形式，我们在下面观察，我们并没有发现爱好的getter和setter（如果把爱好的属性写成对象的模式，会有getter和setter），那说明我们直接修改数组的话，页面的内容可能不会改变

    那我们怎么修改数组呢？

    1.push()

       这个push已经和我们以前学的数组的push有一点不一样了

      下面这个是数组中的push

    2.shift

     3.splice()

    参数0 代表数组的下标   参数1 代表干掉   参数‘打台球’代表替换成打台球

    三、总结

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.  
    10.     <body>
    11.         <div id="root">
    12.              <button @click="student.age++">年龄+1岁button><br/>
    13.  
    14.              <button @click="addSex">添加性别属性，默认值：男button><br/>
    15.  
    16.              <button @click="addFriend">在列表首位添加一个朋友button><br/>
    17.  
    18.              <button @click="updateFirstFriendName">修改第一个好友的名字button><br/>
    19.  
    20.              <button @click="addHobby">添加一个爱好button><br/>
    21.  
    22.              <button @click="updateHobby">修改第一个爱好为：开车button><br/>
    23.  
    24.              <h1>学生信息h1>
    25.              <h2>学生姓名：{{student.name}}h2>
    26.              <h2>学生年龄：{{student.age}}h2>
    27.              
    28.              <h2 v-if="student.sex">学生性别：{{student.sex}}h2>
    29.              <hr/>
    30.              <h1>爱好h1>
    31.              <ul>
    32.                 <li v-for="(h,index) in student.hobby">
    33.                     {{h}}
    34.                 li>
    35.              ul>
    36.              <h1>朋友们h1>
    37.              <ul>
    38.                 <li v-for="(f,index) in student.friends">
    39.                     {{f.name}}---{{f.age}}
    40.                 li>
    41.              ul>
    42.         div>
    43.  
    44.     body>
    45.     <script type="text/javascript">
    46.         //阻止vue在启动时生成生产提示
    47.         Vue.config.productionTip=false
    48.         
    49.       const vm=  new Vue({
    50.             el:'#root',
    51.             data:{
    52.               student:{
    53.                 name:'tom',
    54.                 // sex:'男',
    55.                 age:18,
    56.                 hobby:['抽烟','喝酒','烫头'],
    57.                 friends:[
    58.                     {name:'jerry',age:35},
    59.                     {name:'tony',age:36}
    60.                 ]
    61.             },
    62.             },
    63.  
    64.             methods: {
    65.                 addSex(){
    66.                     Vue.set(this.student,"sex",'男')
    67.                 },
    68.                 addFriend(){
    69.                     // 往前面加一个
    70.                     this.student.friends.unshift({name:'jack',age:70})
    71.                 },
    72.                 updateFirstFriendName(){
    73.                     // 下面注释这么写就费了
    74.                     // this.student.friends[0] ='123'
    75.                     this.student.friends[0].name ='张三'
    76.                 },
    77.                 addHobby(){
    78.                     this.student.hobby.push('学习')
    79.                 },
    80.                 updateHobby(){
    81.                     // 从第0个开始，删除一个，并再加入一个开车
    82.                     // this.student.hobby.splice(0,1,'开车')
    83.                     
    84.                     // 将数组中的下标为0的修改为开车
    85.                     Vue.set(this.student.hobby,0,'开车')
    86.  
    87.                 }
    88.             },
    89.         })
    90.     script>   
    91. html>

    总结：Vue监视数据的原理

      1.vue会监视data中所有层次的数据

      2.如何检测对象中的数据？

         通过setter实现监视，且要在new Vue时就传入要监测的数据

            ①对象中后追加的属性，Vue默认不做响应式处理

            ②如需给后添加的属性做响应式处理，需要下面的API

    3. 如何监测数组中额的数据？

          通过包裹数组更新元素的方法实现，本质就是做了两件事：

             ①调用原生对应的方法对数组进行更新

             ②重新解析模板，进而更新页面

    4.在Vue修改数组中的某个元素一定要用如下方法

  • 相关阅读:
    RS485接线方式
    如何快速实现一个颜色选择器
    【Flutter】Flutter 中 sqflite 的基本使用
    Inductor characater
    L6.linux命令每日一练 -- 第二章 文件和目录操作命令 -- touch和ls命令
    服务器上一个域名对应多个前端项目的nginx转发配置
    计算机、通信及信号处理领域各单位的期刊与会议分级
    java笔记37，Lambda表达式
    Google Guava精讲（一）-Guava是什么？能做什么？
    java学习day22（网络编程）网络编程
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126670260