vue学习笔记记录

3 数组去重

 let arr = [1, 2, 34, 34, 5, 6, 6, 7];function arryQC(arr) {// 第一种// return Array.from(new Set(arr))// 第二种return [...new Set(arr)];}console.log(arryQC(arr));console.log("==============这是第二种方法 indexOF===============================");let arr1 = [1, 2, 34, 34, 5, 6, 6, 7];function arryQCs(arr) {let brr = [];arr.forEach((element) => {if (brr.indexOf(element) === -1) {brr.push(element);}});console.log(brr);}arryQCs(arr1);console.log("==============这是第三种方法 filter===============================");let arr2 = [1, 2, 34, 34, 5, 6, 6, 7];function arryQC3(arr) {const result = arr.filter((item, index) => {return arr.indexOf(item) === index;});console.log(result);}arryQC3(arr2);console.log("==============这是第四种方法 reduce===============================");let arr3 = [1, 2, 34, 34, 5, 6, 6, 7];function arryQC3(arr) {const result = arr.reduce((pre, item) => {return pre.includes(item) ? pre : [...pre, item];}, []);console.log(result);}arryQC3(arr3);

5 深拷贝

 // 实现: 深拷贝// 注意: 先写Array类型的判断(因为Array的父类是Object, 写在上面无论数组对象都会进去)let newObj = {};function deepClone(newO, old) {for (let key in old) {let value = old[key];if (value instanceof Array) {newO[key] = []; // 被拷贝的是数组, 创建一个新数组deepClone(newO[key], value);} else if (value instanceof Object) {newO[key] = {}; // 新对象deepClone(newO[key], value);} else {newO[key] = value; // 基础类型, 单纯值复制}}}deepClone(newObj, oldObj);console.log(newObj,'=============',oldObj);// 总结: 深拷贝// 递归每层引用类型, 遇到对象/数组, 创建一个新的, 把基础值复制过来

6 cookies.sessionStorage和localStorage的区别

cookies: 是网站用来标记用户身份的一段数据,通常情况下，是一段加密字符串，并且默认情况下只会在同源的HTTP请求中携带

sessionStorage：他是浏览器本地存储的一种方式，以键值对的形式存储，存储的数据会在浏览器关闭后自动删除

localStorage：他是浏览器本地存储的一种方式，以键值对的形式存储，他存储的是一个持久化的数据，一般不主动删除，数据会一直存在

sessionStorage和localStorage比cookies存储数据大

7 节流和防抖

防抖
function debounce(fn, theTime) {let timer = nullreturn function () {clearTimeout(timer);timer = setTimeout(() => {fn.call(this);}, theTime);}}
节流function throttle(fn，timer) {return function () { // 真正的事件处理函数 (this: 事件源)if (fn.t) return;fn.t = setTimeout(() => {fn.call(this) // 确保上面函数中this关键字是事件源 (fn()调用, 上面this就变成了window不对了)fn.t = null // 置空, 让事件再次触发的时候, 重新创建一个定时器}, timer)}}

浅拷贝和深拷贝的区别

* 浅拷贝：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅拷贝的对象也会相应的发生改变* 新旧对象共享内存，修改其中一个，另一个也会受到影响* 方法一：直接赋值* 方法二：object.assign()* * 深拷贝：在内存中开辟一块新的地址用于存放复制的对象* 新旧对象不会共享内存，修改其中一个不会影响另一个* * 方法一：JSON对象* *  let obj = {name:'张三',age:20}const obj1 = JSON.parse(JSON.stringify(obj))obj1.age = 22console.log(obj.age,'==============',obj1.age); // 20 '==============' 22* 方法二：扩展运算符let obj = { name: "张三", age: 20 };let obj1 = {...obj,age:25}console.log(obj.age, "==============", obj1.age); // 20 '==============' 25

reduce 求和

 const arr = [{ id: 1, name: "西瓜", state: true, price: 10, count: 1 },{ id: 2, name: "南瓜", state: false, price: 20, count: 2 },{ id: 3, name: "苦瓜", state: true, price: 30, count: 3 },];let amt = 0// 第一种// arr.filter(item => item.state).forEach(item => {//   amt += item.price * item.count// }) // 第二种 reduce// arr.filter(item => item.state).reduce((累加的结果，当前循环项)=> ,初始值)const result = arr.filter(item => item.state).reduce((amt,item) => {return amt += item.price * item.count},0)console.log(result);

1 vue路由传参

1 params 传参
this.$router.push({name:"admin",//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)params:{id:item.id}
})//这个组件对应的路由配置
{//组件路径path: '/admin',//组件别名name: 'admin',//组件名component: Admin,
}
2.路由属性动态传参
this.$router.push({name:"/admin/${item.id}",
})===接收 this.$route.params.id===注意：参数不可见，当页面刷新后获取不到参数值
3 query 传参
this.$router.push({name:"/admin",query:{id：item.id}
})

2 vue路由守卫

前置路由守卫
router.beforEach((to,from,next)=>{// to 表示将要访问的路由的信息对象// from 表示将要离开的路由的信息对象// next() 函数表示放行的意思
})

3 Vue 组件传值

1 父传子 自定义属性
<Child-Vm :msg="msg"></Child-Vm>
<template><div><h1>{{msg}}</h1></div>
</template><script>export default {props:['msg']}
</script>
2 子向父传值 自定义事件$emit(事件名，数据)
<child @changeNum="getFromSon" class="er"></child>changeNumNew(){this.$emit('changeNum',this.msg)}getFromSon(val){this.fromSom = val}
3 兄弟  传值
创建一个bus.js模块 并向外共享一个Vue实例对象
在发送方，调用bus.$emit(事件名称，要发送的数据)触发自定义事件
在接收方，调用bus.$on(事件名称，事件处理函数)注册自定义事件

4 watch 和 computed 的区别

1.computed 能完成的功能，watch都能实现

2.watch都能实现的功能，computed不一定实现 列如 watch可以进行异步操作

两个小原则

1 所被Vue管理的函数，最好写成普通函数，这样this的指向才是VM或是组件实例对象

2 所有不被vue所管理的函数（定时器的回调函数、Ajax的回调函数等），最好写成箭头函数

5 Vue 生命周期

1 vue自带8个生命周期beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforDestroy
destroyed
父子组件生命周期关系
创建： 父 created --> 子 created --> 子 mounted --> 父 mounted
更新： 父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated
销毁： 父 beforeDestryy --> 子 beforeDestryy --> 子 destroyed --> 父 destroyed2.已进入到页面或组件，会执行那些生命周期、顺序
beforeCreate
created
beforeMount
mounted3.在那个阶段有$el，在那个阶段有$data
created 有data 没有el
beforeMount 有data 没有el
mounted 都有4. 如果加入了keep-alive，会多两个生命周期
activated/deactivated5. 如果加入了keep-alive，第一次进入会执行那些生命周期
beforeCreate
created
beforeMount
mounted
activated6. 如果加入了keep-alive，第二
次或第n次进入会执行那些生命周期
只执行一个activated
7 谈谈你对keep-alive的理解1 vue自带的一个组件，缓存组件====》提升性能2 列如首页跳转详情页，重复跳转就可不用重复请求

6 Vue路由模式

路由模式有两种:hash(默认) history
1 表现形态不一样 
history : http:/localhost:8080/about
hash : http:/localhost:8080/#/about
2.跳转请求
history 会发请求
hash 不会请求
3 打包后前端自测要使用hash,如果使用history会出现空白页

7 Vue数据更新视图不刷新

1 修改数组值类型 添加数组新成员
办法：添加一个新数组
2 添加对象中的新对象
解决办法新对象替换
export default {data() {return {count: 0,colors: ['red', 'green', 'blue']}},methods: {changeValue() {setTimeout(() => {错误this.colors[0] = 'apple'第一种this.colors =  ['apple', 'green', 'blue']第二种this.$set(this.colors,0,'apple')},500)}}
}
最好办法 $set 第一个参数表示数据对象 可以是vue实例对象，也可以是其它对象
第二个参数表示属性名称
第三个参数表示属性值

8 vue 事件绑定 $event

 <!--add 不传参 默认e原生事件对象DOM第二种 add(第一个参数，$event) 位置可互换--><button @click="add">点击</button>add(e) {this.count += 1if(this.count % 2 === 0){e.target.style.backgroundColor = 'red'}else{e.target.style.backgroundColor = ''}// console.log(e);}
2 事件修饰符
e.preventDefault() 阻止默认行为
e.stopPropagation() 阻止冒泡

9 vue事件修饰符

10 vue v-modle 指令修饰符

11 Vue ref

操作dom
方法 元素/组件 定义ref
操作： $refs
<input type="text" v-if="inputVisible" @blur="showbtn" ref="myRef"><button v-else @click="showInp">展示文本框</button>showInp() {// 失去焦点this.inputVisible = true// 获得焦点 $nexttick DOM更新后回调this.$nextTick(() => {this.$refs.myRef.focus()})},showbtn() {this.inputVisible = false}

全局组件

import Coutn from '地址'
vue.commponent('组件名'，Coutn)
调用通过标签

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！