文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中watch是什么属性

2023-05-14 21:38

关注

vue中watch是什么属性

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

vue监视属性

在开发中,我们会遇到这样一种情况,我们需要一个属性变化的时候,然后做出一些操作。而检测这个变化的属性,在vue中叫做监视属性。

1.监视属性是什么

在vue中,我们可以通过watch属性来监视某个属性的变化,当这个属性发生变化时,我们可以执行一些操作。

我们这里用一个天气案例来解释什么是监视属性:

首先html代码:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

接下来我们书写js代码:

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

在代码里面的handler这个函数就是我们前面说的回调函数,当isHot属性发生变化的时候,这个函数就会自动调用。

当然我们可以在idHot对象面添加一个属性:immediate,当此属性布尔值为真的时候,handler回调函数在初始化的时候就会调用一次。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

2.监视属性的写法

监视属性有两种写法:

这里的第一种写法上面我们已经展现过了,下面我们就展示一下第二种写法:

这里我们假设vue的实例化对象为vm。

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

3.监视属性之深度监视

前面我们实现的监视,只能监视vue实例data中直接的简单数据,要是遇到对象或者数组,就无法监视了。

这样做的方法是vue为了提高效率,在vue监视属性中,默认只监视一层,如果要监视多层,就需要我们手动开启深度监视。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

其中deep:true就开启了深度监视。 深度监视就是监视vue中data中的对象或者数组,当对象或者数组中的属性发生变化的时候,监视属性的回调函数就会自动调用。

在vue中其实是可以检测对象内部值的变化,那为什么vue监视属性不默认开启深度监视呢?

因为vue监视属性的回调函数是在数据发生变化的时候才会调用,如果开启深度监视,那么vue就要监视对象内部的所有属性,这样会大大降低vue的效率。

在我们使用监视属性的时候,我们根据具体的业务需求,来判断要不要开启深度监视。【相关推荐:vuejs视频教程、web前端开发】

以上就是vue中watch是什么属性的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯