devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

数组的侦听_vue监听数组里的某个值变化

作者：羊村懒王 | 2024-03-12 07:57:01

赞

踩

vue监听数组里的某个值变化

1.侦听器的基本结构

作用：用来侦听数据有没有变化，一旦有变化就调用函数

语法：在和data、methods这些平级的位置写一个watch

  1. <script>
  2.         new Vue({
  3.             el:'',
  4.             data:{},
  5.             methods:{},
  6.             //侦听器
  7.             watch:{
  8.                 //参数一：改变后的值
  9.                 //参数二：改变前的值
  10.                 要侦听的数据(newValue,oldValue){
  11.  
  12.                 }
  13.             }
  14.         })
  15.     </script>

对数组进行侦听

数组是应用类型,存在比较复杂的侦听规则。

    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

    1.Vue不能检测以下数组的变动:

    a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue

    b.当你修改数组的长度时,例如:vm.items.length = newlength

    2.使用标准方法修改数组可以被侦听到

https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

    push() 尾部添加

    pop()尾部删除

    unshift()头部添加

    shift()头部删除

    splice()删除、添加、替换

    sort()排序

    reverse()逆序

    (Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

2.侦听器的基本使用

  1. <body>
  2.     <div id="app">
  3.         <button @click="msg= '再见' ">修改msg的值</button>
  4.         <p>{{ msg }}</p>
  5.     </div>
  6.     <script src="../vue.js"></script>
  7.  
  8.     <script>
  9.         new Vue({
  10.             el:'#app',
  11.             data:{
  12.                 msg:'你好'
  13.             },
  14.             //写侦听器的地方
  15.             watch:{
  16.                 //侦听的数据变化
  17.                 //基本数据类型，这两个参数有意义
  18.                 msg(newValue,oldValue){
  19.                     //侦听到数据变化之后，需要完成的行为
  20.                     console.log('数据改变了',newValue,oldValue);
  21.                 }
  22.             }
  23.         })
  24.     </script>
  25. </body>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <button @click="list.push('蜡笔小新')">添加一个项</button>
  12.         <button @click="list.pop()">删除一个项</button>
  13.         <!-- 利用索引值改变数组时，不能被侦听到 -->
  14.         <button @click="list[0] = '病猫' ">修改第一项</button>
  15.         <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
  16.         <ul>
  17.             <li v-for="item in list">
  18.                 {{item}}
  19.             </li>
  20.         </ul>
  21.     </div>
  22.  
  23.     <script src="../vue.js"></script>
  24.  
  25.     <script>
  26.         new Vue({
  27.             el:'#app',
  28.             data:{
  29.                 list:['龙猫','哈尔的移动城堡','千与千寻','你的名字']
  30.             },
  31.             watch:{
  32.                 //侦听list的改变
  33.                 list(){
  34.                     console.log('数组改变了');
  35.  
  36.                     //把数据存到本地存储
  37.                     //本地存储只能存字符串，复杂类型要转成JSON字符串才能存储
  38.                     window.localStrage.setItem('note',JSON.stringify(this.list))
  39.                 }
  40.             }
  41.         })
  42.     </script>
  43. </body>
  44. </html>

 在数组中使用侦听器总结:

    1.彻底替换为一个新数组,那么可以被侦听到。

    2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。

    3.如果直接修改数组的元素,那么无法被侦听到。

      (解决方法:使用$set(()方法修改元素的值。Vue3语法。)

       不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。

3.侦听器的完整写法

  1. <body>
  2.     <!-- 对对象进行侦听 -->
  3.     <div id="app">
  4.         <p></p>
  5.     </div>
  6.  
  7.     <script src="../vue.js"></script>
  8.  
  9.     <script>
  10.         new Vue({
  11.             el:'#app',
  12.             data:{
  13.                 obj:{
  14.                     name:'jack',
  15.                     age:17,
  16.                     height:180
  17.                 }
  18.             },
  19.             watch:{
  20.                 // 这种写法侦听不到obj对象内部属性的变化，
  21.                 // 只能侦听到obj对象指向的变化。
  22.                 // obj(){
  23.                 // console.log('obj变化了'); 
  24.                 // }，
  25.  
  26.                 // 如果想侦听到对象里属性的变化.
  27.                 // 侦听obj里name的变化(要记得加引号)
  28.                 // "obj.name"(){
  29.                 // console.log('name变化了'); 
  30.                 // },
  31.  
  32.                 // 可是这样写只能侦听一个属性。
  33.                 //如果希望侦听到对象里所有属性的变化,就要开启深度侦听。
  34.                 obj:{
  35.                     handler(){
  36.                         console.log('obj的属性变化了');
  37.                     },
  38.  
  39.                     // 开启深度侦听
  40.                     deep:true,
  41.  
  42.                     //要不要当前页面一打开就立即调用handler函数。
  43.                     // 给true表示立即调用,默认是flase。(代表只有改动了才调用
  44.                     immediate:true
  45.                 }
  46.             }
  47.         })
  48.     </script>
  49. </body>

4.侦听器在数组中的使用

  1. <body>
  2.     <div id="app">
  3.         <li v-for="item in list">
  4.             {{item}}
  5.         </li>
  6.         <ul>
  7.             <button @click="list.push('蜡笔小新')">添加一个项</button>
  8.         </ul>
  9.     </div>
  10.     <script src="../vue.js"></script>
  11.     <script>
  12.         new Vue({
  13.             el:'#app',
  14.             data:{
  15.                 list:['千与千寻','哈尔的移动城堡','龙猫']
  16.             },
  17.             watch:{
  18.                 //复杂数据类型，这两个参数没有意义，因为地址没变。
  19.                 //所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也是写一个。
  20.                 list(newValue,oldValue){
  21.                     console.log('数组改变了',newValue,oldValue);
  22.                 }
  23.             }
  24.         })
  25.     </script>
  26. </body>

   【对数组进行侦听】

    数组是应用类型,存在比较复杂的侦听规则。

    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

    1.Vue不能检测以下数组的变动:

    a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue

    b.当你修改数组的长度时,例如:vm.items.length = newlength

    2.使用标准方法修改数组可以被侦听到

    https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

    push() 尾部添加

    pop()尾部删除

    unshift()头部添加

    shift()头部删除

    splice()删除、添加、替换

    sort()排序

    reverse()逆序

    (Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

   

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/223110
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号