vue延迟渲染组件_Vue 动态组件渲染问题分析
fire
读在最前面:
1、本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程
2、本文知识点涉及vue构造器以及选项策略合并、 渲染逻辑
问题描述:
Child继承自App,主程序通过true 和false来控制显示 Child 还是 App,在动态 中渲染出来的始终是App,代码如下
Vue.config.productionTip = false;
Vue.config.devtools = false;
// ----------------options---------------------
const optionsA = {
render: (h) => h('span', '我是options - 父'),
};
const optionsB = {
render: (h) => h('span', '我是options - 子'),
};
const App = Vue.extend({
template: `
当前组件: {{name}}
`,
data() {
return {
name: 'App',
node: optionsA,
}
}
});
const Child = App.extend({
name: 'Child',
data() {
return {
name: 'Child',
node: optionsB,
}
}
});
const vm = new Vue({
el: '#app',
data() {
return {
isSuper: true,
};
},
components: { App, Child },
render(h) {
const that = this;
return h('div', {}, [
h('button', {
on: {
click: () => {
this.isSuper = true;
}
},
}, '父类'),
h('button', {
on: {
click: () => {
this.isSuper = false;
}
},
}, '子类'),
h(this.isSuper ? 'App' : 'Child')
]);
},
});
如下图(点击父/子类切换,始终显示的是 父文本):
关键执行顺序分析:
1、App通过继承Vue生成构造,Child通过继承App生成构造
2、默认isSuper:true,渲染出App( 编译为render: _C(node),这个时候会在App的node中生成.Ctor)
3、切换isSuper:false,渲染出Child(这里渲染的时候,生成的实例是App,这里是不符合预期的,按理应该是Child)
3.1、生成Child实例的时候进行了data合并,这个时候data中node变量合并了App的node中的.Ctor($options合并策略),参照下图
3.2、在_createElement的时候 node 当为component options / constructor 时,会验证是否 node 是否为object,如果是会转换为构造器 使用vue.extend
3.2、在Child中动态调用 new Ctor() (这个Ctor是App的),生成实例
最后附上大致流程图:
备注:
1、Vue.extend会生成VueComponent构造器,内部包含一个Ctor,组件生成的时候就是调用这个new Ctor() 进行实例生成
2、选项中data的生成是延迟到实例生成的时候
3、createComponent在分支渲染时,传入Ctor为对象的时候,会转换为构造器,这也是我们这个使用 const optionsA = {render: (h) => h('span', '我是options - 父'), }; 这种方式的问题根源所在
4、知道了问题所在,解决方式就比较多了,比如直接传入构造器,比如绕开data值合并策略,使用method方式。
by:海豚湾-丰
vue延迟渲染组件_Vue 动态组件渲染问题分析相关推荐
- element vue 获取select 的label_Vue动态组件component的深度使用
背景介绍 最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装 首先想到的就是Form组件,在Element U ...
- 【前端——vue】:过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
- Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识 能够掌握自定义指令创建和使用 学习内容: 学习目录: 组件进阶 自定义指令 今日总结 面试题 知识点自测 组件创建, 注册和使用 - 伸手就来特别熟练 指令的作用 1 ...
- [vue] 你有使用过动态组件吗?说说你对它的理解
[vue] 你有使用过动态组件吗?说说你对它的理解 通过 Vue 的 元素加一个特殊的 is 特性来实现 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
- Vue组件之动态组件
动态组件:不同组件之间进行动态切换,通过 Vue 的 元素加一个特殊的 is attribute 实现 1. 基础使用 component 的 is 属性值是组件名,就可以调用该组件 <comp ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- 怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- 草图大师里创建动态组件_SketchUp动态组件教程(二)切换隐藏实例教程
按组件属性对话框内默认的顺序,依次完成所有群组模型的命名,如图2-4所示. 所有开关插座英文对应表如下:(也可用拼音字母代替,最好不用中文命名) 1. 一联开关 1Gang Switch 2. 二联开 ...
- vue 组件第一次不渲染问题_vue使用组件不渲染 只有代码变了才渲染
这个组件是一个chart import { Line } from 'vue-chartjs'; export default { extends: Line, mounted () { this.r ...
最新文章
- 德国版“非升即走”引发学界震荡!“临时工”干12年也难获教职,网友:全世界都在卷...
- android中设置ListView的选中的Item的背景颜色(附源码)
- JS 使用html2canvas实现截图功能的问题记录和解决方案
- kali入侵windows
- JZOJ 100035. 【NOIP2017提高A组模拟7.10】区间
- java 日期函数转换_java 日期函数转换
- go protobuf tcp 粘包处理 demo
- 第一章 TCP/IP协议族
- idea启动tomcat时蓝屏
- 0-n-1中缺失的数字
- linux无线网卡模拟ap,TP-Link无线网卡怎么设置虚拟AP
- hdu2154跳舞毯(dp)
- 韶关517功能水稻测产 国稻种芯-何登骥:中国水稻节广东活动
- Android权限 权限等级 普通权限 敏感权限 申请权限
- 数量金融学(7):连续复利
- 2022-05-14 Git三种合并分支Merge、Squash merge、Rebase merge
- 企业标准怎么申请,具体的备案流程
- 兼容IE 下载EXCEL
- Spring、Mybatis笔记
- ios开发中打印日志消息控制
热门文章
- 北京市高等教育英语听力计算机考试,北京市2018年高考英语听力机考问答
- LeetCode刷题指南
- 计算机考研数学几,考研数学一二三区别是什么?
- java 设置全局热键_Java设置全局热键——第三方包jintellitype实现
- D. Serval and Rooted Tree(思维+树形dp+二分辅助)
- 电脑主板进bios的启动快捷键汇总
- 服务器搭建个人网站(阿里云服务器)
- 烂笔头笔记:favicon配置不是所有浏览器都兼容
- 昨晚,谷歌发布了一个可怕的人工智能!
- 0基础python笔记str/list/tuple/dict