vue监视属性

监视属性watch:

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

(1)new Vue时传入watch配置

(2)通过vm.$watch监视

在配置对象中还有一个配置项:immediate: true

初始化时让handler调用一下

//第一种写法:写在vue实例内部
watch:{
    isHot:{
        immediate:true, //初始化时让handler调用一下
            //handler什么时候调用?当isHot发生改变时。
            handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }
}
//第二种写法:写在vue实例外面
vm.$watch('isHot', {
    immediate: true,//初始化时让handler调用一下
    //handler什么时候调用?当isHot发生改变时
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue)
    }
})

完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <!--    <h1>今天天气很{{isHot ? '炎热' : '凉爽'}}</h1>-->
    <h1>今天天气很{{weather}}</h1>
    <!--    绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句-->
    <!--    <button @click="isHot!=isHot">切换天气</button>-->
    <button @click="changeWeather">切换天气</button>

</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const vm = new Vue({
        el: "#root",
        data: {
            isHot: true
        },
        computed: {
            weather() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        /*watch: {
            isHot: {
                immediate: true,//初始化时让handler调用一下
                //handler什么时候调用?当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            }
        }*/
    })
    vm.$watch('isHot', {
        immediate: true,//初始化时让handler调用一下
        //handler什么时候调用?当isHot发生改变时
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
        }
    })
</script>
</body>
</html>

深度监视

  1. vue中的watch默认不会监测对象内部值的改变(一层)

  2. 配置 deep :true可以监测对象内部值改变(一层)

备注:

  1. vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <!--    <h1>今天天气很{{isHot ? '炎热' : '凉爽'}}</h1>-->
    <h1>今天天气很{{weather}}</h1>
    <!--    绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句-->
    <!--    <button @click="isHot!=isHot">切换天气</button>-->
    <button @click="changeWeather">切换天气</button>
    <hr>
    <h1>a的值是{{numbers.a}}</h1>
    <button @click="numbers.a++">点我a+1</button>
    <h1>b的值是{{numbers.b}}</h1>
    <button @click="numbers.b++">点我b+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    const vm = new Vue({
        el: "#root",
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            weather() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            //正常写法
            /*isHot: {
                immediate: true,//初始化时让handler调用一下
                //handler什么时候调用?当isHot发生改变时
                handler(newValue, oldHot) {
                    console.log('isHot被修改了', newValue, oldHot)
                }
            },*/
            //简写
            isHot: {
                handler(newValue, oldHot) {
                    console.log('isHot被修改了', newValue, oldHot)
                }
            },
            //监视多级结构中某个属性的变化
            /* 'numbers.a': {
                 // immediate: true,//初始化时让handler调用一下
                 //handler什么时候调用?当isHot发生改变时
                 handler(newValue, oldValue) {
                     console.log('a被修改了', newValue, oldValue)
                 }
             }*/
            numbers: {
                //监视多级结构中所有属性的变化
                deep: true,
                handler() {
                    console.log('numbers的值发生变化了')
                }
            }
        }
    })
</script>
</body>
</html>

只要监听的对象内部的值发生了改变都会触发watch种监视当当前属性的函数
请添加图片描述

watch和computed的区别

  1. computed能完成的功能,watch都可以完成
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作

两个重要的小原则:

  1. 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象

  2. 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等,Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象

### Vue.js 中计算属性监视器的区别 #### 计算属性的特点 计算属性用于声明依赖其他响应式数据的状态,并自动追踪这些依赖关系。当任何被依赖的数据发生改变时,计算属性会重新求值并更新视图[^4]。 ```javascript // 定义一个简单的计算属性 computed: { fullName() { return this.firstName + ' ' + this.lastName; } } ``` #### 监视器的特点 监视器允许开发者显式定义如何应对特定数据变化的行为逻辑。对于复杂的异步操作或开销较大的处理过程尤为适用[^2]。 ```javascript watch: { user(newValue, oldValue) { console.log(`User updated from ${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`); }, deep: true // 深度监听内部属性的变化 } ``` #### 使用场景差异 - **简单派生状态** 如果仅需基于现有数据创建新的展示形式而无需执行额外的操作,则推荐使用计算属性来简化代码结构和提高性能效率[^1]。 - **复杂业务逻辑** 需要针对某些条件触发网络请求或其他耗时任务的情况下更适合采用监视器实现更灵活的控制流管理。 #### 实际应用案例比较 考虑如下情况: - 用户输入过滤列表项:此时可以利用计算属性轻松完成筛选工作而不必关心具体何时发生了变动。 - 表单验证提交前检查有效性:可能涉及到多个字段间的相互影响以及跨组件通信等问题,这时借助于监视器能够更好地分离关注点并保持良好的可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值