this.$vnode.key = Math.random();使用场景： 当需要重新加载组件时可以使用，比如点击左侧菜单栏中的某一项，右侧内容会再次刷新
原创
2022-05-30 11:58:21
137阅读
前言：element ui 中有些 demo 使用了 vue 的 VNode，但是 demo 毕竟不全，所以想要了解 VNode 到底是什么，如何写出符合自己业务的代码。vue 官网介绍：渲染函数 & JSXcreateElement 函数createElement 函数。这个函数的返回值就是一个 VNode 对象。 createElement 到底会返回什
转载
2023-10-26 17:01:48
60阅读
<div id="app">
{{someVar}}
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
someVar: 'init'
},
转载
2024-02-28 08:02:52
107阅读
Vue模板语法 mustache语法 双大括号语法指令Vue 指令作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖Vue 组件模板语法模板语法支持性还是很高的，数据类型都是支持的，但是不支持 输出语法
初衷在使用vue2.0的过程，有时看API很难理解vue作者的思想，这促使我想要去深入了解vue底层的思想，了解完底层的一些思想，才能更好的用活框架，虽然网上已经有很多源码解析的文档，但我觉得只有自己动手了，才能更加深印象。vue2.0和1.0模板渲染的区别Vue 2.0 中模板渲染与 Vue 1.0 完全不同，1.0 中采用的 DocumentFragment (想了解可以观看这篇文章)，而 2
这次，来学习下Vue是如何解析HTML代码的。template 解析用在哪从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
Vue.prototype.$mount = fun
转载
2024-08-19 10:35:37
43阅读
Vue 的 Diff VNode 算法，看代码能看明白，但想用文字表达清楚感觉挺难的，等有时间了配几幅图估计效果会好很多。 ...
转载
2021-08-26 22:01:00
322阅读
2评论
抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简单粗暴的方
转载
2022-08-18 09:09:16
303阅读
jangwoo 小马学编程 2月14日图现在很多公司都选择 vue 做为前端框架来开发项目，是因为 vue 吸收了 angular 的数据绑定和 react 的虚拟 dom 的等前端框架的优点。而且也避免他们的缺点。小巧且强大。借助强大生态圈可以胜任大型系统的单页应用。今天就给大家介绍一下他的另一面用 nuxtjs 实现服务端渲染。开始之前，先为大家介绍几个概念以便于理解我们为什么要做服务器端渲染
在接触 React 时候，我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法)，但是对其具体是如何转换的却不了解。很明显，回答失败。通过 github 上搜索 template+vnode 的关键词，让我搜到了htm库，发现简直就是我想要的。让我们看下用法:const htm = require("htm");
function h
转载
2024-02-08 15:19:15
86阅读
官网：https://cn.vuejs.org/guide/essentials/conditional.html条件渲染
v-if和v-show
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。总的来说，v-if
转载
2024-09-12 12:58:13
334阅读
本文是 Vue 3.0 进阶系列 的第五篇文章，在这篇文章中，阿宝哥将介绍 Vue 3 中的核心对象 ——
转载
2022-09-30 11:49:22
244阅读
在Vue.js 中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染实现的思考：当我们编写这些组件的时候，它的内部是如何工作的呢？从我们编写组件开始，到最终的真实DOM是怎样的一个转变过程呢首先，组件是一个抽象的概念，它是对一棵DOM树的抽象，我们在页面写入一个组件节点：<hello-world></hello-world>复制代码这段代码并不回在页面上渲染一个 &
转载
2021-01-17 20:08:30
692阅读
本文是 Vue 3.0 进阶系列 的第五篇文章，在这篇文章中，阿宝哥将介绍 Vue 3 中的核心对象 ——
转载
2022-11-11 21:12:34
293阅读
TDengine学习笔记：vnode 虚拟节点，高可用测试，版本号，选主流程
原创
2022-04-12 10:35:38
903阅读
Filament渲染引擎剖析 之 通过图元构建几何体什么是图元filament可绘制的图元类型构建图元的工具VertexBufferIndexBufferPrimitive 什么是图元图元是构成图形实体的最小单元，可见物体的表面可以由数量不等的三角形拟合而成，常见的图元类型有点、线、三角形等，无论多么复杂的物体外观，一般都可以用这三类基础图元拟合而成。OpenGL 常见的图元类型： 点、线、条带
一.使用ts的vue项目，多了几个文件1.tsconfig.json: typescript配置文件，主要用于指定待编译的文件和定义编译选项 2.shims-tsx.d.ts: 允许.tsx 结尾的文件，可在 Vue 项目中编写 jsx 代码 3.shims-vue.d.ts: 主要用于 TypeScript 识别.vue 文件，Ts 默认并不支持导入 vue 文件结合vue-property-d
转载
2024-07-07 22:13:26
127阅读
(Vue 3 VNode Diff 算法中的多分支优化与性能策略解析)
1. 引言
在虚拟 DOM 框架中，diff 算法就是“灵魂中的灵魂”。Vue 3 的 diff 相比 Vue 2 有非常大的改进，最显著的一点是它实现了多分支策略，避免了“一个算法打天下”的粗暴方式。
本篇我们将深入分析：
Vue 是如何分类处理不同类型的 vnode 的？
列表更新场景下的 diff 如何做到 O(n)
TDengine学习笔记：vnode 虚拟节点，高可用测试，版本号，选主流程
原创
2022-04-12 10:20:54
770阅读
vue2中在template中使用component组件is属性绑定jsx的vnode
