首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Vue为什么推荐用 index 做 key

本文首发于政采云前端团队博客:在 Vue为什么推荐用 index 做 key https://zoo.team/article/vue-index 前言 前端开发中,只要涉及到列表渲染,那么无论是...那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。...下面我们就以 Vue3.0 diff 算法为切入点,剖析 key 在 diff 算法中的作用 具体 diff 流程如下 Vue3.0 中 在 patchChildren 方法中有这么一段源码 if (...那接下来看看,Vue3 是怎么做的。...因为最后要呈现出来的顺序是新节点的顺序,移动是只要老节点移动,所以只要老节点保持最长顺序不变,通过移动个别节点,就能够跟它保持一致。 所以在此之前,先把所有节点都找到,再找对应的序列。

1.2K20

vue组件的data为什么是一个函数

组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次...,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,如下面这个例子: ?...该组件被复用了三次,但每个复用的地方组件内的count数据相互不受影响,它们各自维护各自内部的count。 ?...能有这样效果正是因为上述例子中的data不是一个单纯的对象,而是一个函数返回值的形式,所以每个组件实例可以维护一份被返回对象的独立拷贝,如果我们将上述例子中的data修改为: ?...那么就会造成无论在哪个组件里改变了count值,都会影响到其他两个组件里的count。 ?

1.2K20

为什么推荐你使用vue-cli创建脚手架?

最近在知乎看到一个问题,原问题如下: “ 很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜...这个问题我之前在公司也曾想过,当初入门vue项目也是从一个 npm install vue-cli -g 的命令行开始的,觉得官方提供的vue-cli脚手架很友好,不用想vue+webpack的工作流怎么搭建...中级前端或者更进阶者就有统筹全局的能力,类似于文章开头说的,能手动创建一个和公司项目需求深度定制的vue脚手架,而不再依赖于官方提供的vue-cli,一方面自己定制的脚手架哪出了问题自己心里清楚,从而也能培养自己前端架构的能力...这就是我为什么推荐你使用vue-cli创建脚手架的原因(此文的受众是想要进阶中级的初级前端人员)。...接下来,我会分章节手把手教大家如何从零开始一个vue+webpack前端工程工作流的搭建,以及SSR服务端渲染。

2.3K140

为什么 React 的 Diff 算法采用 Vue 的双端对比算法?

要了解这些,我们先了解 React 中的 Diff 算法,然后再了解 Vue3 中的 Diff 算法,最后讲一下 Vue2 中的 Diff 算法,才能去比较一下他们的区别。...最后讲一下为什么 Vue 中不需要使用 Fiber 架构。...React 官方的解析其实为什么 React 采用 Vue 的双端对比算法,React 官方已经在源码的注释里已经说明了,我们来看一下 React 官方是怎么说的。...在了解 React Diff 算法之前,我们首先要了解什么是 Fiber,为什么 React 中要使用 Fiber?...Fiber 链表的生成上面的组件在经过 JSX 的编译之后,初始化的时候会生成成一个类似于 React 15 或者 Vue 那种虚拟 DOM 的数据结构。

71720

框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象

vue组件中data的属性值是函数,如下所示 export default { data() { // data是一个函数,data: function() {}的简写 return...; }, }; 而非:如下所示 export default { data: { // data是一个对象 name: 'itclanCoder', }, }; 当一个组件被定义...,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例 也就是说,在很多页面中,定义的组件可以复用在多个页面 如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象...,无论在哪个组件实例中修改data,都会影响到所有的组件实例 如果data是函数,每次创建一个新实例后,调用data函数,从而返回初始数据的一个全新副本数据对象 这样每复用一次组件,会返回一份新的data...数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合 可以看下面一段代码 // 声明构造器函数 function Person() {} Person.prototype.data

1.9K20

vue核心面试题:组件中的data为什么是一个函数

一、总结 1.vue组件是用来复用的,为了防止data复用,将其定义为函数。...2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过...二、代码分析: vue每次会通过组件创建出一个构造函数,每个实例都是通过这个构造函数new出来的 假如data是一个对象,将这个对象放到这个放到原型上去 function VueComponent(){...补充: 为什么要合并?因为子组件也要有父组件的属性,extend方法是通过一个对象创建了一个构造函数,但是这个构造函数并没有父类的属性,因为它是一个新函数,和之前的Vue构造函数是没有关系的。...通过extend产生了一个子函数,这个子函数需要拥有vue实例上的所以东西,它就要做一次合并。 四、为什么new Vue这个里面的data可以放一个对象? 因为这个类创建的实例不会被复用。

47410

vue-router 多个路由地址绑定一个组件造成 created 执行的解决方法

vue-router 多个路由地址绑定一个组件造成 created 执行的解决方法 需求分析 导航上有2个菜单,指向的是同一个列表,但是是不同的状态。...本文只针对有一定vue基础的同学有用,如果你是其他框架的同学请忽略。...如果想学习vue但不是很熟悉的同学,可以参看我的vue相关博客 Vue2+VueRouter2+webpack 构建项目实战 为说明核心问题,只放出核心代码。其他代码请自行脑补。...装模作样总结原因 虽然路由地址变化了,但是还是只想的是同一个组件,而created是创建组件的时候执行,这个钩子根本就不适用啊。。。...翻查vue-router 官方文档,始终找不到一个合适的钩子来执行代码。咋整??

79120

详解将数据从Laravel传送到vue的四种方式

使用上面的任何一种方法,您都可以将 JSON 编码的数据回送给您的应用程序或其组件。 然而,最大的缺点是可扩展性。您的 JavaScript 需要直接暴露在模板文件中,以便引擎可以呈现您的数据。...赞成: 在整个 Vue 应用程序和任何其他脚本中全局可用 反对: 可能很混乱,通常建议用于大型数据集 虽然这看起来有点老生常谈,但将数据添加到窗口对象中可以轻松地创建全局变量,这些变量可以从应用程序中使用的任何其他脚本或组件访问...不过,使用方法有一点需要注意,这就是访问 Vue 组件内部数据的方式。...赞成: 易于启动,非常适合单页应用程序 反对: 要求前端由 Blade 模板呈现 对我来说,这个解决方案是 Vue 前端 + Laravel 后端世界中最简单的入门方法。...否则,可以进行一次修改,以确保在几秒钟内与 Vue 完全兼容。 回到上面的 RouteServiceProvider, 交换出 web 方法中的 api 中间件。我们为什么要这样做?

8K31

进击中的Vue 3——“电动车电池范围计算器”开源项目

呈现徽标和问候语,必须在模板中定义它们。最终必须(通过export default { } )导出整个组件,以便可以将其再次导入到其他组件和main.js中。 2....模板 模板负责定义组件生成的输出。Vue.js 使用基于HTML的模板语法可以使数据通过data ()-function进行绑定并轻松呈现。...在此问候语上方,用img-tag来呈现徽标。要将徽标分配给img src-attribute,用属性进行绑定。...样式 在Vue中,我们使用SCSS文件对整个应用进行样式设置,这里展开介绍。 Container vs Presentation组件 介绍完基础的项目架构,我们来看项目的UI部分是怎么运行的。...(组件树) 划分方法具有以下优点,值得推荐。

3.3K20
领券