【无标题】Vue相关内容及深拷贝和浅拷贝

最新推荐文章于 2023-08-12 09:07:31 发布
最新推荐文章于 2023-08-12 09:07:31 发布
阅读量94 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74217314/article/details/127737372
版权 
Vue相关内容

概述：

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

MVVM概述



- model 数据
- view 视图
- viewmodel  视图模型（管理  数据驱动视图）

 Vue的双向数据绑定

双向数据绑定的概述

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

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

代码实现（v-model指令）

```html
<!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的值
- 渲染应该解析对应{{}} 找到对应的属性名 进行替换

代码实现

```html
<!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实现浅拷贝

```js
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 (数组的浅拷贝)

```js
//数组的浅拷贝
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
```

#### 扩展运算符 ...

```js
//使用扩展运算符
let copyArr2 = [...arr]
console.log(copyArr2 == arr);//false
console.log(copyArr2[0] == arr[0])//true
```

#### 自定义函数实现浅拷贝

```js
//函数实现浅拷贝
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

```html
<script src="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>
```

#### 示例图

<img src="C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20221104144437814.png" alt="image-20221104144437814" style="zoom:80%;" />

### 深拷贝

#### 概述：

深拷贝是拷贝所有的内容，这个俩个内容相同点只在于里面的值是相同的，其他引用地址都不一样。相当于你用u盘拷贝一份资料，那么这份资料跟拷贝那么那份资料是没有任何关系，但是里面显示的内容是一样的。

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

```js
//使用序列化和反序列化
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)

```html
<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>
```

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

```js
//自定义函数实现深拷贝(递归)
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（文件流））
m0_74217314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0_在vue中深拷贝的封装和使用
QiuRenBB的博客
02-11 549
在src下的新建的utils文件夹中新建index.js文件，将封装代码写入： /** * 深拷贝 * @obj {Object} 被复制的对象 * @target {Object} 目标对象,默认为空对象 * @return {Object} */ function clone(obj, target) { target = target || {} for (var i in obj) { if (typeof obj[i] === 'object') { targ
day26 - Vue相关内容及深拷贝和浅拷贝
m0_71706639的博客
11-04 194
day26 - Vue相关内容及深拷贝和浅拷贝
Vue拷贝
programmeruse的博客
04-26 510
Object.assign 拷贝 let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); /
深拷贝和浅拷贝的问题
qq_44161722的博客
09-01 2569
简单理解就是：浅拷贝复制的是对象的引用地址，没有开辟新的栈，复制的结果是两个对象指向同一个地址，所以修改其中一个对象的属性，另一个对象的属性也跟着改变了。：在拷贝的时候，创建新的对象，并把原对象所有的属性都深拷贝到新对象，原属性如果是对象，也会重新创建新的对象并拷贝到新对象属性中，这样。：只复制一层对象，当对象的属性是引用类型时，实质上复制的是其引用，当引用指向的值发生变化时，深拷贝会开辟新的栈，两个对象对应两个不同的地址，修改对象A的属性，并不会影响到对象B。vue中遇到的深拷贝和浅拷贝的问题。
vue 复制内容
丿灬安之若死
02-04 848
yarn add vue mian.js中设置 //复制 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 控件上面使用 <el-button type="button" v-if="!down_app_url" class="fs12" v-clipboard:copy="'下载地址：'+down_app_url" .
vue 使用lodash实现对象数组深拷贝操作
10-14
5. 打印原对象`obj1`和拷贝后的对象`obj2`，可以看到原始对象未受修改，证明了深拷贝的效果。 深拷贝与浅拷贝的区别在于，深拷贝会创建一个全新的对象，包含原始对象的所有属性和值，包括嵌套对象和数组的每一个...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型...
vue修改值与深度拷贝
懒人w的博客
06-28 265
深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。关于为什么要用深度拷贝，如果要将可变对象和不可变对象相互转换，或者需要操作新对象的时候不影响原始对象，则用深度拷贝。copy-on-write原则就是利用深度拷贝来实现的。
vue实现深拷贝的方法
花生日记
05-27 4830
5.在 vue中，使用方法进行深拷贝的时候，需要注意： （1）如果属性B和变量A共享同一个对象，那么可以使用方法将变量A的属性赋值给变量B （3）在方法中定义一个新的类来代替原来的类，将两个方法的作用域进行区分。我们来看一下深拷贝的代码： 我们看到，这里使用了数组（string）和对象（object）进行深拷贝，这里我们首先对数组（string）和对象（object）进行了复制操作，然后在需要进行修改的地方，使用了vue-cli中的属性（value）来进行修改。但要实现深拷贝，需要两个对象具有相同的属性。
深拷贝与浅拷贝
m0_74217314的博客
11-04 233
深拷贝与浅拷贝
day26Vue相关内容及深拷贝和浅拷贝
H_Z_W001的博客
11-15 368
2个月速成js
解决vue中浅拷贝问题
rsdtfgyuhygu的博客
05-11 504
如何解决浅拷贝问题 在vue中， let list1 = { 0:[ {isHand:false,id:222,name:‘111’}, {isHand:false,id:222,name:‘111’} ] 1:[ {isHand:false,id:222,name:‘111’}, ] } let list2 = list1 在这里改变list2，list1的内容也会随之改变，这就是浅拷贝 解决方法：let list2 = {…list1} 这样改变list2的话，list1就不会再跟着改变了！ ...
vue实现复制功能
热门推荐
m0_51066449的博客
07-08 1万+
用Vue实现复制功能，横向展开同样的方法也可用来给所需字段加标签。
Vue在页面输出JSON对象，测试接口可复制使用
章小鱼的博客
08-12 1556
【代码】Vue在页面输出JSON对象，测试接口可复制使用。
vue复制粘贴数据
wang_59881的博客
02-06 1544
场景：复制表格单行数据，到新页面粘贴。点击操作栏的“复制”，复制单行数据。进入另一个页面时，判断是否有缓存，有缓存则显示该弹窗，没有缓存不显示；点击“取消”或“确定”时，清空缓存。
vue 数组数据拷贝
qq_39542702的博客
08-20 2059
在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决 1 2 3 4 5 6 7 computed: { ...
Vue实现复制功能
weixin_43857345的博客
08-10 8128
文章目录不使用插件复制input标签中的内容复制不是标签中的内容使用插件（Clipboard） 不使用插件 不使用插件，可以使用input标签，然后通过execCommand(‘copy’)函数实现复制功能。 复制input标签中的内容 <template> <div id="app"> 请输入你需要复制的内容：<input id="copy" v-model="mes"/> <button v-on:click="copy()">复制&lt
Vue知识点——vue数据深拷贝方法
weixin_30906671的博客
08-13 1968
背景 在vue页面传递数据的过程中，传递数据的引用地址并不会改变，所以当我们改变一些数据时，数据源 也会随之改变。可是有很多情景，我们改变传递的数据，并不需要源数据值发生变化，这时我们就需要对数据进行加工，使数据引用地址发生变化即可。 方法 使用JSON方法将数据解析成字符串，之后再转换成JSON对象数据 JSON.parse(JSON.stringify(....
vue深拷贝和浅拷贝
最新发布
09-14
Vue 中的深拷贝和浅拷贝是在处理对象和数组时常用的两种复制方式。下面是它们的简要介绍： 1. 浅拷贝：浅拷贝是创建一个新对象或数组，将原始对象或数组的引用复制给新对象或数组，新旧对象或数组共享同一块内存...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值