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

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

相关推荐
小墨宝33 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED1 小时前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子1 小时前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue2 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架