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的深度监听书写方式的内容在代码中也有所备注。

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

• .stop阻止事件冒泡
  

• .prevent 阻止事件的默认行为
  

• .capture内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  
  ...

• .self只当在 event.target 是当前元素自身时触发处理函数
  
  ...
  
  event.target 始终指向触发事件本身的 DOM

• .once点击事件只触发一次
  

• .passive不拦截默认事件
  
  ...
  
  滚动事件的默认行为（滚动行为）将会立即触发，而不会等待onScroll执行完成后才触发，对移动端性能有所提升

一些需要注意的

• 修饰符可以串联使用
  
  但是需要注意其顺序，如下所示：
  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');  

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