1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <button @click="btnClick">{{name}}</button>
    5.     </div>
    6.     <script>
    7.         new Vue({
    8.             el: '#myApp',
    9.             data: {
    10.                 name: "张三",
    11.                 count: 0,
    12.                 zhangsan: {age: 20},
    13.                 array: [1,2,3]
    14.             },
    15.             computed: {
    16.                 count1(){
    17.                     return this.count + 1 + this.name +  this.zhangsan.age
    18.                 }
    19.             },
    20.             methods: {
    21.                 btnClick(){
    22.                     this.name='李四'; 
    23.                     this.count++;
    24.                     this.zhangsan.age++;
    25.                     this.zhangsan.sex = '男';
    26.                     // this.array.push(4);
    27.                     this.array[2] = "a"
    28.                 }
    29.             },  
    30.             // watch 是数据监视器, 它可以监视data中字段和计算属性的更新
    31.             watch:{
    32.                 // 函数名就是监视的字段名, 参数分别是更新之后和之前的值
    33.                 name(newValue, oldValue){
    34.                     console.log('name', oldValue, newValue)
    35.                 },
    36.                 // 监视计算属性
    37.                 count1(a,b){
    38.                     console.log('count1', a, b)
    39.                 },
    40.                 // 监听对象, 对象中属性字段的增删改都监听不到
    41.                 zhangsan(a,b){
    42.                     console.log('zhangsan',a,b )
    43.                 },
    44.                 // 监听数组, 数组长度变化可监听到,数组长度不变时监听不到
    45.                 array(a,b){
    46.                     // 数组监听参数, 都是数组的新值
    47.                     console.log("array", a,b)
    48.                 },
    49.                 // 如何监听对象的更新? 
    51.                 // 1, 针对性的监听对象中有一个字段的更新
    52.                 'zhangsan.age'(a,b){
    53.                     console.log("zhangsan.age", a,b)
    54.                 },
    55.                 // 2, 深度监听, 一般用于监听对象中数据的变化
    56.                 zhangsan: {
    57.                     handler(newValue){
    58.                         console.log('zhangsan',newValue)
    59.                     },
    60.                     deep: true // 开启深度监听
    61.                 },
    62.                 //数组通过索引修改数据,长度不变, 即不会重新渲染,也无法深度监听
    63.                 array: {
    64.                     handler(newValue){
    65.                         console.log("array", newValue)
    66.                     },
    67.                     deep: true
    68.                 }
    69.             }
    70.         })
    71.     </script>
    72. </body>