vue中三种watcher

在分析之前我们先来看看,vue中都有哪些Watcher种类呢?以及分别在什么时候创建呢?从vue源码里面看,Watcher是一个公共类,在不同的地方去初始化Watcher就代表不同类的Watcher。主要分为以下三类:

  • computed watcher:执行计算属性更新computed
  • user watcher:用户注册的普通watcher
  • render watcher:负责视图更新

注意者三种watcher的执行顺序为computed watcheruser watcherrender watcher

这么执行原因也很简单,当computedwatcher将数据更新完成之后,要渲染到我们的视图上的时候触发render watcher

好了,下面我们来看看vue中三种watcher的创建时机。

Vue的首次渲染

new Vue实例化时,执行_init方法(src\core\instance\init.js)

执行_init方法(在src\core\instance\init.js定义)

主要源码:

// 对传入的配置与默认配置合并vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)vm._self = vminitLifecycle(vm) // 初始化组件的$parent\$root\$children\$ref属性initEvents(vm) // 初始化组件的事件监听initRender(vm) // 初始化$slots属性, 定义 $createElement和vm._c方法(用于生成虚拟dom),对组件的$listeners、$attrs做响应式处理callHook(vm, 'beforeCreate') // 执行beforeCreate生命周期函数initInjections(vm) // 获取组件的inject所有属性,并做响应式处理initState(vm) // 组件数据的初始化以及响应式处理:按顺序 props => methods => data => computed => watchinitProvide(vm) // 获取组件的provide所有属性,并做响应式处理callHook(vm, 'created') // 执行created生命周期函数// 处理完组件相关的数据后,开始执行$mount方法if (vm.$options.el) {vm.$mount(vm.$options.el) // $mount 在src\platforms\web\entry-runtime-with-compiler.js文件中执行了扩展}

Computed Watcher

在vue的初始化阶段,调用initState,判断对象的computed是否存在值,如果存在则调用initComputed初始化computed,在这个方法中对computed Watcher进行了初始化。

源码位置:src/core/instance/state.js

export function initState (vm: Component) {vm._watchers = []const opts = vm.$options...if (opts.computed) initComputed(vm, opts.computed)...
}

在initComputed中,首先定义了一个空的watchers对象对象迎来存储所有的计算属性对应的watcher;接着遍历组件中定义的计算属性,且对其添加watcher进行监听(调用defineComputed添加get和set)

function initComputed (vm: Component, computed: Object) {// 定义一个watchers空对象,用于存储所有计算属性对应的watcherconst watchers = vm._computedWatchers = Object.create(null)// computed properties are just getters during SSRconst isSSR = isServerRendering()//遍历每个计算属性for (const key in computed) {const userDef = computed[key] //userDef的每一项都是computed对应的回调函数const getter = typeof userDef === 'function' ? userDef : userDef.getif (process.env.NODE_ENV !== 'production' && getter == null) {warn(`Getter is missing for computed property "${key}".`,vm)}if (!isSSR) {// 创建一个内部的watcher给计算属性watchers[key] = new Watcher(vm,//组件实例getter || noop,noop,computedWatcherOptions//配置)}// 判断如果key不是vm的属性,则执行defineComputed()函数if (!(key in vm)) {defineComputed(vm, key, userDef)} else if (process.env.NODE_ENV !== 'production') {//接着判断当前计算属性是否与data或者props中定义的变量冲突if (key in vm.$data) {warn(`The computed property "${key}" is already defined in data.`, vm)} else if (vm.$options.props && key in vm.$options.props) {warn(`The computed property "${key}" is already defined as a prop.`, vm)} else if (vm.$options.methods && key in vm.$options.methods) {warn(`The computed property "${key}" is already defined as a method.`, vm)}}}
}

这里defineComputed内部其实就是使用Object.defineproperty让computed数据成为一个响应式数据,并为他定义get属性,即页面渲染的时候访问computed时会触发他的get。然后执行CreateComputedGetter方法:

function createComputedGetter (key) {return function computedGetter () {const watcher = this._computedWatchers && this._computedWatchers[key]if (watcher) {if (watcher.dirty) {//true表示需要计算watcher.evaluate()}if (Dep.target) { //这是页面渲染的时候出发,因此是render-watcherwatcher.depend() //收集当前的watcher}return watcher.value }}
}

User Watcher

这个也是在初始化阶段创建的。不同的是user watcher是在initWatch中创建的,且它是一个个的去遍历创建。

在src/core/instance/state.js文件中initState中调用initWatch()初始化User watcher.

export function initState (vm: Component) {vm._watchers = []const opts = vm.$options...if (opts.watch && opts.watch !== nativeWatch) {initWatch(vm, opts.watch)}
}

在initWatch中,会逐个遍历watch列表,逐个创建Watcher实例。

function initWatch (vm: Component, watch: Object) {//遍历watch对象列表,逐个创建Watcher实例for (const key in watch) {//handler可以是数组或者对象const handler = watch[key]if (Array.isArray(handler)) {for (let i = 0; i < handler.length; i++) {createWatcher(vm, key, handler[i])}} else {createWatcher(vm, key, handler)}}

上面代码仅仅是将watch列表进行了遍历,真正去创建是使用createWatcher。而下面的方法内部又是使用$watch给每个watch分发watcher.

function createWatcher (vm: Component,keyOrFn: string | Function,handler: any,options?: Object
) {if (isPlainObject(handler)) {options = handlerhandler = handler.handler}if (typeof handler === 'string') {handler = vm[handler]}return vm.$watch(keyOrFn, handler, options)
}

Render Watcher
最后执行KaTeX parse error: Undefined control sequence: \platforms at position 11: mount(在src\̲p̲l̲a̲t̲f̲o̲r̲m̲s̲\web\runtime\in…mount
2 如果有template,将template转为render函数
3 如果有el属性,通过el获取dom,并转为template,再将template转为render函数
得到render函数后,赋值给vm.options.render, 继续执行options.render,继续执行mount
最终执行mountComponent函数(在src\core\instance\lifecycle.js定义)

export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean
): Component {// 获取el,也就是domvm.$el = elconsole.log("lifecycle.js",el)// 判断实例上是否存在渲染函数,如果不存在;// 则设置一个默认的渲染函数createEmptyVNode,render相当于createEmptyVNode//createEmptyVNode :创建一个节点为空的vNode函数if (!vm.$options.render) {vm.$options.render = createEmptyVNodeif (process.env.NODE_ENV !== 'production') {/* istanbul ignore if */if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||vm.$options.el || el) {warn('You are using the runtime-only build of Vue where the template ' +'compiler is not available. Either pre-compile the templates into ' +'render functions, or use the compiler-included build.',vm)} else {warn('Failed to mount component: template or render function not defined.',vm)}}}//调用callHook函数来触发beforeMount生命周期钩子函数,可以为理解此时只是render 函数并没有形成虚拟dom,// 也没有将页面内容真正渲染上callHook(vm, 'beforeMount')// 定义updateComponent,这个函数中参数'vm._render()'将会为我们得到一份最新的VNode
// 节点树,'如果调用了updateComponent函数,就会将最新的模板内容渲染到视图页面中'let updateComponent/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {updateComponent = () => {const name = vm._nameconst id = vm._uidconst startTag = `vue-perf-start:${id}`const endTag = `vue-perf-end:${id}`mark(startTag)const vnode = vm._render()mark(endTag)measure(`vue ${name} render`, startTag, endTag)mark(startTag)vm._update(vnode, hydrating)mark(endTag)measure(`vue ${name} patch`, startTag, endTag)}} else {updateComponent = () => {vm._update(vm._render(), hydrating)}console.log(vm._update)}// updateComponent函数作为第二个参数传给Watcher类从而创建了watcher实例,那么// updateComponent函数中读取的所有数据都将被watcher所监控------------------------------------------------new Watcher(vm, updateComponent, noop, {before () {if (vm._isMounted && !vm._isDestroyed) {callHook(vm, 'beforeUpdate')}}}, true /* isRenderWatcher */)hydrating = false
------------------------------------------------if (vm.$vnode == null) {//vm.$vnode为null代表着不是一次组件的初始化过程,而是外部通过new vue初始化过程vm._isMounted = true  //标志位表示挂载已完成,调用mounted钩子函数callHook(vm, 'mounted')}return vm 
}

执行mountComponent(在src\core\instance\lifecycle.js定义)

执行beforeMount生命周期
设置组件更新函数updateComponent => vm._update(vm._render(), hydrating )
实例化Watcher,传入组件更新函数updateComponent
Watcher实例化时,会触发一次组件更新,即执行updateComponent
先执行vm_render(即$mount里生成的render函数),生成当前组件的虚拟dom 即vnode,并传入vm._update
执行vm._update(在src\core\instance\lifecycle.js定义)
_update主要是执行vm.patch(在src\platforms\web\runtime\index.js定义)
最终执行patch(在src\core\vdom\patch.js文件中所返回的patch函数),无论是首次渲染还是组件更新,最后都是执行patch函数
因为是首次渲染,所以主要流程是将传入的虚拟dom转为真实dom,并挂载到真实dom上,主要是深入遍历执行createElm
createElm先执行createComponent(在src\core\vdom\patch.js定义),如果遇到的是自定义组件,则不会继续往下执行
如果遇到的是自定义组件,获取组件的init的钩子函数,并执行。(init钩子函数,在vm._render中 执行createComponent时 执行钩子函数的安装)
init主要是执行组件的实例化,即执行Vue的实例方法_init,并执行实例$mount方法
即当遇到子组件时,会走子组件的渲染流程,即 _init => $mount => mountComponent => new Watcher => updateComponent => 子组件的mounted生命周期
如果不是自定义组件,创建dom元素,执行createChildren遍历vnode.chidrend,执行createElm,创建子元素,并执行insert添加到父dom元素下
createChildren深度遍历创建完所有子dom元素后,执行最后的insert,将根元素插入到页面中,整个首次渲染结束
执行根组件的mounted生命周期函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/797865.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Threejs进阶教程-效果篇】1.Threejs文字与css2d/css3d技术

Threejs文字与css2d/css3d技术 学习ThreeJS的捷径学习之前先搞清楚自己想要什么样的效果贴图文字准备一张带文字的png贴图使用sprite来进行贴图实现2D始终面朝相机的文字使用planeGeometry来贴图实现3D文字使用planeGeometry来贴图实现伪3D文字动态贴图文字html2Canvas 文字几何…

【算法】寻找数组中心下标 - 双指针/求总和

题目 给定一个非空数组&#xff0c;找到一个元素&#xff0c;该元素左侧元素和等于其右侧元素和&#xff0c;返回该元素下标。 如果没有则返回-1&#xff0c;有多个则返回最左侧一个。 原理 1、双指针 定义两个变量&#xff0c;一个为从左侧累加的和 leftSum 0&#xff0c…

操作系统复习

虚拟内存 内存(memory)资源永远都是稀缺的&#xff0c;当越来越多的进程需要越来越来内存时&#xff0c;某些进程会因为得不到内存而无法运行&#xff1b; 虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存&#xff0c;而实际上&#xff0…

C++ P1271 【深基9.例1】选举学生会

文章目录 一、题目描述【深基9.例1】选举学生会题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 二、参考代码 一、题目描述 【深基9.例1】选举学生会 题目描述 学校正在选举学生会成员&#xff0c;有 n n n&#xff08; n ≤ 999 n\le 999 n≤999&#xff09;名候…

HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)

前言&#xff1a;在上一篇文章中&#xff0c;我们已经学习完了超链接标签、列表标签和表格标签&#xff0c;但是我们还有一些标签没有学习&#xff0c;在这篇文章中&#xff0c;我们将学习剩余的标签。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页…

java的基本数据类型

在Java编程语言中&#xff0c;基本数据类型是构成Java程序的基础元素&#xff0c;它们用于存储简单值。Java的基本数据类型可以分为两大类&#xff1a;原始类型&#xff08;Primitive Types&#xff09;和引用类型&#xff08;Reference Types&#xff09;。原始类型包括整型、…

JAVA并发编程(一)

JAVA并发编程&#xff08;一&#xff09; 1.1JAVA线程API 1.1.1currentThread package com.lisus2000.thread;/** * 当前线程 * */ public class Test07 extends Thread {public Test07() {System.out.println("new Test07()......" Thread.currentThread().getNa…

【前端浅谈】前端开发语言有哪些

前端开发主要涉及到的语言包括以下几种&#xff1a; HTML (HyperText Markup Language): HTML是网页的基础结构&#xff0c;它定义了网页的结构和内容。HTML5是最新的版本&#xff0c;提供了更多的语义标签和API&#xff0c;用于构建更丰富、更互动的网页体验。 CSS (Cascadin…

vivado中移位寄存器的优化(二)

移位寄存器优化用于改善移位寄存器单元&#xff08;SRLs&#xff09;与其他逻辑单元之间的负裕量路径的时序。如果存在对移位寄存器单元&#xff08;SRL16E或SRLC32E&#xff09;的时序违规&#xff0c;优化会从SRL寄存器链的开始或结束位置提取一个寄存器&#xff0c;并将其放…

深入理解数据结构第三弹——二叉树(3)——二叉树的基本结构与操作

二叉树&#xff08;1&#xff09;&#xff1a;深入理解数据结构第一弹——二叉树&#xff08;1&#xff09;——堆-CSDN博客 二叉树&#xff08;2&#xff09;&#xff1a;深入理解数据结构第二弹——二叉树&#xff08;2&#xff09;——堆排序及其时间复杂度-CSDN博客 前言…

面试:HashMap

目录 1、底层数据结构&#xff0c;1.7 与1.8有何不同? 2、为何要用红黑树&#xff0c;为何一上来不树化&#xff0c;树化阈值为何是8&#xff0c;何时会树化&#xff0c;何时会退化为链表? 3、索引如何计算? hashCode都有了&#xff0c;为何还要提供hash()方法?数组容量为…

【Easy云盘 | 第十二篇】分享模块(获取分享信息、校验分享码、获取文件列表)

文章目录 4.4.4获取分享信息4.4.5校验分享码4.4.6获取文件列表 4.4.4获取分享信息 明天做 4.4.5校验分享码 明天做 4.4.6获取文件列表 明天做

Vue3大事件项目1 登录注册

创建项目 引入 element-ui 组件库 登录&#xff1a;注册样式准备之后&#xff0c;配置校验规则&#xff08;4个条件&#xff1a;一数据、二规则&#xff09; 1. 校验相关 (1) 给当前表单绑上整个的数据对象&#xff1a;el-form > :model"ruleForm" 绑…

云服务器是不是云盘?

​  云服务器是不是云盘?云服务器和云盘是两个不同的概念&#xff0c;尽管它们都是云计算服务的一部分。云服务器是一种提供计算能力的服务&#xff0c;可以运行各种应用程序和服务&#xff0c;而云盘则是一种提供数据存储和共享服务的工具。 具体来说&#xff1a; 云服务器…

【Qt】事件

目录 一、介绍 二、进入离开事件 三、鼠标事件 3.1 鼠标单击事件 3.2 鼠标释放事件 3.3 鼠标双击事件 3.4 鼠标移动事件 3.5 滚轮事件 四、按键事件 4.1 单个按键 4.2 组合按键 五、定时器 5.1 QTimerEvent类 5.2 QTimer类 5.3 获取系统日期及时间 六、窗口移…

插值表达式

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>插值表达式</title> </head> &l…

两个有序的链表合并成一个【C语言】

比如&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4 #include <stdio.h> #include <stdlib.h>typedef struct Node {int data;struct Node* next; } Node, *LinkedList;// 创建一个新节点 Node* cr…

理解七层网络协议

osi体系结构 上三路&#xff08;管数据&#xff09; 应用层 通过http等&#xff0c;把传输的格式&#xff0c;数据打包 处理网络应用。直接为端用户服务&#xff0c;提供各类应用过程的接口和用户接口。例如&#xff1a;HTTP、Tenlent、FTP、SMTP、NFS等。基于TCP的FTP、HTTP…

mySql数据库学习001-创建数据表及表数据的增删改操作

创建数据表及表数据的增删改操作 一、创建数据库 create table if not exists user(id int unsigned primary key auto_increment,username varchar(20),gender enum(男,女,保密) default 保密 )解释&#xff1a; if not exists 表示数据表不存在就创建&#xff1b;unsigned…

蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子(C++)

题目描述 在一个高度为H的箱子前方&#xff0c;有一个长和高为N的障碍物。 障碍物的每一列存在一个连续的缺口&#xff0c;第i列的缺口从第l各单位到第h个单位&#xff08;从底部由0开始数&#xff09;。 现在请你清理出一条高度为H的通道&#xff0c;使得箱子可以直接推出去。…