vue监控props

转载

mob64ca1417736e 2024-09-17 11:20:26

文章标签 vue监控props vue.js javascript 前端 Vue 文章分类 运维

<!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 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- <button @click="changeWeather">切换天气</button> -->
        <!-- 事件逻辑很简单，可以简写 -->
        <button @click="isHot = !isHot">切换天气</button>
    </div>

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

        new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                /* changeWeather(){
                    this.isHot = !this.isHot
                } */
            },
        })
    </script>
</body>
</html>

了解监视属性

<!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 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<-- 
    监视属性watch:
        1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作
        2.监视的属性必须存在，才能进行监视
        3.监视的两种写法:
            (1).new Vue时传入watch配置
            (2).通过 vm.$watch监视
 -->
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

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

        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            // 监视属性
            watch: {
                isHot: {
                    // immediate: true,    // 初始化时调用handler一下
                    // handler在什么时候调用, 当isHot发生改变时调用
                    handler(newValue, oldValue){
                        console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
                    }
                }
            }
        })

        // 也可以这么写
        vm.$watch('isHot', {
            // immediate: true,    // 初始化时调用handler一下
                // handler在什么时候调用, 当isHot发生改变时调用
                handler(newValue, oldValue){
                    console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
                }
        })
    </script>
</body>
</html>

深度监视

<!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 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<-- 
    深度监视：
        (1).Vue中的watch默认不监视对象内部值的改变（一层）
        (2).配置deep: true 可以监测对象内部值的改变（多层）
    备注：
        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
        (2).使用watch时根据数据的具体结构，决定是否采用深度监视
 -->
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <br>
        <h3>a的值为: {{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值为: {{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a: 100, b: 200}">彻底替换掉numbers</button>
    </div>

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

        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 2
                }
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            // 监视属性
            watch: {
                isHot: {
                    // immediate: true,    // 初始化时调用handler一下
                    // handler在什么时候调用, 当isHot发生改变时调用
                    handler(newValue, oldValue){
                        console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
                    }
                },
                // 监视多级结构中某个属性的变化
                /* 'numbers.a': {
                    handler(){
                        console.log('numbers.a改变了')
                    }
                } */

                // 监视多级结构中所有属性的变化
                numbers: {
                    deep: true, // 开启多级属性监视，默认是关闭的
                    handler(){
                        console.log('numbers改变了')
                    }
                }
            }
        })
    </script>
</body>
</html>

监视属性简写

<!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 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

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

        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            // 监视属性
            watch: {
                // 正常写法
                /* isHot: {
                    deep: true,
                    handler(newValue, oldValue){
                        console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
                    }
                } */
                // 简写
                /* isHot(newValue, oldValue){
                    console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
                } */
            }
        })

        // 正常写法
        /* vm.$watch('isHot', {
            deep: true,
            handler(newValue, oldValue){
                console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
            }
        }) */

        // 简写
        vm.$watch('isHot', function(newValue, oldValue){
                console.log('isHot被修改了,原来的值: ' + oldValue + '现在的值: ' + newValue)
            })
    </script>
</body>
</html>

computed 和 watch 之间的区别

<!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>姓名案例_watch简写</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<-- 
    computed 和 watch 之间的区别
        1.computed能完成的功能，watch都能实现
        2.watch能完成的功能，computed不一定能实现，例如：watch可以进行异步操作
    两个重要的小原则：
        1.所被Vue管理的函数，最好写成普通函数（不要写成箭头函数），这样this的指向才是vm 或 组件实例对象
        2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，
            这样this指向才是 vm 或 组件实例对象
 -->
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName">
        <br>
        名：<input type="text" v-model="lastName">
        <br>
        全名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        // 阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '张_三'
            },
            watch: {
                firstName(val){
                    // 延时一秒生效
                    setTimeout(() =>{
                        // 新的姓加原始的名
                        this.fullName = val + '_' + this.lastName
                    }, 1000)
                },
                lastName(val){
                    // 原始的姓加新的名
                    this.fullName = this.firstName + '_' + val
                }
            }
        })
    </script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。