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 = null
            return 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 = 22
          console.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 --> 父 destroyed

2.已进入到页面或组件，会执行那些生命周期、顺序
beforeCreate
created
beforeMount
mounted

3.在那个阶段有$el，在那个阶段有$data
created 有data 没有el
beforeMount 有data 没有el
mounted 都有

4. 如果加入了keep-alive，会多两个生命周期
activated/deactivated

5. 如果加入了keep-alive，第一次进入会执行那些生命周期
beforeCreate
created
beforeMount
mounted
activated

6. 如果加入了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 += 1
            if(this.count % 2 === 0){
                e.target.style.backgroundColor = 'red'
            }else{
                 e.target.style.backgroundColor = ''
            }
            // console.log(e);

        }
2 事件修饰符
e.preventDefault() 阻止默认行为
e.stopPropagation() 阻止冒泡

9 vue事件修饰符

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止a链接跳转、阻止表单提交）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数

10 vue v-modle 指令修饰符

修饰符	作用
.number	自动将用户输入的值转为数值类型
.lazy	在’change’时而非’input’时更新
.trim	自动过滤用户输入的首尾空白字符

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)
调用通过标签