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()有趣的使用，可以点击查看这篇文章
网友评论