本文共 954 字，大约阅读时间需要 3 分钟。

Vue.js 实例方法与数据绑定实例

6.1. vm.$set | vm.$delete

通过 vm.$set 和 vm.$delete 方法可以对 Vue 响应式数据对象进行增删操作，与传统的 Vue.set 和 Vue.delete 使用方式一致。

示例代码解析

   
    
    
position: {{ work.position }}
    
    ChangePosition
    
    DeletePosition
   

功能说明

• vm.$set(target, property, value)：将目标对象的指定属性设置为新的值。
• vm.$delete(target, property)：删除目标对象的指定属性。

实现效果

• 单击 "ChangePosition" 按钮后，work.position 会被更新为随机生成的值。
• 单击 "DeletePosition" 按钮后，work.position 属性将被移除。

6.2. vm.$watch( expOrFn, callback, [options] )

vm.$watch 用于监控 Vue 响应式数据对象的变化，适用于需要实时响应数据状态变化的场景。

参数说明

• expOrFn：监控的表达式或函数。
• callback：当目标属性变化时执行的回调函数。
• options：可选参数，支持 deep 和 immediate 两种选项。

示例代码解析

   
    
    
position: {{ work.position }}
    
    ClickMe
   

功能说明

• expOrFn 可以是简单的属性引用（如 work.position），也可以是复杂的计算表达式。
• callback 会在目标属性发生变化时被调用，传递新的值和旧值。
• deep 选项（默认为 false）决定是否递归监控嵌套对象的属性变化。
• immediate 选项（默认为 false）决定是否在初始挂载后立即执行回调函数。

实现效果

• 每次单击 "ClickMe" 按钮后，会执行一次回调函数，输出当前 work 对象的新值和旧值。
• 由于设置了 deep: true，即使 work.company 或其他嵌套对象发生变化，也能触发回调函数。