Vue中watch应用demo

最新推荐文章于 2024-05-03 16:31:49 发布

__畫戟__

最新推荐文章于 2024-05-03 16:31:49 发布

阅读量909

点赞数

分类专栏： JavaScript VUE

本文链接：https://blog.csdn.net/qq_41887214/article/details/85623672

版权

JavaScript 同时被 2 个专栏收录

63 篇文章 4 订阅

订阅专栏

VUE

43 篇文章 1 订阅

订阅专栏

watch对应一个对象，键是观察表达式，值是对应回调，也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;

immediate

watch 的一个特点是，最初绑定的时候是不会执行的，要等到监听的属性改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

deep

深度监听，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

数组的变化，不需要深度侦听

demo：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div class="demo0">
        <label for="userName0">姓名0</label>
        <input id="userName0" type="text" v-model="userName0">
        <label for="age0">年龄</label>
        <input id="age0" type="text" v-model="age0">
        <label>爱好0：</label>
        <input id="hobbies0" type="checkbox" v-model="hobbies0" value="0"><label for="hobbies0">抽烟</label>
        <input id="hobbies1" type="checkbox" v-model="hobbies0" value="1"><label for="hobbies1">喝酒</label>
        <input id="hobbies2" type="checkbox" v-model="hobbies0" value="2"><label for="hobbies2">烫头</label>
    </div>
    <div>
        <label for="userName1">姓名1</label>
        <input type="text" id="userName1" v-model="userInfo.userName1">
        <label>爱好1：</label>
        <input id="hobbies3" type="checkbox" v-model="userInfo.hobbies1" value="3"><label for="hobbies3">抽烟</label>
        <input id="hobbies4" type="checkbox" v-model="userInfo.hobbies1" value="4"><label for="hobbies4">喝酒</label>
        <input id="hobbies5" type="checkbox" v-model="userInfo.hobbies1" value="5"><label for="hobbies5">烫头</label>
    </div>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            userName0: '',
            age0: '',
            hobbies0: [],
            userInfo: {
                userName1: '',
                hobbies1: []
            }
        },
        methods: {
            age(curVal, oldVal) { // 值为回调
                console.log(curVal, oldVal)
            }
        },
        watch:{
            userName0: function (curVal, oldVal) { // 值为回调
                console.log(curVal, oldVal)
            },
            age0: 'age', // 值可以为methods的方法名
            hobbies0:  function (curVal, oldVal) { // 数组的变化，值为回调，不需要深度侦听
                console.log(curVal, oldVal)
            },
            userInfo: { // 监听一个对象，对应值为对象
                handler (curVal, oldVal) {
                    console.log(curVal, oldVal)
                },
                deep: true, // 对象内部的属性监听，深度侦听
                immediate: true // 声明的时候，就立即执行handler方法
            },
            'userInfo.userName1': function (curVal, oldVal) { // 监听对象内部单个属性，键路径必须加上引号，值为回调
                console.log(curVal, oldVal)
            },
            'userInfo.hobbies1': function (curVal, oldVal) { // 监听对象内部单个属性，键路径必须加上引号，并且对象内部数组的变化，值为回调，不需要深度侦听
                console.log(curVal, oldVal)
            },
        }
    })
    vm.$watch("userName0",function (curVal, oldVal) { // 值为回调
        console.log(curVal, oldVal)
    })// 调用$watch方法来进行数据监测
</script>
</body>
</html>

__畫戟__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中watch应用demo

watch对应一个对象，键是观察表达式，值是对应回调，也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用$watch();<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫