vue学习路线(10.监视属性-watch)

一、用案例引出监视属性 watch

案例:点击'切换天气'按钮,页面红色文字发生变化(如果是凉爽改为炎热,如果是炎热改为凉爽),同时控制台打印变化日志。

1、普通写法
xml 复制代码
<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="changeWeather">切换天气</button>
kotlin 复制代码
data() {
    return {
        isHot: false,
    };
},
computed: {
    info() {
        return this.isHot ? "炎热" : "凉爽";
    },
},
methods: {
    changeWeather() {
        this.isHot = !this.isHot;
        console.log("天气变化了,现在是:" + this.info + ",原来是" + (this.isHot ? "凉爽" : "炎热"));
    }
},
2、new Vue时传入watch配置

当属性变化时,回调函数自动调用,在函数内部进行计算。

xml 复制代码
<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>
javascript 复制代码
data() {
    return {
        isHot: false,
    };
},
computed: {
    info() {
        return this.isHot ? "炎热" : "凉爽";
    },
},
watch: {
     info: {
         handler(newValue, oldValue) {
             console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
         },
      },
},
3、通过vm.$watch监视

两种watch用法,handler内部写法一致

xml 复制代码
<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>
javascript 复制代码
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isHot: false,
          };
        },
        computed: {
          info() {
            return this.isHot ? "炎热" : "凉爽";
          },
        },
      });

      vm.$watch("info", {
        handler(newValue, oldValue) {
          console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
        },
      });

二、watch 的特点

    1. 当被监视的属性发生变化时,回调函数自动调用,进行相关操作;
    1. 监视的属性必须存在,才能进行监视!!
    1. 监视的两种写法:

    1)new Vue时传入watch配置

    2)通过vm.$watch监视

三、watch 属性的选项

  • immediate: true:表示在监听开始时立即执行回调函数,而不是等到数据变化时才执行。
  • deep: true:表示深度监听,适用于监听对象或数组的变化。
javascript 复制代码
 watch: {
          info: {
            immediate:true,//默认false。改为true表示立即执行回调函数。
            deep:true,// 默认false。深度监听,适用于监听对象或数组
            handler(newValue, oldValue) {
              console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
            },
          },
        },

四、watch 监视属性简写

  • 当配置项只有handler时,可以简写
  • 不能写成箭头函数
1、new Vue时传入watch配置(简写)
javascript 复制代码
watch: {
    info(newValue, oldValue) {
        console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
    },
},
2、通过vm.$watch监视(简写)
javascript 复制代码
vm.$watch("info", function (newValue, oldValue) {
    console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
});

五、watch 深度监视特点

1、深度监听特点
  • 1.vue中的watch默认不监测对象内部值的改变(一层)。
  • 2.配置deep:true可以监测对象内部值的改变(多层)。
2、深度监听案例
less 复制代码
      <h3>a的值是{{numbers.a}}</h3>
      <button @click="numbers.a++">点我a+1</button>
      <h3>b的值是{{numbers.b}}</h3>
      <button @click="numbers.b++">点我b+1</button>
css 复制代码
        data() {
          return {
            numbers: {
              a: 1,
              b: 1,
            },
          };
        },
实现一:只监视a,不监视b(监视多级结构中某个属性的变化)
javascript 复制代码
        watch: {
          // 只监视a,不监视b
           'numbers.a': {
              handler(newValue, oldValue) {
                console.log(newValue,oldValue);
              },
            },
        },
实现二:深度监听number变化(监视多级结构中所有属性的变化)
javascript 复制代码
        watch: {
          //深度监听
           'numbers': {
            deep:true,//开启深度监听
              handler(newValue, oldValue) {
                console.log('numbers变化了');
              },
            },
        },
3、备注
  • 1.vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以(为了效率)。

  • 2.使用watch时根据数据的具体结构,决定是否采用深度监听。

相关推荐
hahala233315 分钟前
ESLint 提交前校验技术方案
前端
夕水37 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了40 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
aklry2 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin932 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端