vue实战项目小点总结

watch需要注意的点

如果对象的变化值相同，watch是无法监听到。同理，一个对象里面不同的属性如果变化值相同，也无法监听到第一个之后的属性变化。

created(){
	var a=1
	a=2
	a=2
}
watch:{
	//无法监听到第二次为2的赋值
	console.log("1")
}

created(){
	var a={
		b:true,
		c:true
	}
	a.b=false
	a.c=false
}
watch:{
	//无法监听到第二次为false的赋值
	console.log("1")
}

处理click事件冒泡

<div @click="clickDiv">
   <button @click="clickButton">事件冒泡</button><br>
</div> 

事件捕获

先执行外面嵌套的一层，再向里执行

<div @click.capture="clickDiv">
    <button @click="clickButton">事件捕获</button><br>
</div>  

如果希望先执行 div 事件，再执行 button 的事件，可以在 div 上使用 @click.capture 的写法，让事件由外向内执行

阻止冒泡

<div @click="clickDiv">
    <button @click.stop="clickButton">阻止事件冒泡</button><br>
</div>  

如果我们希望点击按钮时只执行按钮的事件，可以在按钮上使用 @click.stop 的写法阻止事件冒泡。

加载提示

第一种方法：标签内写

在标签中添加全局方法，绑定data数据

<div
    class="container"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
>
</div>

数据请求完，在.then后.finally

.finally(() => {
   this.loading = false;
});

第二种方法：js中写

在created中设置loading配置

this.loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
});

数据请求完，在.then后.finally

.finally(() => {
   this.loading.close() 
});

数组指定某元素向前排序

sortData(list) {
   list.forEach((item, index, arr) => {
        if (item.name.indexOf("等待") != -1) {
          arr.splice(0, 0, item);
          arr.splice(index + 1, 1);
        }
      });
   return list;
}

js监听整个页面回车事件

document.onkeydown = () => {
   let key = window.event.keyCode;
   //事件中keycode=13为回车事件
   if (key == 13) {
     //这里填需要执行的方法
   }
};

vue中监听回车事件

注意点：@click和@keyup是不能在一个元素上同时使用的

方法一：普通组件中监听回车事件

<input @keyup.enter="触发的方法"/>

方法二：elementui组件中监听回车事件

<el-input @keyup.enter.native="触发的方法"></el-input>

定时器控制滚动效果

首先发送请求获取数据，必须在数据渲染后才能在定时器中取得滚动条长度

// nextTick 数据渲染完后执行的全局方法
this.$nextTick(() => {
   this.scrollTime(); //里含定时器
});

实现滚动效果：

scrollTime() {
      let scrollDiv = this.$refs.list; //获取dom元素
      this.timer = setInterval(() => {
        let scrollDivHeight = scrollDiv.scrollHeight; //滚动条长度
        scrollDiv.scrollTop++;
        //滚动条长度-容器长度=滑动到最底部时滚动条顶部的位置
        if (scrollDiv.scrollTop == scrollDivHeight - scrollDiv.clientHeight) {
          scrollDiv.scrollTop = 0;
        }
      }, 40);
},

最后生命周期函数中清理定时器

destroyed() {
    clearInterval(this.timer);
},

promise对象的方法

在项目中如果在一个组件中发送多个promise请求，需要等所有请求响应后再做数据处理可以使用以下方法：（内容引用阮一峰的ECMAScript 6入门）

1.promise.allSettled()

const p=Promise.allSettled([p1,p2,p3])

只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。一旦发生状态变更，状态总是fulfilled，不会变成rejected。p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

2.promise.all()

const p=Promise.all([p1,p2,p3])

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

3.promise.race()

const p=Promise.race([p1,p2,p3])

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

4.peromise.any()

const p=Promise.any([p1,p2,p3])

只有等到参数数组的所有 Promise 对象都发生状态变更，返回的 Promise 对象才会发生状态变更。

p的状态由p1、p2、p3决定，分成两种情况。

（1）p1、p2、p3的状态都变成rejected，Promise.any就会抛出错误。

（2）只要p1、p2、p3之中有一个被fulfilled，p的状态就变成fulfilled，此时第一个被fulfilled的实例的返回值，会传递给p的回调函数。