VUE你知多少

最新推荐文章于 2024-01-10 19:59:24 发布
最新推荐文章于 2024-01-10 19:59:24 发布
阅读量351 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Clytza/article/details/129505053
版权

什么是vue

  • vue 是一个前端的js库，也是一个mvvm的框架。它简化对应的js原生的操作，提高了对应的浏览器性能（虚拟dom，diff算法）
  • vue作者：尤雨溪，vue2诞生于2015年，vue3诞生于2020年6月，被阿里巴巴维护。
  • 在vue中： Model：指的是js中的数据，如对象，数组等等。 View：指的是页面视图 viewModel：指的是vue实例例化对象

特点

Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View进行单向绑定或者双向绑定。

单向绑定（v-bind)

单向数据流在 Vue 中实际表现就是：当 Model 中的 data 发生变化的时候会单向修改 View 中的值，而 View 中的值发生变化的时候，Model 不会感知。实际应用就是 v-bind 单向数据。

主要操作：

  • vue2的劫持 （es5语法）
  • Object.defineProperty
  • 数组不能进行劫持，需要采用重写数组的方法也就是改变数组的七个方法来劫持
  • vue3的劫持 （es6语法）
  • proxy（万物皆对象：都能劫持）

双向绑定MVVM（v-model)

  • 双向数据绑定多了 View 变化会通知到 Model 层。
  • MVVM 的具体实现：无论 Model 还是 View 中的值发生变化，都会通过 ViewModel 通知到对方并实现同步。
  • 一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
  • 二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
  • 实际应用就是 v-model 双向数据绑定。

双向数据绑定的实现

  • vue的双向数据绑定

    <!-- 准备容器 -->
    <div id="app">
        <!-- v-model 是vue中实现双向数据绑定的指令 -->
        <input type="text" v-model="message">
        <!-- 查看对应message的值   模板语法-->
        {{message}}
    </div>
    <!-- 链入vue.js -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
            // 挂载地址
            el: '#app',
            // 数据
            data: {
                message: 'hello'
            }
        })
    </script>

  • vue2的双向数据绑定

数据劫持（Object.defineProperty） + obServer

 【实现流程】

  • 获取所有的 input 框
  • 过滤有 v-model 属性的 input
  • 遍历所有过滤后的 input
  • 找这个 v-model 属性的属性值 data，递归 data 中的数据来进行劫持
  • 使用 ObServer 监听 input 输入框的内容变化
  • 重新设置对应的 data 中的数据（this._data）
  • 使用 Object.defineProperty 的 set 来监听数据的变化
  • 在数据变化的时候，重新渲染对应的 input 的值 
  • 渲染应该解析对应{ { } } 找到对应的属性名进行替换
    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]
        })
    }
}

diff 算法（脏检查器）

  • diff 算法用于比对新旧虚拟dom，采用深度优先，时间复杂度为O(n)，利用patch补丁包的形式来进行重新渲染。
  • 先比对自身，通过key来找到自身 （key是唯一的下标不能作为key）
  • 再比对自身的属性，比对文本，再比对子元素，递归比到低
  • 实际DOM
<ul id="list">
    <li class="item">哈哈</li>
    <li class="item">呵呵</li>
    <li class="item">林三心哈哈哈哈哈</li> // 修改
</ul>
  • 虚拟DOM
  • 虚拟dom顾名思义就是虚拟的dom对象，这个虚拟的dom对象跟实体的dom对象没有直接的关系。
  • 如果直接操作实体dom会造成大量的重绘和回流（页面渲染次数增加，渲染速度就慢）。
  • 所以为了解决这个问题，vue就是先操作对应的虚拟dom，再通过虚拟dom渲染实体dom，这个渲染到实体dom的过程只会进行一次。
  • 虚拟dom在内存中的，所以渲染快，虚拟dom的形成是抽取对应的实体dom（模仿实体dom创建的对象）。
    let newVDOM = { // 新虚拟DOM
        tagName: 'ul', // 标签名
        props: { // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
                tagName: 'li', props: { class: 'item' }, children: ['哈哈']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['呵呵']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['林三心哈哈哈哈哈']
            },
        ]
    }
  • 比对流程如下

深拷贝和浅拷贝

浅拷贝：创建快捷键

  • 浅拷贝不等于赋值，它会开辟一个新的内存空间，和原本的地址不一致，所以拷贝的对象和原本的对象不是一个对象
  • 浅拷贝里面的内容都是拷贝对应的地址，所以和原本的内容地址一致

浅拷贝的几种实现方法

对象拷贝：Object.assign

  • let copyObj = Object.assign ( { } , obj )
let obj = {
    user: {
        age: 18
    }
}
let newObj = obj
console.log(newObj == obj) //true 赋值的地址是共享的
//浅拷贝
let copyObj = Object.assign({}, obj)
//浅拷贝会产生一个新的对象 和原本的对象地址不一样
console.log(obj == copyObj) //false
//里面的内容的地址是共享的
console.log(obj.user == copyObj.user) //true
obj.user.age = 20
console.log(copyObj.user.age) //20

数组拷贝：concat、slice

  • let concatArr = [ ].concat ( arr )
  • let sliceArr = arr.slice ()
//使用数组的concat方法实现数组的浅拷贝
let concatArr = [].concat(arr)
console.log(concatArr == arr) //false
console.log(concatArr[0] == arr[0]) //true


//使用数组的slice方法
let sliceArr = arr.slice()
console.log(sliceArr == arr) //false
console.log(sliceArr[0] == arr[0]) //true

扩展运算符可以实现数组及对象的浅拷贝

  • let copyObj1 = { ...obj }
  • let copyArr = [ ...arr ]
//使用扩展运算符
let copyObj1 = {...obj}
console.log(copyObj1 == obj) //false
console.log(copyObj1.user == obj.user) //true
let arr = [{age:19},{name:'jack'}]
let copyArr = [...arr]
console.log(copyArr == arr) //false
console.log(copyArr[0] == arr[0]) //true

自定义函数 

        function clone(obj) {
            let copyObj = {}
            for (let key in obj) {
                copyObj[key] = obj[key]
            }
            return copyObj
        }
        let obj1 = {
            user: {
                age: 18
            }
        }
        let copyObj = clone(obj1)
        console.log(obj1 == copyObj); //false
        console.log(copyObj.user == obj1.user); //true

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

  • <script src="https://www.lodashjs.com/"></script>
  • let cloneObj = _.clone ( obj1 )
<script src="https://www.lodashjs.com/"></script>
let obj1 = {
    user: {}
}
let cloneObj = _.clone(obj1)
console.log(cloneObj == obj1)//false
console.log(cloneObj.user == obj1.user)//true

深拷贝：文件复制粘贴

  • 拷贝的是对应的值，不拷贝地址。

【实现方式】

  • JSON.parse、JSON.stringify

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

let obj = {list:['1','2'],user:{name:'tom'}}
let copyObj = JSON.parse(JSON.stringify(obj))
console.log(obj == copyObj) //false
console.log(obj.list == copyObj.list) //false
console.log(obj.user == copyObj.user) //false
console.log(obj.user.name == copyObj.user.name) //true
  • 使用 lodash.js 中的 _.cloneDeep 方法（第三方插件）

<script src="https://www.lodashjs.com/"></script>

let cloneObj = _.cloneDeep ( obj );

//使用lodash.js _.cloneDeep
let cloneObj = _.cloneDeep(obj);
console.log(obj == cloneObj) //false
console.log(obj.list == cloneObj.list) //false
console.log(obj.user == cloneObj.user) //false
console.log(obj.user.name == cloneObj.user.name) //true
  • 自定义递归书写对应的深拷贝 （重点）
        function deepClone(obj) {
            //先判断是否为函数，必须放在判断是否为对象之前
            if (typeof obj == 'function') {
                return obj.bind(this)
            }
            // 判断是否为对象以及排除null这个特殊情况
            if (typeof obj != 'object' || !obj) {
                return obj
            }
            // 判断是否为正则对象
            if (obj instanceof RegExp) {
                return new RegExp(obj)
            }
            // 判断是否为日期对象
            if (obj instanceof Date) {
                return new Date(obj.getTime())
            }
            // 判断是否为数组对象或者Object
            let newObj = obj.isArray ? [] : {}
            for (var key in obj) {
                // 利用递归
                newObj[key] = deepClone(obj[key])
            }
            return newObj
        }
        let obj = {
            name: {
                id: {
                    regexp: /\w+/,
                    type() {
                        console.log('你好')
                    },
                    likes: {
                        color: [1, 2, 3, 5]
                    }
                }
            }
        }
        let copyObj = deepClone(obj)
        console.log(copyObj == obj); //false
        console.log(copyObj.name == obj.name); //false
        console.log(copyObj.name.id == obj.name.id); //false
        console.log(copyObj.name.id.regexp == obj.name.id.regexp); //false
        console.log(copyObj.name.id.type == obj.name.id.type); //false
        console.log(copyObj.name.id.likes == obj.name.id.likes); //false
        console.log(copyObj.name.id.likes.color == obj.name.id.likes.color); //false
  • vue是一个mvvm的框架，vm是内置的，不需要你去管理。
  • vue的数据劫持是通过 Object.defineProperty (vue2) 重写了数组的7个方法（不能对于数组进行劫持） Proxy (vue3)。
  • vue主要劫持是data中的数据 （_data的属性）递归去进行劫持。
  • vue的双向数据绑定主要是通过数据劫持+obServer（观察者模式）。
  • vue是利用虚拟dom来进行对应的比对（里面采用diff算法）使用模板引擎进行解析渲染。
  • diff算法比对先比对自身（key），再比对对应的vnode，再比对对应的子节点（递归比对） 采用patch补丁包的形式来进行重新渲染。
  • 深拷贝拷贝的是值，浅拷贝拷贝的是地址，不管深浅拷贝都会产生一个新的对象。
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 6万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
前端面试之-Vue 你对Vue了解多少？
webqianduan1的博客
05-28 1391
Vue目前作为前端三大框架之一，在行业内使用的越来越广泛，但你有系统地学习过，并且掌握了其要领么？ 6月即将到来，跳槽和面试也伴随着夏天悄然而至了，互联网中前端的竞争也愈来愈激烈，那么想要吸引面试官的目光的你？是否应该掌握一些独门技艺？ 那么，它是新的方式还是新的思路呢？这边就以大家苦恼的几个问题分享一下“新发现”： 01开始重点倾向问源码 相信最近去面试的人都会有这个体会，去年面试官只问怎么用Vue，今年开始问Vue响应式原理，以及Vue各种相关库的源码？ 结果回答...
VUE的认识
June_FlyingFrost的博客
04-01 328
VUE vue官网(https://cn.vuejs.org/) 1.VUE了解 ① VUE是一个渐进式的js框架(MVVM模式) 1）渐进式：学多少，用多少 2）MVVM模式： ② 特性 轻量： Vue.js库的体积非常小的，并且不依赖其他基础库。 数据绑定： 对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。 指令： 内置指令统一为(v—*)，也可以自定义指令，通过对应表达值...
vue项目性能优化你了解多少？
约妲己吃火锅的博客
10-14 450
最近，博主我也是很苦啊！现在新的开发任务下来了，忙着做产品需求分析，报告，跑业务，晚上加班陪领导酒局，每天累得跟狗一样。但是我就喜欢这一口，哈哈！！现在我的职业生涯开始真正的步入正轨，今后会不定时的更新文章，谢谢大家对我的支持！（膜拜） 从前的我是一个最很菜的混子，连最基本的函数方法该怎么用都不明白，工作之后更惨，最怕每个星期的例会，每次会上最有可能挨批的就是我。 好在我脸皮够厚，刚出社会遭到过很多的独打，在长途汽车站明明已经看到汽车站售票大厅了，硬是听信人家说不在这里买票，让黄牛多收几十块钱的服务费；
VUE2基本介绍
weixin_52633911的博客
01-10 601
Vue最基础的介绍和简单使用
Vue2 12月24日 迎来2.7.16终版 版本号为 Swan Song，意为绝唱
weixin_48230016的博客
12-26 2364
Vue 官推消息，Vue 2 将于 2023年12月31日停止维护。2023年12月24日，vue^2.7.16 版本发布，版本号为Swan Song，意为绝唱。vue2在vue的发展历程中，是一个重要的版本，是一个重要的里程碑，终版也标志着该版本的稳定和成熟。 同时维护vue3和vue2版本对vue开发团队来说，是不可持续的，创始人希望集中精力在Vue3的开发和推广上，随着vue3的生态系统的成熟，vue2正在经历一个慢慢被取代的过程。但不可否认的是，vue2框架在国内引导很大一部分前端程序
基于Vue的百度地图mapvgl组件vue2和vue3设计源码
最新发布
05-23
vue-mapvgl是一个基于Vue开发的百度地图mapvgl组件项目，包含137个文件，其中包括47个Markdown文件、29个JavaScript文件、29个Vue文件、7个PNG图片文件、6个HDR图片文件、3个JSON文件、3个GLTF文件、2个ICO图标文件...
你不可不知的Vue.js列表渲染详解
10-16
你也可以使用`of`代替`in`作为分隔符，如`v-for="item of items"`。 3. **遍历对象** v-for不仅可以用于数组，还能遍历对象的属性。可以提供第二个参数为属性名称（键名）： ```html (value, name) in object">...
vue-underscore-实现下划线的简单vue插件-Vue.js开发
05-27
vue-underscore，您知道Underscore.js是JavaScript的实用程序带库，它为常见的功能嫌疑人提供支持（每个，地图，红色vue-underscore。您知道Underscore.js是JavaScript的实用程序带库，为以下功能提供支持：目录功能...
基于Vue的cool-admin-vue后台权限管理框架设计源码
04-11
本源码提供了一个基于Vue的cool-admin-vue后台权限管理框架设计。项目包含220个文件，其中包括71个Vue文件、68个JavaScript文件、44个SVG文件、8个PNG图片、6个SCSS文件、4个CSS文件和2个JSON文件。这个框架是一个...
学VUE破大防
ceike的博客
05-03 2286
Vue3全家桶在正式发布时间：2020年9月18日，作者：尤雨溪（中国），毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University， 尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。 vue1发布的时候还不完善， vue2发布的时间是2016年，同年尤雨溪加盟阿里 vue3的发布使得基于js开发的网页以及网页游戏..
Vue3.0和vue2的区别详解
m0_52553037的博客
04-26 1421
vue3发布于2020年9月18号 一.vue3和 vue2的区别 1.vue3.x性能上有很大提升 2.打包减少了41% 3.初次渲染相比vue2快了55%，更新快了13% 4.内存使用减少了54% 5..使用了组合（composition）api 代替了vue2得选项（option）api 6.vue3比vue2代码更容易维护 7.响应式原理不同 Vue2.0使用Object.defineProperty 原理：通过使用 Object.defineProperty 来劫持对象属性的.
尤雨溪：重头来过的 Vue 3 带来了什么？
前端开发博客
06-25 1096
作者：尤雨溪，翻译：CSDN在过去的一年里，Vue团队一直在开发Vue.js的下一个主要版本Vue 3，我们希望能在2020年上半年将其发布（在撰写本文时，这项开发工作正在进行中）。重写...
＜ 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 ＞
一个平平无奇的技术宅
04-10 2219
文章目录一、发展历程及背景> vue.js发展历程> 背景二、Vue3 变化内容1、进步特征简述> 特征一：速度更快> 特征二：体积更小> 特征三：更易维护> 特征四：拥抱TypeScript> 特征五：更接近原生> 特征六：更易使用2、Vue3 中需要关注的新功能> framents> Teleport> createRenderer> composition Api3、非兼容变更> Global API> 模板指令&gt
前端（四）——vue.js、vue、vue2、vue3
杜永康的博客
07-07 1万+
Vue.js是由华裔工程师尤雨溪（Evan You）于2014年创建的开源JavaScript框架。他在Google工作期间，积累了丰富的前端开发经验，并觉得现有的前端框架存在一些不足之处，如复杂性、学习曲线陡峭等。因此，尤雨溪决定开发一个简单、灵活且高效的框架，使开发者能够更轻松地构建用户界面。他的灵感来源于AngularJS和React这两个优秀的前端框架。尤雨溪最初在2013年开始着手构建这个框架的原型，最终于2014年正式发布了Vue.js 1.0版。
vue基本使用
小脆筒style的博客
10-31 581
vue基本使用 vue简介 vue特性 MVVM vue 的基本使用 一、vue简介 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架 二、vue特性 数据驱动视图 双向数据绑定 1. 数据驱动视图： 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下： 2. 双向数据绑定 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源 中。示意图如下：
Vue 2 生命周期即将结束
一个超爱喝可乐的web前端攻城狮
12-21 278
Vue 2 生命周期即将结束
【前端面经】Vue3和Vue2的区别
欢迎光临~
05-04 654
Vue3是Vue框架的下一个重要版本，它带来了许多令人兴奋的新特性和改进。在本文中，我们介绍了Vue3和Vue2之间的主要区别，包括代码大小和性能、组合式API和TypeScript支持。此外，我们还介绍了Vue3的其他新特性，例如Fragments、Teleport和Suspense。对于正在考虑是否将Vue3用于其项目的开发人员来说，这些信息应该是有用的。Vue3的改进可以提高代码的可读性、可维护性和可靠性，从而使开发人员更容易地开发出高质量的Web应用程序。
Vue2.7正式发布，终于可以在Vue2项目中使用Vue3的特性了，真香~
热门推荐
高大志leo的博客
07-02 2万+
目录前言正文一、向后移植的功能二、与 Vue3 的差异三、项目升级四、后续支持总结尽管现在 Vue3 是默认版本，但还有许多用户、相关库、周边生态使用的是 Vue2，且由于依赖兼容性、浏览器支持要求或没有足够的带宽升级，导致不得不继续使用 Vue2。难道 Vue3 发布了这么多“真香”的特性，我们 Vue2 的用户与项目就只能眼巴巴地看着？当然不是！有一个好消息是，前两天 Vue2.7 正式发布了。在此版本中，从 Vue3 向后移植了一些最重要的功能，以便 Vue2 用户也可以从中受益。在 Vue2.7 中
40.对于vue3，你了解多少
02-09
我对Vue3的了解不多，但是我知道它是一个基于JavaScript的框架，可以用来开发单页面应用和移动应用程序。它提供了一种更快更简单的方式来构建和维护大型应用程序，并且可以让开发人员更轻松地实现跨平台的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值