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();

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

相关推荐
Yvonne爱编码3 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码3 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦15887 分钟前
Element-Plus
前端·vue.js·ts
IT_陈寒14 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子36 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css