Vue--计算属性--侦听器

1. v-for更新检测

1.1 问题 

1. 哪些数组方法会导致v-for更新页面?

2. 有的数组方法不导致v-for更新页面, 如何处理?

1.2 答案 

1. 哪些数组方法会导致v-for更新页面?

   1. 可以改变原数组的方法

2. 有的数组方法不导致v-for更新页面, 如何处理?

   1. 拿返回的新数组, 直接替换旧数组

   2. this.$set()方法更新某个值

这些方法会触发数组改变, v-for会监测到并更新页面

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新

• slice()

• filter()

• concat()

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组  

总结: 改变原数组的方法才能让v-for更新  

2. key作用 

2.1 问题

1. 子元素或者内容改变会分哪2种情况比较?

2. key值要求是?

3. key应该怎么用?

4. key的好处?

2.2 答案 

1. 子元素或者内容改变会分哪2种情况比较?

   1. 无key, 就地更新

   2. 有key, 按照key比较

2. key值要求是?

   1. 唯一不重复的字符串或者数值

3. key应该怎么用?

   1. 有id用id, 无id用索引

4. key的好处?

   1. 可以提高更新的性能

3. 动态class和style 

1. 如何给标签class属性动态赋值?

        :class=“{类名: 布尔值}”, true使用, false不用

2. 给style赋值和class区别是?

        :class="{类名: 布尔值}”, true使用, false不用

        :style="{css属性名: 值}"

4. 计算属性 

4.1 问题

1. 计算属性使用场景?

2. 计算属性特点?

3. 计算属性注意事项?

4.2 答案 

1. 计算属性使用场景?

   1. 当变量的值, 需要通过别人计算而得来

2. 计算属性特点?

   1. 函数内使用的变量改变, 重新计算结果返回

3. 计算属性注意事项?

   1. 计算属性名和data里名字不能重复

5. 计算属性--缓存 

5.1 目标 

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

5.2 问题

1. 计算属性好处是?

2. 计算属性使用场景?

5.3 答案 

1. 计算属性好处是?

   1. 带缓存

   2. 依赖项不变, 直接从缓存取

   3. 依赖项改变, 函数自动执行并重新缓存

2. 计算属性使用场景?

   1. 当变量值, 依赖其他变量计算而得来才用

6. vue 侦听器--watch 

6.1 目标

可以侦听data/computed属性值改变

6.2 学习

语法:

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

完整例子代码:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

 总结: 想要侦听一个属性变化, 可使用侦听属性watch

6.3 小结 

如何侦听到某个变量值改变呢?

1. 使用watch配置项, key是要侦听的data/计算属性名

7. vue-侦听器--深度侦听 

7.1 目标

侦听复杂类型

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

完整例子代码:

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true
    }
  }
}
</script>

<style>

</style>

 总结: deep深度侦听, handler固定方法触发

7.2 小结 

如何侦听一个对象/数组呢?

1. 把侦听器写成对象形式, 给handler方法和deep:true