vue课程71 deep选项


<!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>
</head>
 
<body>
  <div id="app">
    <input type="text" v-model="info.username">
    <input type="text" v-model="info.address.city">
  </div>
 
  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>
 
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
         info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
        } 
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        // 'info.username'(newVal) {
        //   console.log(newVal)
        // }
      }
    })
  </script>
</body>
 
</html>

直接给deep属性设置为true

相关阅读:
Apollo Planning规划算法仿真调试(14)：Apollo中添加离线LGSVL仿真环境的HdMap实现联合仿真
kafka满五替换
【1678. 设计 Goal 解析器】
rpc网络
＜Rust＞＜iced＞＜resvg＞基于rust使用iced构建GUI实例：使用resvg库实现svg转png
Hadoop 3.x（MapReduce）----【Hadoop 数据压缩】
git快速入门!!! git的常用命令!!!
docker安装RabbitMQ及安装延迟插件
软考高级-系统架构师-软件架构设计练习题
Java常用工具环境安装手册（持续更新）

原文地址：https://blog.csdn.net/qq_41632427/article/details/125596434