2021-06-16 问题总结（一）

1、Vue中的computed和watch的实际应用

① 关于watch

• watch就是监听某个值的变化，在值发生变化时，调用其函数块做出相应的操作，达到事件监听的效果
• watch是对象，因此在对象内定义的就是一个键值对，因此这个 “键” 就是需要监听的东西的名字，而 “值” 则是当这个监听的东西发生改变的时候需要做出的相应操作
• watch的deep以及immediate属性
  当没有设置deep属性时，watch是无法监听到 data 中某个对象里的某个属性值的变化情况的，当需要监听时要设置 deep属性以深度监听该对象。、
  immediate属性的作用就是在页面刷新时，是否以当前初始值执行 handler 函数（就是值变化时相应的操作）。简单的来说就是，在页面渲染的时候是否执行一次监听操作，如果设置为 true 则会执行一次，反之则不会。

② 关于 computed

• computed是用来监听自己定义的变量的，意义就是computed所监听的内容是在自己本身定义的，而不是在data中定义。
• 定义好变量之后就可以直接进行双向绑定，相较于watch的深度监听，computed更方便于监听。、
• computed一般情况是默认使用getter方法，同时也提供了setter方法。getter就是当使用这个变量时所调用的，setter则是当给变量赋值时所调用的。
• computed是具有缓存的，也就是说当整体结果不变时是不会调用其getter方法的

③ 什么时候选用watch，什么是时候选用computed？（个人理解）

• 当一个变量变化能够影响多个变量改变的，优先使用watch
• 当多个变量变化会影响一个变量变化时，优先使用computed
• 当然，有的场景可以watch和computed搭配使用更佳，就不详述了

以下是为了搞清楚其关系及特性所使用的源码，若想看清楚 computed的缓存特性可以在 fullName 的监听中打印一些标记进行查看，会发现当多次设置相同值的时候setter虽然调用了，但是getter并不会调用。关于watch的深度监听书写方式的内容在代码中也有所备注。

<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input placeholder="姓名(姓氏与名字使用空格隔开)" class="name" type="text" v-model="name"></el-input>
      <el-button type="primary" @click="setName">设置</el-button>
    </div>

    <el-input placeholder="语文成绩" class="score" type="number" v-model="grade.value1"></el-input>

    <el-input placeholder="数学成绩" class="score" type="number" v-model="grade.value2"></el-input>

    <el-input placeholder="英语成绩" class="score" type="number" v-model="grade.value3"></el-input>

    <el-button type="primary" @click="sum">统计</el-button>

    <div class="sum">
      <div>姓氏：{{lastName || '待录入'}}</div>
      <div>名字：{{firstName || '待录入'}}</div>
      <div>总计：{{result || 0}}</div>
      <div>平均分：{{average}}</div>
      <div>最高分 ：{{highest}}</div>
      <div>最低分 ：{{lowest}}</div>
    </div>
    

  </div>
</template>

<script>
export default {
  computed:{
    fullName:{
      get: function(){
        return this.firstName + this.lastName
      },

      set: function(val){
        this.lastName = val.split(' ')[0]
        this.firstName = val.split(' ')[1]
      }
    },

    result(){
      let total = 0;
      this.score.forEach(item => {
        total += Number(item);
      });
      return total
    }
  },
  
  watch: {
    // 如果需要深度监听某个值，“键” 的书写就需要加上单引号，例如'grade.value1':{handler(){...}}
    grade:{
      handler(val){
        this.highest = Math.max(this.grade.value1,this.grade.value2,this.grade.value3);
        this.lowest = Math.min(this.grade.value1,this.grade.value2,this.grade.value3)
      },
      deep: true,
      immediate: false
    },

    //当 “值” 为 function 时，拥有两个参数分别是 oldVal(新值) 和 newValue(旧值)，只写一个时默认为 newVal
    result: function(val){
      this.average = (Number(val)/this.score.length).toFixed(2)
    }
  },

  data() {
    return {
      name:"",
      firstName: '',
      lastName: '',
      average: 0,
      highest: 0,
      lowest: 0,
      grade:{
        value1: 0,
        value2: 0,
        value3: 0,
      },
      score:[]
    }
  },

  methods: {
    setName(){
      this.fullName = this.name
    },

    sum(){
      this.score = [this.grade.value1,this.grade.value2,this.grade.value3]
    }
  }
}
</script>

<style lang="scss" scoped>
.score,.name{
  width: 30%;
  margin-right: 20px;
}
.sum{
  height: 50px;
  width: 60%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>

2、vue中@click的事件修饰符

• .stop阻止事件冒泡
  <a v-on:click.stop="doThis"></a>

• .prevent 阻止事件的默认行为
  <form v-on:submit.prevent="onSubmit"></form>

• .capture内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  <div v-on:click.capture="doThis">...</div>

• .self只当在 event.target 是当前元素自身时触发处理函数
  <div v-on:click.self="doThat">...</div>
  event.target 始终指向触发事件本身的 DOM

• .once点击事件只触发一次
  <a v-on:click.once="doThis"></a>

• .passive不拦截默认事件
  <div v-on:scroll.passive="onScroll">...</div>
  滚动事件的默认行为（滚动行为）将会立即触发，而不会等待onScroll执行完成后才触发，对移动端性能有所提升

一些需要注意的

• 修饰符可以串联使用
  <a v-on:click.stop.prevent="doThat"></a>
  但是需要注意其顺序，如下所示：
  v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击

• 不要把 .passive 和 .prevent 一起使用，.prevent 会被忽略，并且浏览器会报 error。

3、HTML DOM Document 对象的 querySelector()

document.querySelector()返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll() HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
其他的 document 对象方法

4、数组常见的操作

①一些不详述的操作：
array.concat()，.join()，.push()，.pop()，.shift()，.unshitf()，.slice()，.splice()，.substr()，.substring()，.reverse()，.indexOf()，lastIndexOf()，.map()，.forEach()

②array.every()对数组的每一项都运行给定的函数，每一项都通过返回 true，反之返回false
③array.some对数组的每一项都运行给定的函数，任意一项通过返回 true，反之返回false

//array.every 和 array.some 的区别很明显的用红色字体标注了出来，一个是“且”的关系，一个事实“或”的关系

function compare(element, index, array) {
 return element > 10;
}
[1,2,3,4,11].some(compare) //true
[1,2,3,4,11].some(compare) //false

④array.sort()按照 Unicode code 位置排序，默认升序

//需要自定义排序规则的要加入排序函数进行处理
function sortFun(a,b){
 return a-b;
}
array.sort(sortFun())

⑤array.filter()对数组每一项都运行给定函数，返回满足函数条件的值形成新数组，不会改变原数组

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

var longWords = words.filter(function(word){
 return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]

⑥array.find()传入一个回调函数，找到数组中符合当前检索规则的第一个元素，并终止检索
⑦array.findIndex()传入一个回调函数，找到数组中符合当前检索规则的第一个元素下标，并终止检索

//区别是返回的是元素还是元素下标
const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1
console.log(arr.findIndex(n => typeof n === "number")) // 0

⑧array.fill(value, start, end)用新元素替换掉数组内的元素，可以指定替换下标范围。start，end分别是开始下标和结束下标，若不设置默认每一项都替换；若设置起始下标不设置结束下标，则是从起始下标开始后每一项都替换
⑨array.from()将类似数组的对象转换为真正的数组

//String从生成数组
Array.from('foo');  <!--['f', 'o', 'o']-->

关于Array.from()有趣的使用，可以点击查看这篇文章