vue相关了解及深浅拷贝

day26 vue相关了解及深浅拷贝

vue

vue 是一个前端的js库，它简化了对应的js原生的操作，提高了对应的浏览器性能（虚拟dom，diff算法）。vue作者（尤雨溪）（vue2 2015年 vue3 2020年6月）

单向绑定

概述

vm将对应的m的数据 渲染到v上

主要操作

vm要将m的数据进行劫持，vm再控制v的渲染

vue2的劫持（es5语法）

Object.defineProperty(对于数组不能进行劫持) 重写数组方法（数组内容改变的方法（7个方法））

vue3的劫持（es6的语法）

proxy（都能劫持 万物皆对象）

双向绑定

概述

vm可以将对应m的数据渲染到v，v的页面的数据发生变化m也会发生变化

主要操作

单向相关的操作

Obje.defineProperty

proxy

监听页面数据发生变化（obServer 观察者模式）

vm控制v的渲染

避免大量操作dom （导致多次重绘和回流 性能）

解决方案

虚拟dom（虚拟dom是一个对象（抽取对应的实体dom形成的对象））

• 相关操作在对应的虚拟dom上进行（避免重绘和回流）

• 完成对应的操作后进行渲染（将虚拟dom变成实体dom）（只有一次的重绘和回流）

diff 算法（用于对比虚拟dom的差异（减少渲染量））

模板引擎（帮助渲染 帮助把实体dom抽取为虚拟dom）

双向绑定的实现

vue的双向绑定

vue2的实现（Object.defineProperty + obServer）

diff算法

深拷贝和浅拷贝

浅拷贝

复制快捷方式

概述

拷贝的对象和原本的对象不是一个对象，但是内容完全一样，其次里面的地址完全一致

实现方式

Object.assign

使用扩展运算符实现数组的浅拷贝

使用数组的concat方法和sclie方法

自定义函数遍历

第三方插件 lodash.js 提供的clone方法

深拷贝

文件复制粘贴

概述

拷贝的是对应的值 不拷贝地址

实现方式

JSON.stringify JSON.parse 先转为字符串 再转为对象

let obj={list:[1,2],user:{name:'tom'}}
let copyObj=JSON.parse(JSON.stringify(obj))

第三方插件 lodash.js 提供的_.cloneDeetp方法

自定义递归（手写）

// 自定义方法传入对应的需要拷贝的对象
function deepClone(obj){
    if(typeof obj == 'function'){
        return obj.bind(this)
    }
    if(typeof obj != 'object' || !obj){
        return obj
    }
    let CopyObj={}
    // 如果是对象 Regxp Object Array Date
    if(obj instanceOf RegExp){
        return new RegExp(obj)
    }else if(obj instanceOf Date){// 如果是日期Date
        return new Date(obj.getTime())
    }
     if(obj instanceOf Array){// 判断是数组还是对象
        CopyObj=[]
    }
    // 遍历对应的对象里面内容
    for(let key in obj){
        // 递归
        copyObj[key] = deepClone(obj[key])
    }
    return copyObj
}