Vue有关文本
简述：
Vue是后端的两个js库，vue是两个MVVM商业模式的架构。
MVVM简述
model 统计数据view 企图viewmodel 企图数学模型 （管理工作 统计数据驱动力企图）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”>
<!– 插值表达式 –>
{{msg}}
</div>
<script>
//这个vue.js文件导出的是两个构造函数 Vue
let vm = new Vue({
el:#app, //你需要将视图挂载到哪
data:{ //放统计数据的
msg:
你好
}
})
console.log(vm)
</script>
</body>
</html>
原生同时实现vue2的单向统计数据存取
流程
找这个v-model属性的属性值 对应data里面的统计数据值给对应的input 添加监听 监听input的value变动设置给对应的data使用Object.definePropety的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”>
<!– 插值表达式 –>
{{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属性的）
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
拓展运算符…
//使用扩展运算符
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
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/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>
深复本
简述：
深复本是复本所有的文本。这个两个文本相同点只在于里面的值一样，引用地址其他的都不一样。
序列化和反序列化（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/[email protected]/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会造成大量的重绘和回流（页面渲染次数增加 渲染速度就慢），所以为了解决这个问题，vue就是先操作对应的虚拟dom，再通过虚拟dom渲染实体dom（）只有一次，虚拟dom存在在内存中的。虚拟dom的形成是抽取对应的实体dom（模仿实体dom创建的对象）
diff算法（和脏检查器）
diff算法是用于比对的算法，她是比对虚拟dom，比对虚拟dom的文本的改变，通过虚拟dom比对的文本变动来控制实体文本变动（用于性能优化的）diff算法是通过对应的节点来进行比对的（元素节点，属性节点，文本节点 vnode）
节点比对流程
节点比对流程先比key(下标不能作为key （下标会变），)比对对应的节点名，比对属性名，比对子节点。patch的方法来帮你进行分类比较，比较完进行渲染（模板引擎mustache）
有关优化
生命周期优化（预加载），缓存，回收资源
打包优化（webpack/glup）(文件流)
