Vue-监听属性

监听属性

简单监听

点击切换名字,来回变更Tom/Jerry,输出 你好,Tom/Jerry

  • 代码
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>监听属性</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>监听属性</h1>
      <div>
        <h2>你好,{{name}}</h2>
        <button @click="changeName">切换名字</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        isTom: true
      },
      computed: {
        name(){
          return this.isTom ? "Tom" : "Jerry"
        }
      },
      methods: {
        changeName(){
          this.isTom = !this.isTom
        }
      },
      watch: {
        // isTom:{
        //   immediate:true, //初始化就执行handler方法
        //   // isTom发生改变时执行
        //   handler(newValue,oldValue){
        //     console.log("isTom切换了", oldValue + "->" + newValue)
        //   }
        // },
        name:{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("名字切换了", oldValue + "->" + newValue)
          }
        }
        
      },
    });
    vm.$watch('isTom',{
      immediate:true, //初始化就执行handler方法
      // isTom发生改变时执行
      handler(newValue,oldValue){
        console.log("isTom切换了", oldValue + "->" + newValue)
      }
    })
  </script>
</html>
  • 效果

深度监听

监听对象发生变更 numbers:{x:1,y:1}

对象某个属性监听 (x)

  • 代码
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>监听属性</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>监听属性</h1>
      <div>
        <h2>你好,{{name}}</h2>
        <button @click="changeName">切换名字</button>
        <h2>单属性监听</h2>
        <button @click="numbers.x++">监听x+1</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        isTom: true,
        numbers:{
          x:1,
          y:2
        }
      },
      computed: {
        name(){
          return this.isTom ? "Tom" : "Jerry"
        }
      },
      methods: {
        changeName(){
          this.isTom = !this.isTom
        }
      },
      watch: {
        // isTom:{
        //   immediate:true, //初始化就执行handler方法
        //   // isTom发生改变时执行
        //   handler(newValue,oldValue){
        //     console.log("isTom切换了", oldValue + "->" + newValue)
        //   }
        // },
        name:{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("名字切换了", oldValue + "->" + newValue)
          }
        },
        'numbers.x':{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("x变更了", oldValue + "->" + newValue)
          }
        },
        numbers:{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("numbers变更了", oldValue + "->" + newValue)
          }
        }
        
      },
    });
    vm.$watch('isTom',{
      immediate:true, //初始化就执行handler方法
      // isTom发生改变时执行
      handler(newValue,oldValue){
        console.log("isTom切换了", oldValue + "->" + newValue)
      }
    })
  </script>
</html>
  • 效果

发现变更x, 并没有监听到numbers变更

属性变更能监听到整个对象的变化

深度监听 deep:true 可以监听对象内部的值改变(支持多层级)

  • 代码
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>监听属性</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>监听属性</h1>
      <div>
        <h2>你好,{{name}}</h2>
        <button @click="changeName">切换名字</button>
        <h2>单属性监听</h2>
        <button @click="numbers.x++">监听x+1</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        isTom: true,
        numbers:{
          x:1,
          y:2
        }
      },
      computed: {
        name(){
          return this.isTom ? "Tom" : "Jerry"
        }
      },
      methods: {
        changeName(){
          this.isTom = !this.isTom
        }
      },
      watch: {
        // isTom:{
        //   immediate:true, //初始化就执行handler方法
        //   // isTom发生改变时执行
        //   handler(newValue,oldValue){
        //     console.log("isTom切换了", oldValue + "->" + newValue)
        //   }
        // },
        name:{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("名字切换了", oldValue + "->" + newValue)
          }
        },
        'numbers.x':{
          immediate:true, //初始化就执行handler方法
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("x变更了", oldValue + "->" + newValue)
          }
        },
        numbers:{
          immediate:true, //初始化就执行handler方法,
          deep:true,// 可以监听对象内部的值改变(支持多层级)
          // isTom发生改变时执行
          handler(newValue,oldValue){
            console.log("numbers变更了", JSON.stringify(oldValue) + "->" +  JSON.stringify(newValue))
          }
        }
        
      },
    });
    vm.$watch('isTom',{
      immediate:true, //初始化就执行handler方法
      // isTom发生改变时执行
      handler(newValue,oldValue){
        console.log("isTom切换了", oldValue + "->" + newValue)
      }
    })
  </script>
</html>
  • 效果

简写

前提条件:不需要特殊配置(deep、immediate)方可简写

  • 代码
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>监听属性</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>监听属性</h1>
      <div>
        <h2>你好,{{name}}</h2>
        <button @click="changeName">切换名字</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        isTom: true,
      },
      computed: {
        name() {
          return this.isTom ? "Tom" : "Jerry";
        },
      },
      methods: {
        changeName() {
          this.isTom = !this.isTom;
        },
      },
      watch: {
        // 常规操作
        // name:{
        //   immediate:true, //初始化就执行handler方法
        //   // isTom发生改变时执行
        //   handler(newValue,oldValue){
        //     console.log("名字切换了", oldValue + "->" + newValue)
        //   }
        // },

        // 简写
        name(newValue, oldValue) {
          console.log("名字切换了", oldValue + "->" + newValue);
        },
      },
    });
    // 正常写法
    // vm.$watch('isTom',{
    //   immediate:true, //初始化就执行handler方法
    //   // isTom发生改变时执行
    //   handler(newValue,oldValue){
    //     console.log("isTom切换了", oldValue + "->" + newValue)
    //   }
    // })

    // 简写
    vm.$watch("isTom", function (newValue, oldValue) {
      console.log("isTom切换了", oldValue + "->" + newValue);
    });
  </script>
</html>
  • 效果
相关推荐
麦麦大数据17 小时前
F039 python五种算法美食推荐可视化大数据系统vue+flask前后端分离架构
python·算法·vue·推荐算法·美食·五种算法
java水泥工1 天前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
阿洛学长2 天前
高质量 AI 提示词之(从 0-1 开发 Vue 项目)
vue·ai编程·1024程序员节
IT教程资源D2 天前
[N_149]基于微信小程序网上商城系统
mysql·vue·前后端分离·springboot网上商城·网上商城小程序
ytgytg282 天前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
学会煎墙2 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
神膘护体小月半3 天前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
江拥羡橙3 天前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
惜.己4 天前
从零使用vue脚手架开发一个简易的计算器
vue·js·1024程序员节
@AfeiyuO4 天前
el-table 表格嵌套表格
前端·elementui·vue