watch 监听一个对象的属性

最新推荐文章于 2024-05-14 11:19:39 发布

洗刷先生

最新推荐文章于 2024-05-14 11:19:39 发布

阅读量285

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/xss12322/article/details/121731305

版权

本文介绍了Vue.js中如何通过`watch`指令实现对数据对象的深度监听，并详细解析了`watch`的`handler`回调函数及`deep`选项的工作机制。示例代码展示了在用户输入时触发更新并延迟获取答案的过程，强调了`immediate`选项的用途。文章深入浅出地探讨了Vue响应式系统的内部原理。

摘要由CSDN通过智能技术生成

<body>
    <div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="questions.question">
        </p>
        <p>{{ answer }}</p>
    </div>
</body>

var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            questions: {
                question: {}
            },
            answer: 'I cannot give you an answer until you ask a question!'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            'questions.question': {
                handler(value, oldValue) {
                    this.answer = 'Waiting for you to stop typing...'
                    this.debouncedGetAnswer()
                }
            },
            deep: true;
        },

示例：为官网示例

注意： handler 是固定函数，严禁自定义 handle （作者亲测）

使用deep需要使用watch的完整形式：

handler是监听回调函数，

deep: 监听其内部属性的变化

deep属性对对象进行深度监听

immediate: true 赋初值时就进行监听函数

洗刷先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
watch 监听一个对象的属性

<body> <div id="watch-example"> <p> Ask a yes/no question: <input v-model="questions.question"> </p> <p>{{ answer }}</p> </div></body>var ...
复制链接

扫一扫