手机网站框架,黄冈做网站的公司哪家好,上海公司注册官网,临清建设网站今天主要学习了列表渲染和key的作用和原理#xff0c;先来说说列表渲染#xff0c;顾名思义想要渲染列表最快的方式就是使用for循环#xff0c;我们要学习的就是Vue中对标签实现for循环的语法#xff0c;它和我们传统的js语法有些不同#xff0c;它是先要有Vue实例中data的…今天主要学习了列表渲染和key的作用和原理先来说说列表渲染顾名思义想要渲染列表最快的方式就是使用for循环我们要学习的就是Vue中对标签实现for循环的语法它和我们传统的js语法有些不同它是先要有Vue实例中data的数据再拿过来遍历遍历时同样可以获得元素和元素的索引号这里有个很重要的点就是Vue要求你传入一个属于元素唯一的值:key这个值在开发中一般是从后端获取的Vue需要拿这个唯一的key来做底层的对比算法这也是等下要说到的key的底层原理Vue提供的for循环不但可以遍历最常用的数组同样还可以变量对象、字符串还可以指定循环的次数但这些都相对比较少用。接下来说的就是Vue中的key了这也是Vue中很重要的底层原理出去面试时也会经常被问到的问题首先我们要知道每一个元素都要有一个唯一key值就算我们不写Vue也会自动为元素生成那为什么要有key呢这就要从刚开始学习Vue说起了我们都知道Vue会给节点元素生成一个虚拟DOM模板这里就需要给每个元素都绑定一个唯一的key值然后我们每次改动或更新Vue实例里面的数据时Vue就会生成一个新的虚拟DOM模板然后拿新的模板和旧的模板作对比因为Vue是没有办法知道哪个元素有没有改变或更新这里的对比就需要用到刚才说到的key有了唯一key就相当于每个元素都拥有了自己的身份证这样Vue就可以拿着这个身份证找到身份证旧的内容再和现在新的内容做对比这就是Vue的diff对比算法如果内容没变就使用就的旧模板已经生成好的真实DOM如果内容变了就先生成虚拟DOM再渲染成真实DOM到页面上还有一种情况就是压根就没找到key有旧的模板这时就说明该元素是新添的直接生成虚拟DOM再渲染成真实DOM到页面上即可。这种底层的代码复用率可以大大的提高性能和效率初学时代码量少基本上看不出性能上的区别一旦代码多差距就很明显了。