vue实例添加`template`属性,可以独立定义页面构成模板
vue容器构建步骤:
1.读取容器代码解构 -
template属性
2.渲染代码结构为真实响应式DOM - render
3.将真实响应式DOM写入到页面对应的位置进行展示 - mount(el)
template
单一职能原则,代码中一个定义只用于描述一个功能
一个文件的代码组成只用于解决一类问题
优点:文件功能能独立相互关联引用,但互不干扰,可以快速替换和修改,可以快速复用
缺点:调用链长,中途接收开发困难
使用template定义vue模板实例,优先级大于页面挂载,template构成的模板,最终会替换到
mount(el)指向的元素内容
等同于页面中如下:
html干了两件事,及提供了挂载,又提供了数据渲染
template 的三种模板定义方案,第一种不能数据绑定,不推荐,一般使用都会采取剩余两种方案,注意template 是无意义标签,不会被渲染到页面
render 函数定义
render的优先级高于template
h() 是hyperscript的简称,意思是"能生成HTML(超文本标记语言)的javaScript"
必须h来完成响应式关联,是vue在render 函数中提供的用于完成响应式关联的DOM构建工具
vue3
将h4的模板渲染到页面
或
注意程序渲染的时候是可以写数组的,也可以进行h()方法嵌套,形成递归,如图:
如果是需要渲染多个响应式DOM,并且双向数据进行绑定则如图显示:
虚拟DOM
是一种概念,为将目标所需的UI听过数结构,虚拟的表示出来,保存在内存中,然后将真实的DOM与之保存同步,他是一种模式,没有一个标准的实现
vue引入了虚拟DOM和DIFF算法提示渲染性能,虚拟DOM的存在就是为了提高程序运行性能
在这里引用一下官网文档,方便理解
DIFF算法
内容中的数据变量发生变化,页面DOM元素需要进行更新,这个过程也叫打补丁
vue执行渲染的过程:
template单一职能原则,代码中一个定义只用于描述一个功能一个文件的代码组成只用于解决一类问题优点:文件功能能独立相互关联引用,但互不干扰,可以快速替换和修改,可以快速复用缺点:调用链长,中途接收开发困难使用template定义vue模板实例,优先级大于页面挂载,template构成的模板,最终会替换到 mount(el)指向的元素内容
等同于页面中如下:html干了两件事,及提供了挂载,又提供了数据渲染
template 的三种模板定义方案,第一种不能数据绑定,不推荐,一般使用都会采取剩余两种方案,注意template 是无意义标签,不会被渲染到页面
render 函数定义render的优先级高于templateh() 是hyperscript的简称,意思是"能生成HTML(超文本标记语言)的javaScript"必须h来完成响应式关联,是vue在render 函数中提供的用于完成响应式关联的DOM构建工具vue3将h4的模板渲染到页面
或
注意程序渲染的时候是可以写数组的,也可以进行h()方法嵌套,形成递归,如图:
如果是需要渲染多个响应式DOM,并且双向数据进行绑定则如图显示:
虚拟DOM是一种概念,为将目标所需的UI听过数结构,虚拟的表示出来,保存在内存中,然后将真实的DOM与之保存同步,他是一种模式,没有一个标准的实现vue引入了虚拟DOM和DIFF算法提示渲染性能,虚拟DOM的存在就是为了提高程序运行性能在这里引用一下官网文档,方便理解
DIFF算法内容中的数据变量发生变化,页面DOM元素需要进行更新,这个过程也叫打补丁
vue执行渲染的过程: