Vue中的计算属性与侦听器

一.v-for

1.更新监测

在一般情况下数据发生变化,就会导致v-for更新,但有些情况,比如数组方法filter,会返回一个新数组,或者字面量的方式直接改变数组的值,不会导致v-for更新,这样的情况下可以采用重赋值或this.$set()或Vue.set()方法

// v-for更新
// 改变原数组的方法会导致v-for更新,但生成新数组,或字面量直接改变数组不会导致v-for更新
import vue from "vue";
export default {
  data() {
    return {
      arr: [1, 12, 3, 4, 5, 6, 7, 8, 9, 0],
      newarr: [],
    };
  },
  methods: {
    btn() {
      //1.重新赋值的方法,v-for新数组
      this.newarr = this.arr.filter((item) => item < 10);
      //2.this.$set()
      this.$set(this.newarr, 0, 100);
      //3.Vue.$set()
      vue.set(this.newarr, 1, 200);
    },
  },
};

---

二.v-for就地更新与key

v-for在更新时,没有改变整个DOM,而是对比两段,复用标签,就地更新

这样的更新方式可以提高性能,但不是最完美的

使用一个唯一不重复的值作为key,一使用id值,v-for检测到目标结构变化,就会准备一套新的dom结构与原来的作比较,有差异的替换,没差异的复用,这样提升性能最佳.

---

三.动态class

<p :class="{ col: true }">我是class属性动态生成</p>
<!-- :class="{类名:布尔值}" 布尔值为true,则类名启用,为false,则禁用 -->

---

四.动态style

<p :style = "{ color: isred, backgroundColor: ispink, fontSize: num }">动态style</p>
<!-- :style = "{属性名:属性值}"  -->

---

五.vue计算属性 computed

作用:一个变量依赖另外的变量计算而来

注意点:1.计算属性和data属性都是变量,不可重名

            2.函数内变量变化,计算属性也会随之变化

            3.计算属性必须加return

语法:

/* 
computed:{
  也是变量名所以不能和data里的变量重名
  计算属性名(){
    必须return 值,给这个计算属性使用
  }
}
*/
export default {
  data() {
    return {
      a: 10,
      b: 20,
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    },
  },
};

---

六.vue计算属性的缓存

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

export default {
  data() {
    return {
      message: "hello,vue",
    };
  },
  computed: {
    reverseMessage() {
      console.log("计算属性");
      return this.message.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      console.log("对比函数");
      return this.message.split("").reverse().join("");
    },
  },
};

如下调用多次对比:

 <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>

计算属性只会执行一次,后续从缓存中取值,而函数则会每次调用都执行,浪费内存

---

七.计算属性的完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

计算属性一般配合v-model使用,使用set()函数接收值

---

八.vue侦听器 watch

侦听data/computed属性值的改变,当侦听到改变时即调用

watch: {
    "被侦听的属性名" (newVal, oldVal){ 
     //执行函数在此定义       
    }
}

可以传递两个参数:

newval:当前值

oldval:之前的值

这两个是形参,可以随意定义

---

九.vue侦听器之深度侦听

当需要侦听复杂类型的数据时,就要开启深度侦听模式deep:true

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
          //需要执行的函数在此定义  
        }
    }
}

handler()固定方法触发函数

---

思考:(如果有答案可以写在评论区哦,写了也没奖励,哈哈哈)

1.为什么Vue中的key一般用id,用索引不是更加方便吗?

2.为何有时数组更新了,但v-for并没有渲染呢?

ps:有兴趣的小伙伴可以把评论区写在答案上,答案下期公布,未完待续......