js的26天（Vue相关内容及拷贝）

Vue相关的内容

概述：

Vue是前端的一个js库（诞生于2015年兴起于2016年尤雨溪创建（阿里巴巴）），vue是一个MVVM模式的框架。

MVVM概述

model数据

view视图

ciewmodel试图模式（管理 数据驱动试图）

Vue的双向数据绑定

双向数据绑定的概述

试图变化---数据也会变化

数据变化---视图也会变化

双向数据绑定运用表单标签的

代码实现（v-model指令）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name=

"

viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="./lib/vue.js"></script>

</head>

<body>

<div id="app">

<!-- 视图的渲染的地方 -->

<input type="text" v-model="msg">

<!-- 插值表达式 可以获取data里面的数据 -->

{{msg}}

</div>

<script>

//这个vue.js文件导出的是一个构造函数 Vue

let vm = new Vue({

el:'#app', //你需要将视图挂载到哪

data:{ //放数据的

msg:

'

你好'

}

})

console.log(vm)

</script>

</body>

</html>

原生实现vue2的双向数据绑定

流程

获取所有的input框

过滤哪个input有个属性叫v-model

遍历所有加了v-model属性的input

找这个v-model属性的属性值

对应data里面的数据值

给对应的input添加监听 监听input的value变化

设置给对应的data

使用Object.defineProperty 的set来监听数据的变化

在数据变化的时候 重新渲染对应的input的值

渲染应该解析对应{{}} 找到对应的属性名 进行替换

代码实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name=

"

viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div id="app">

<!-- 视图的渲染的地方 -->

<input type="text" v-model="msg">

<!-- 插值表达式 可以获取data里面的数据 -->

{{msg}}

{{hello}}

{{hello}}

</div>

<script>

class Vue{

constructor(option){

this.el = document.querySelector(option.el) //找到对应渲染的元素

this.data = option.data

//用于Object.defineProperty的使用

this.model = Object.assign({},option.data)

//拿到传入的元素的里面显示的所有的内容

this.template = document.querySelector(option.el).innerHTML

this.render()

this.

_

obServer()

}

//观察者 观察data的数据变化

_

obServer(){

let

_

this = this

//遍历所有的属性

for(let key in this.data){

Object.defineProperty(this.data,key,{

get(){

return

_

this.model[key]

},

set(v){

_

this.model[key] = v

//渲染

_

this.render()

}

})

}

}

//渲染的方法

render(){

let

_

this = this

//找到所有的{{}} 括起来的内容 进行替换

this.el.innerHTML = this.template.replace(/\{\{\w+\}\}/g,(str)=>

{

//str {{msg}}

let propertyName = str.substring(2,str.length-2).trim()

//msg

return

_

this.data[propertyName]

})

//找到对应el里面的input框

Array.from(this.el.querySelectorAll('input'))

.

filter((input)=>{

//找到input中是否具备v-model属性

return input.getAttribute('v-model')

})

.

forEach((input)=>{

let

_

this = this

//遍历所有的input框 （都是有v-model属性的）

//获取对应的v-model的属性值

let propertyName = input.getAttribute('v-model').trim()

//给这个input添加onchange事件或者是oninput

input.oninput = function(){

//获取他的value 设置给对应的data里面的属性

_

this.data[propertyName] = this.value

}

//将对应的input的value 进行设置（对应的data里面属性的数据）

input.value = this.data[propertyName]

})

}

}

//这个vue.js文件导出的是一个构造函数 Vue

let vm = new Vue({

el:'#app', //你需要将视图挂载到哪

data:{ //放数据的

msg:

'

你好',

hello:'hello world'

}

})

</script>

</body>

</html>

深拷贝和浅拷贝

浅拷贝

只拷贝第一层的值 其他拷贝是地址，相对于你拷贝一个拷贝快捷方式，这个新的快捷方式和原本的快捷

方式不是一个，但是点进去的内容是一个。

Object.assign实现浅拷贝

let obj = {name:'jack',list:[1,2,3],params:{data:'ok'}}

let copyObj = Object.assign({},obj)

console.log(obj == copyObj)//false

console.log(obj.list == copyObj.list)//true

Array.prototype.concat (数组的浅拷贝)

//数组的浅拷贝

let arr = [{

username:

'

jack',

password:'123'

},

{

username:

'

tom',

password:'456'

}]

//使用concat连接

let copyArr = [].concat(arr)

console.log(copyArr == arr)//false

console.log(copyArr[0] == arr[0])//true

Array.prototype.slice （数组的浅拷贝）

//使用数组的截取来实现浅拷贝

let copyArr1 = arr.slice()

console.log(copyArr1 == arr)//false

console.log(copyArr1[0] == arr[0])//true

扩展运算符 ...

//使用扩展运算符

let copyArr2 = [...arr]

console.log(copyArr2 == arr);//false

console.log(copyArr2[0] == arr[0])//true

自定义函数实现浅拷贝

//函数实现浅拷贝

function copy(obj){

//创建一个新的对象

let constructor = obj.constructor

let copyObj = new constructor()

for(let key in obj){

copyObj[key] = obj[key]

}

return copyObj

}

let copyArr3 = copy(arr)

console.log(copyArr3 == arr);//false

console.log(copyArr3[0] == arr[0])//true

let copyObj1 = copy(obj)

console.log(obj == copyObj1)//false

console.log(obj.list == copyObj1.list)//true

第三方工具（lodash.js） _.clone

<scriptsrc="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">

</script>

<script>

//浅拷贝 拷贝的对象 返回一个新的对象

let obj2 = {name:'jack',list:[1,2,3],params:{data:'ok'}}

let copyObj3 = _.clone(obj2)

console.log(obj2 == copyObj3)//false

console.log(obj2.list == copyObj3.list)//true

</script>

示例图

深拷贝

概述：

深拷贝是拷贝所有的内容，这个俩个内容相同点只在于里面的值是相同的，其他引用地址都不一样。相

当于你用u盘拷贝一份资料，那么这份资料跟拷贝那么那份资料是没有任何关系，但是里面显示的内容

是一样的。

序列化和反序列化 （JSON.stringify JSON.parse）

//使用序列化和反序列化

let obj = {

list:[{

name:

"

苹果"

},

{

name:

"

香蕉"

}]

}

//进行深拷贝

let copyObj = JSON.parse(JSON.stringify(obj))

console.log(copyObj == obj);//false

console.log(copyObj.list == obj.list);//false

console.log(copyObj.list[0] == obj.list[0]);//false

使用第三方工具 lodash.js (_.cloneDeep)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">

</script>

<script>

let copyObj1 = _.cloneDeep(obj)

console.log(copyObj1 == obj);//false

console.log(copyObj1.list == obj.list);//false

console.log(copyObj1.list[0] == obj.list[0]);//false

</script>

自定义函数实现深拷贝(递归实现)

//自定义函数实现深拷贝(递归)

function deepClone(obj) {

//判断当前你传入的参数是否是一个对象

if (!(typeof obj == 'object' && obj)) {

return obj

}

//如果他是数组 我就赋值为数组 如果是对象就赋值为

let copyObj = obj instanceof Array ? [] : {}

//遍历传入的对象

for (let key in obj) {

//将对应的内容进行赋值

copyObj[key] = deepClone(obj[key])

}

return copyObj

}

let copyObj2 = deepClone(obj)

console.log(copyObj2);

console.log(copyObj2 == obj);//false

console.log(copyObj2.list == obj.list);//false

console.log(copyObj2.list[0] == obj.list[0]);//false

Vue原理介绍

虚拟dom

虚拟dom顾名思义就是虚拟的dom对象（对象），这个虚拟的dom对象跟实体的dom对象没有直接的

关系。如果直接操作实体dom会造成大量的重绘和回流（页面渲染次数增加 渲染速度就慢）。所以为

了解决这个问题，vue就是先操作对应的虚拟dom，再通过虚拟dom渲染实体dom（只有一次）。虚拟

dom存在在内存中的，虚拟dom的形成是抽取对应的实体dom（模仿实体dom创建的对象）。

diff算法（脏检查器）

diff算法是用于比对的算法，他是比对虚拟dom，比对虚拟dom的内容的改变，通过虚拟dom比对的内

容变化来控制实体内容变化（用于性能优化的）。diff算法是通过对应的节点来进行比对的（元素节

点，属性节点，文本节点 vnode）。

节点比对流程

节点比对流程先比key（下标不能作为key（下标会变）），比对对应的节点名，比对属性名，比对子节

点。patch的方法来帮你进行分类比较，比较完进行渲染（模板引擎 模板引擎mustache）。

相关优化

生命周期优化（预加载（挂载的时候）、缓存（组件销毁的时候）、回收资源（组件销毁的时候））

打包优化（webpack/glup（文件流））

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容