【Vue2.0学习】—监视属性(三十五)

简介: 【Vue2.0学习】—监视属性(三十五)


  • 通过vm对象的$watchwatch配置来监视指定的属性
  • 当属性发生变化时,回调函数自动调用,在函数内部进行计算
    需求:做一个天气案例
<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="change">点我切换天气</button>
        <!-- <button @click="isHot=!isHot">点我切换天气</button> -->
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }
            }
        })
    </script>
</body>
</html>

一、监视属性watch

1、当被监视的属性发生变化时,回调函数自动调用,进行相关的操作

2、监视的属性必须存在,才能进行监视

监视属性的两种写法

  • new Vue时传入watch配置
  • 通过vm.$watch监视
<div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="change">点我切换天气</button>
        <!-- <button @click="isHot=!isHot">点我切换天气</button> -->
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }
            },
            // watch: {
            //     isHot: {
            //         immediate: true,
            //         //什么时候调用?当isHot发生改变时
            //         handler(newValue, oldValue) {
            //             console.log('isHot被修改了', newValue, oldValue);
            //         }
            //     }
            //}
        })
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        })
    </script>

二、深度监视

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
     深度监视
     1、Vue中的watch默认不能监测对象内部值的改变(一层)
     2、配置deep:true可以监测对象内部值改变(多层)
     注意:
     Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
     使用watch时根据数据的具体结构,决定是否采用深度监视
 -->
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="change">点我切换天气</button>
        <!-- <button @click="isHot=!isHot">点我切换天气</button> -->
        <hr>
        <h3>a的值是{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <hr>
        <h3>b的值是{{numbers.a}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers={a:666,b:999}">彻底替换掉numbers</button> {{numbers.c.d.e}}
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1,
                    c: {
                        d: {
                            e: 100
                        }
                    }
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                change() {
                    this.isHot = !this.isHot;
                }
            },
            watch: {
                //     'numbers.a': {
                //         handler() {
                //             console.log('a被改变了');
                //         }
                //     }
                //监视多级结构中所有属性的变化
                numbers: {
                    deep: true,
                    handler() {
                        console.log('numbers改变了');
                    }
                }
            }
        })
    </script>
</body>
</html>

三、深度监视的简写版


相关文章
|
2月前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
171 10
|
23天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
42 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
10天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
13天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
49 1
|
2月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
16天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
16 1
|
18天前
|
缓存 JavaScript
|
9天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
51 0
|
2月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
2月前
如何在 Vue3 中创建一个计算属性?
如何在 Vue3 中创建一个计算属性?
39 1