vue-监视属性

文本转自于：https://blog.csdn.net/weixin_46376652/article/details/125689307 作者：frontEndSmallWhite

 

一、两种监视方式

1、watch属性直接监视

如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视

 

watch:{
            //正常写法
            Info:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
                }
            }
 
            //简写形式
            // Info(newValue,oldValue){
            //     console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
            // }
}

 

handler函数


监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；

 

接收两个参数：

 

newValue：表示新的值

oldValue：表示改变前的值

 

immediate属性：实现初始化的时候调用一次监视函数handler，默认为false

2、vm.$watch

如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 

 

//另一种写法，在vm外使用$调用
vm.$watch("Info",{
        handler(newValue,oldValue){
            console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
        }
})

二、深度监视


watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性

监视多级结构中某个属性的变化


watch:{ "numbers.a":{ ... } } //numbers是data上的一个key，里面包含a

注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号

 

deep属性

用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化

watch:{
            'numbers.a':{
                handler(){
                    console.log("numbers中的a改变了")
                }
            },
            numbers:{
                // 开启深度监视
                deep:true,
                handler(){
                    console.log("numbers改变")
                }
            }
}

 

三、监视属性的简写形式

与计算属性类似，当不需要使用其他属性，只使用handler属性时，可以使用简写形式

//简写形式
Info(newValue,oldValue){
     console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
}

 

演示代码：

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>键盘事件</title>
    <!--引入Vue-->

    <style></style>
  </head>
  <body>
    <!--准备好一个容器-->
    <div id="root">
      <h2>今天天气{{ info }}</h2>
      <button @click="change">切换天气</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示

    let vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        change() {
          this.isHot = !this.isHot;
        },
      },
      watch: {
        info: {
          immediate: true,
          handler(newValue, oldValue) {
            console.log(newValue, oldValue);
          },
        },
      },
    });
  </script>
</html>

 

posted @   しゅおく  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
· vue-计算属性和监视属性的区别和使用方法
· vue监视实操案例-根据导航条点击面包屑发生改动
· Vue之监视属性
· day59-监视属性
· Vue2入门之超详细教程九-监视属性
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示