首页 > 其他分享 >vue的虚拟DOM

vue的虚拟DOM

时间:2023-07-02 17:13:46浏览次数:38  
标签:vue render DOM 虚拟 diff VDOM

1、作用

提高性能(直接操作DOM性能低,js层操作效率高)

跨平台

2、虚拟DOM如何生成

1、为组件编写模版-template

2、模版被编译器编译渲染为函数-render

3、挂载中调用render函数,返回对象就是虚拟DOM

4、后续patch过程中进一步转化成真实DOM

3、VDOM如何diff

1、挂载过程结束,记录第一次生成的VDOM -oldVnode

2、当响应式数据发生变化时,将引起组件重新render,此时生成新VDOM -newVnode

3、oldVnode与newValue做diff操作,将更改部分应到真实DOM上,从而转化为最小量的dom操作,高效更新视图

标签:vue,render,DOM,虚拟,diff,VDOM
From: https://www.cnblogs.com/marilol/p/17520994.html

相关文章

  • vue的理解
    vue是一个渐进式框架声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具1、声明式框架命令式与声明式区别命令式关注过程声明式关注结构//命令式letnumber=[1,2,3];lettotal=0;for(leti=0;i<number.length;i++){total+=number[i]......
  • 关于java 虚拟机栈
    线程的栈是在哪里提出来了的?Oracle官网的java虚拟机规范里面,2.5.2章节。网址:https://docs.oracle.com/javase/specs/jvms/se11/html/jvms-2.html下图就是我们常说的java虚拟机栈。java虚拟机栈的栈帧具体是什么?栈帧(StackFrame)是以方法(Method)为基础的。栈帧里面有局部变量表(......
  • Anaconda创建虚拟环境,安装tensorflow
    Anaconda创建虚拟环境,安装tensorflow1、创建虚拟环境,其中tf为虚拟环境名,3.8.8对应python版本号condacreate-ntfpython=3.8.82、激活虚拟环境,其中tf为虚拟环境名activatetf3、安装tensorflow1.0.0,-i临时更换镜像源pipinstalltensorflow-cpu==2.6.0-ihttps://pypi.......
  • Vue router-view key 导致路由切换非router-view部分也进行刷新
    <router-view> 组件是一个functional组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。 如果中最外层的<router-view>中增加了:key="$route.fullPath",会导致子路由中的router-view之外的部分也会被重新......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......
  • 分享6款文字语音生成驱动虚拟数字人说话的开源项目
    一、FACEGOOD的Audio2Facegithub地址:github.com/FACEGOOD/FA…FACEGOOD对输入和输出数据做了相应的调整,声音数据对应的标签不再是模型动画的点云数据而是模型动画的blendshape权重。FACEGOOD主要完成Audio2Face部分,ASR、TTS由思必驰智能机器人完成。如果你想用自己的......
  • 光脚丫思考Vue3与实战:第03章 Vue实例
    下面是本文的屏幕录像的在线视频:03-Vue实例04-生命周期示意图+钩子函数温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:03-Vue实例:https://pan.baidu.com/s/1O9lUFm2jRIlBeFrBjXPZIA 提取码:nbzt03-生命周期示意图+钩子函数:https://pan.baidu.com/s/1D4ndTSgPBNGE8D4_......
  • 光脚丫思考Vue3与实战:第02章 安装Vue.js
    下面是本文的屏幕录像的在线视频:02-安装Vue.js温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZfrCx7e5kQ 提取码:hws62、示例代码:https://pan.baidu.com/s/1oYV0Lej_E3ufyEUMxq1S2Q 提取码:ikhe 下图是文章大纲: 一、概述Vue.js......
  • 03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)
    一、文章大纲二、安装环境本文基于如下的环境进行试验的:Windows10中文64位专业版。v12.18.3版本的Node.js。@vue/cli4.5.4的Vue.js和cli。三、安装vue-cli使用npm全局安装vue-cli:npminstall-g@vue/cli可以使用如下的创建项目的命令,查看vuecli的安装情况:按照上面的提示,先卸载......
  • 前端Vue自定义注册界面模版 手机号邮箱账号输入框 验证码输入框  包含手机号邮箱账号
    前端Vue自定义注册界面模版手机号邮箱账号输入框验证码输入框 包含手机号邮箱账号验证,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13306效果图如下:......