绍兴专门做网站,嘉兴市做外贸网站,购物网站公司要花费多少钱,公司起什么名字好文章目录 data为什么是一个函数#xff0c;而不是一个对象#xff1f;什么情况下可以使用对象#xff1f;key的作用#xff0c;为什么不能用Index#xff1f;render函数#xff0c;h函数#xff0c;和template什么关系#xff1f;vue 是怎么解析template的? template会… 文章目录 data为什么是一个函数而不是一个对象什么情况下可以使用对象key的作用为什么不能用Indexrender函数h函数和template什么关系vue 是怎么解析template的? template会变成什么?父子子孙传值 data为什么是一个函数而不是一个对象什么情况下可以使用对象
因为Vue组件可以同时存在多个实例如果直接使用对象形式的data选项那么所有的实例将会共享同一个data对象这样就会造成数据互相干扰的问题。
key的作用为什么不能用Index
作用主要用在Vue 的虚拟DOM 算法在新旧nodes 对比时辨识VNodes在源码中使用的是 来判断的两个DOM元素是否相同所以不能设置非基本类型。
为什么不能用Index
性能损耗用index 作为key 时在对数据进行逆序添加逆序删除等破坏顺序的操作时会产生没必要的真实DOM更新从而导致效率低额外问题例如在一个li列表后面加一个input输入框然后在给列表前面加一个元素会导致patch失败原因是
源码中
export function isSameVNodeType(n1: VNode, n2: VNode): boolean {return n1.type n2.type n1.key n2.key
}render函数h函数和template什么关系
render: h h(App) 表示 Vue 实例选项对象的 render 方法作为一个函数 接受传入的参数 h函数返回 h(App) 的函数调用结果。 h函数是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()类似vue2的createElement() 接受三个参数返回vNode节点
tag一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。必需的props与 attribute、prop 和事件相对应的对象。可选children子 VNodes使用 h() 构建或使用字符串获取 “文本 Vnode” 或者有插槽的对象。可选
render和template都是Vue中定义组件的方式但它们有一些不同之处
template是一种类HTML的语法它定义了组件的结构和展示包括HTML标签、属性、事件和插值等。Vue将template编译成render函数最终将render函数渲染成虚拟DOM并将其渲染到页面上。render函数则是一个函数式组件它的参数是一个createElement函数和上下文对象。render函数用代码方式描述组件的结构和展示并返回一个虚拟DOM节点最终也会被渲染到页面上。
相对于templaterender函数更加灵活和强大可以更精细地控制组件的展示。同时由于render函数是JavaScript代码因此它可以被更好地集成到其他代码中。template则更加容易编写和理解但可能会受到HTML标签和属性的限制。 在实际开发中我们可以选择使用template或render函数来定义组件具体取决于组件的需求和开发者的习惯。如果组件需要较为复杂的展示逻辑和动态交互可以使用render函数来实现。如果组件比较简单可以使用template来编写。
vue 是怎么解析template的? template会变成什么?
Vue.js在解析和编译模板时会经过以下过程
解析模板Vue.js使用自定义的HTML解析器将模板解析成抽象语法树AST。解析器会分析模板中的HTML标记、指令、表达式和事件等内容并构建出一颗表示模板结构的AST。静态优化在生成AST的过程中Vue.js会对静态内容进行优化。静态内容是指在编译过程中不会发生变化的部分例如纯文本内容。Vue.js会将静态内容标记为静态节点以在后续更新过程中跳过对其的处理提高性能。编译为渲染函数Vue.js将AST编译为渲染函数。渲染函数是一个JavaScript函数它接收数据作为参数并返回一个虚拟DOMVNode树用于渲染组件的视图。渲染视图当组件的数据发生变化时渲染函数会被调用生成新的虚拟DOM树。Vue.js会通过比较新旧虚拟DOM树的差异计算出需要更新的部分并将其应用到实际的DOM上从而更新组件的视图。
在上述过程中模板会被转换成一个渲染函数。渲染函数可以是以下几种形式之一 使用render方法编写的渲染函数在组件中定义了一个render方法该方法返回一个虚拟DOM树。 使用单文件组件.vue文件Vue.js提供了单文件组件的支持其中的部分就是模板通过编译转换为渲染函数。 使用Vue.js的模板语法在Vue组件的template选项中使用Vue.js的模板语法也会被编译为渲染函数。 总之Vue.js将模板解析为AST然后根据AST生成渲染函数最终通过渲染函数来渲染组件的视图。这个过程使得Vue.js能够高效地根据数据动态更新视图。
父子子孙传值
通过 props 传递通过 $emit触发自定义事件使用 refEventBus$parent 或$rootattrs 与 listenersProvide 与 InjectVuex
父子关系选择 props 与 $emit进行传递也可选择ref 兄弟关系选择$bus其次可以选择$parent进行传递 祖先与后代选择attrs与listeners或者 Provide与 Inject 复杂关系的组件通过vuex存放共享的变量
