v-for

  1. 作用: 列表渲染,所在标签结构,按照数据数量,循环生成。指令写在谁身上,就循环创建谁

  2. 语法:

    v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量

    v-for = "值变量 in 目标结构 :key = 索引变量"

    目标结构:可以是数组,对象,字符串

  3. 数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让你页面更新

  4. v-for中的key作用:在更新的时候:

    • 有key,按照key比较,key设置为index:等于没设,就地复用
    • 无key,就地更新
  5. v-for中key

    唯一不重复的字符串或者数值,数组中的id

    key在使用过程中,有id用id,无id用索引

  6. key的好处

    可以提高更新的性能

v-set

  1. 作用:因为vue是数据驱动页面的,所以修改原数组中可以使用 this.arr[0]='测试' 但是,由于官方vue2特有的bug,导致这样修改原数组失效,虽然数组确实改变了,但是页面直接没更新,如果需要这样修改数据,就需要 $set 方法来修改

  2. 方法:

    this.$set(修改数组,索引,‘修改的内容’)

重绘和回流

  • 重绘:元素的颜色/透明度发生变化
  • 回流:元素的几何信息(宽度/位置)发生变化
  • 回流是把结构重新画出来,重绘给你上色
  • 回流一定触发重绘,但重绘不一定会引起回流

虚拟DOM

含义:本质上是一个js对象,保存DOM关键信息

好处:提高DOM更新的性能,不频繁操作真实的DOM,在内存中找到变化部分,再更新真实DOM相应属性或内容(打补丁)

computed计算属性

  1. 语法:定义在computed中和data(){}并齐

  2. 事例:

       computed:{
           totalPrice(){//计算属性名
             set(val){ //在计算机属性被修改时执行
                 //val是计算属性赋的值
             get(){  //get在计算机属性被调用(访问)时执行
             //必须return一个结果
             return this.count*this*this.price//返回运算结果
    
  3. 缓存 :计算属性,基于依赖项的值进行缓存,依赖的变量不变,都 直接从缓存取结果 (带缓存)

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐

  • 浏览量 1.1w
  • 收藏 0
  • 0

所有评论(0)