当前位置：首页 > news >正文

Vue基础(8)_监视属性、深度监视、监视的简写形式

news 来源：原创 2025/5/11 10:07:18

监视属性(watch)：

1.当被监视的属性变化时，回调函数(handler)自动调用，进行相关操作。
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

handler
在Vue中，handler方法是用于处理监听属性变化的函数。它通常与watch属性一起使用，用于监控数据的变化并执行相应的操作。handler方法可以帮助我们将处理逻辑抽象出来，以便复用和维护。
可传递参数：
newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值

immediate(布尔值)
immediate：立即的、马上的、立刻执行的。默认为 false。
作用：初始化时让handler先调用一下。

深度监视(deep)：
(1).Vue中的watch默认不监测对象内部值的改变。
(2).配置deep:true可以监测对象内部值改变(多层级结构监视)。

备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

监视的简写形式
前提条件：不需要immediate和deep属性，只需要handler时可简写。

watch:{isHot(){....}
}

或者：

vm.$watch("isHot", function(){...
})

举例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>天气案例</title>
</head>
<body><div id="root"><h2>今天天气很{{info}}</h2><!-- 绑定事件的时候：@xxx = "yyy" 中的 yyy 可以写一些简单的语句 --><!-- 下面的语句可简写成： <button @click = isHot = !isHot;>改变天气</button> --><button @click=changeWeacher>改变天气</button><h2>a的值是：{{numbers.a}}</h2><button @click="numbers.a++">点一次加1</button></div>
</body>
<script>const vm = new Vue({el: "#root",data: {isHot: true,numbers: {a: 1,b: 1}},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeacher() {this.isHot = !this.isHot;}},watch: {// 监视计算属性的变化（info）info: {// 初始化时让handler调用一下。immediate：立即的、马上的、立刻执行的。immediate: true,// handler什么时候调用？当info发生改变时。handler(newValue, oldValue) {console.log("info被修改了, 新值为：" + newValue, "旧值：" + oldValue)}},// 监视多级结构中某个属性的变化（numbers.a）'numbers.a': {handler(newValue, oldValue) {console.log("a的值改变了,新值为：" + newValue, "旧值：" + oldValue)}},// 监视多级结构中所有属性的变化（numbers.a、numbers.b等等）'numbers': {// 深度监视开启deep: true,handler() {console.log("numbers对象里有的值改变了")}}}})// 正常写法vm.$watch('isHot', {// immediate: true,// deep:true,handler(newValue, oldValue) {console.log("监视isHot变化", "新值为：" + newValue, "旧值：" + oldValue)}})// 简写形式vm.$watch('isHot',function (newValue, oldValue) {console.log("【监视isHot值，代码简写】", "新值为：" + newValue, "旧值：" + oldValue)})// 以上监视numbers.a的简写形式// 'numbers.a'(newValue, oldValue) {//     console.log("【监视a值代码简写】新值为：" + newValue, "旧值：" + oldValue)// },
</script>
</html>