20190520-Vue之todoList

最新推荐文章于 2022-03-11 16:29:57 发布

catherine_sfy

最新推荐文章于 2022-03-11 16:29:57 发布

阅读量201

点赞数 1

分类专栏： Vue

Vue 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Vue的todoList效果设计、原理及代码实现。阐述了Vue通过虚拟DOM的Diff算法提高渲染效率，其复杂度从O(n^3)降到O(n)。还说明了key的作用是高效更新虚拟DOM，使用v-for指令时应绑定key以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue之todoList

效果设计：

上下两个框，上面一个输入框，从这个框里输入内容表示代办；

下面一个输入框，以有序列表展示输入框中输入的内容。

原理：通过v-model实现输入框与显示内容的双向绑定，v-for动态的将lists数组中的数据项进行渲染

主要代码实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>todolist</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
  </head>
  <body>
    <div id="root">
      <input v-model="inputValue" placeholder="what you wanna do">
      <button v-on:click="submit">提交</button>
      <ol>
        <li v-for="(item,index) of lists" v-bind:key="index">{{item}}</li>
      </ol>
    </div>
    <script type="text/javascript" src="src/main.js"></script>
  </body>
</html>


var app = new Vue({
  el: '#root',
  data:{
  	inputValue:'',
    lists:[],
  },
  methods:{
    submit:function(){
      this.lists.push(this.inputValue)
      this.inputValue = ''
    }
  }
})

实现效果：

1558361527421

遇到的报错一：

在这里插入图片描述

遇到这个问题因为：
在这里插入图片描述

自己定义的js文件在HTML页面头部引入，自定义的js文件要在body最后引入，因为要先有元素id，vue才能获取相应的元素。

正确位置：

在这里插入图片描述

如图所示，这个部分在本demo的代码中可加可不加，但是为什么看到网上的一些例子都有这一部分呢？
官网是这样说的：

简单来说，就是为了提高渲染效率，那么它是怎么提高渲染效率的呢？

这就不得不提到Vue的在渲染列表时使用的虚拟DOM的Diff算法了。vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

其核心是基于两个简单的假设：

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
同一层级的一组节点，他们可以通过唯一的id进行区分。

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

借用React’s diff algorithm中的一张图来简单说明一下：
在这里插入图片描述
当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况：在这里插入图片描述
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
在这里插入图片描述
所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
以上内容参考转载自：
https://www.cnblogs.com/zhumingzhenhao/p/7688336.html
另外，v-for 响应式key, index及item.id参数对v-bind:key值也会造成差异：
https://www.cnblogs.com/tim100/p/7262963.html
所以当我们使用v-for指令时，应该绑定一个key，同时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染，从而提高性能。