Observer和Dep以及wacher概念

  1. Observer(观察者): Observer用于将一个普通的JavaScript对象转换为响应式对象。它递归地遍历对象的所有属性并使用Object.defineProperty将它们转换为getter和setter。这样,在属性被获取或修改时,就能够触发相应的操作。

  2. Dep(依赖): Dep是一个依赖管理器,用于管理多个Watcher实例。在Vue的响应式系统中,每个响应式对象都有一个对应的Dep实例。当属性被访问时,会将依赖收集到该属性对应的Dep实例中,而当属性被修改时,会通知该属性对应的Dep实例,然后Dep实例会通知所有依赖的Watcher更新视图。

  3. Watcher(观察者): Watcher用于观察响应式对象的变化,并执行相应的回调函数。在Vue中,我们可以使用watch选项或$watch方法创建一个Watcher实例,用于监听某个属性的变化。当属性发生变化时,Watcher会接收到通知,并执行相应的回调函数。

下面是一个简单的例子,展示了如何在Vue中使用Watch

javascript 复制代码
new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
    }
  }
});

在上述代码中,我们定义了一个watch选项,它包含一个message属性的监听器函数。当message属性发生变化时,监听器函数会被调用,接收到新值和旧值作为参数。

你也可以使用$watch方法来创建一个Watcher实例:

javascript 复制代码
const vm = new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});
​
vm.$watch('message', (newVal, oldVal) => {
  console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});

通过$watch方法创建的Watcher实例可以手动销毁,使用unwatch方法:

javascript 复制代码
const unwatch = vm.$watch('message', (newVal, oldVal) => {
  console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});
​
// 手动销毁Watcher
unwatch();

希望以上解释对你有所帮助!

相关推荐
麦麦大数据13 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿18 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端