详解vue为什么要求组件模板只能有一个根元素


Posted in Javascript onJuly 22, 2019

我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过:

‘为什么只能有且只有一个根元素'

于是我花了二十多分钟去找了一下答案......竟然没有找到答案....

好的现在我来说说我的理解,如果有不对的地方欢迎指出。

我觉得这个问题需要从两个方面来说起:

1.new Vue({el:'#app'})

2.单文件组件中,template下的元素div

一、当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口:

let vm = new Vue({

el:'#app'
})

同时我们也会在body里面新增一个id为app的div

<body>

<div id='app'></div>
</body>

这很好理解,就是为vue开启一个入口,那我们不妨来想想,如果我在body下这样

<body>

<div id='app1'></div>
<div id='app2'></div>
</body>

Vue其实并不知道哪一个才是我们的入口,因为对于一个入口来讲,这个入口就是一个‘Vue类',Vue需要把这个入口里面的所有东西拿来渲染,处理,最后再重新插入到dom中。

如果同时设置了多个入口,那么vue就不知道哪一个才是这个‘类'。

二、当我们在webpack搭建的vue开发环境下,使用单文件组件时,你可能会这样:

<template>

<div class='component'></div>
</template>

那这里为什么template下也必须有且只能有一个div呢?

这里我们要先看一看template这个标签,这个标签是HTML5出来的新标签,它有三个特性:

1.隐藏性:该标签不会显示在页面的任何地方,即便里面有多少内容,它永远都是隐藏的状态;

2.任意性:该标签可以写在页面的任何地方,甚至是head、body、sciprt标签内;

3.无效性:该标签里的任何HTML内容都是无效的,不会起任何作用;

但是呢,你可以通过innerHTML来获取到里面的内容。

知道了这个,我们再来看.vue的单文件组件。其实本质上,一个单文件组件,本质上(我认为)会被各种各样的loader处理成为.js文件(因为当你import一个单文件组件并打印出来的时候,是一个vue实例),通过template的任意性我们知道,template包裹的HTML可以写在任何地方,那么对于一个.vue来讲,这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容,导致结果又回到了开始 :既然一个.vue单文件组件是一个vue实例,那么这个实例的入口在哪里?

如果在template下有多个div,那么该如何指定这个vue实例的根入口?

为了让组件能够正常的生成一个vue实例,那么这个div会被自然的处理成程序的入口。

通过这个‘根节点',来递归遍历整个vue‘树'下的所有节点,并处理为vdom,最后再渲染成真正的HTML,插入在正确的位置

那么这个入口,就是这个树的‘根',各个子元素,子组件,就是这个树的‘枝叶',而自然而然地,这棵‘树',就是指一个vue实例了。

链接: https://github.com/haizlin/fe-interview/issues/457

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 #Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 #Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 #Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 #Javascript
Vue中遍历数组的新方法实例详解
Jul 21 #Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 #Javascript
jquery插件开发模式实例详解
Jul 20 #jQuery
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
Python中自定义函数的教程
2015/04/27 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
详解python3中的真值测试
2018/08/13 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python DataFrame 取差集实例
2019/01/30 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python增加图像对比度的方法
2019/07/12 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python实现视频压缩功能
2020/12/18 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
软件配置管理有什么好处
2015/04/15 面试题
同事打架检讨书
2014/02/04 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
销售人才自我评价范文
2014/09/27 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
创业计划书详解
2019/07/19 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
Java基础——Map集合
2022/04/01 Java/Android
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript