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

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

相关推荐
zwjapple30 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python