首页 > 其他分享 >Vue2知识点简要

Vue2知识点简要

时间:2023-06-06 14:11:07浏览次数:47  
标签:知识点 简要 DOM 绑定 Vue2 组件 数据 节点 属性

一、双向绑定原理

  Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式),

  编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式);

  详细的是主要是定义一个Observe类实现对象的监控,通过Compile方法来解析DOM中的指令和替换DOM,每当遇到一个v-、{{}}等属性

  则生成一个Watcher,同时将Watcher添加到Dep中,当有属性变化时则轮循Dep中所有的Watcher进行UI更新等操作

二、框架的优缺点

  优点:1. 轻量级、提供了响应式编程概念,组件化思想

     2. 采用虚拟DOM,渲染效率高

     3. 生态完整

  缺点:1. 由于页面内容都是基于JS,所以SEO方面不是很友好

三、虚拟DOM和Diff算法

  虚拟DOM:web项目中比较消耗性能的就包含DOM的重排、重绘以及不断的读取DOM,但是JS的计算性能要比DOM的好很多,所以基于这个原因,Vue通过

        生成虚拟DOM,记录DOM节点名称、类型、属性以及事件等各种属性,当数据有变化时,通过DIF算法对比新旧虚拟DOM,以最小的性能代价找到DOM变化点,

        然后只更新变化的DOM即可。

  Diff算法简述:1. 为了提升性能,Diff算法对比节点是只对比同一级节点,不做跨级对比

          2. 对比节点,如果节点类型不同,则替换节点、类型相同则替换属性或者文本、节点不存在则删除、节点新增则增加

 

          3. 如果存在子节点,设置头尾指针,从节点两端同时进行对比,同时移动指针下标值,如果endIndex>startIndex则终止循环

 四、生命周期及其作用

  1. beforeCreate: 初始化Vue实例,同时初始化周期事件,但是并没有解析出$el以及没有绑定data

  2. created: 此时数据已经绑定,未解析出$el,但是$data已经绑定到vue中,这之后,beforeMount之前会判断是否含有el元素,

        没有则生命周期结束(当执行$mount(el)时,继续后续功能,因为此时已有$el),如果有则继续判断是否有template,

        有temp,则编译生成render函数,否则编译outerHtml,如果要在created阶段中进行dom操作,就要将操作都放在 Vue.nextTick() 的回调函数中

  3. beforeMount: 完成data和el数据初始化,但是页面中还是用vue占位符

  4. mounted: 载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到BOM节点中去

  5. beforeUpdate: 重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

  6. updated: 数据更新完成,dom也重新render完成

  7. beforeDestory: 销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

  8. destoryed: 销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher、事件监听、子组件等

五、组件间通信方式

  1. 父传子:采用v-model与props的方式进行通信,但是是单向的,子组件该值的改变并不会影响父组件;还可以采用Vuex

  2. 子传父:采用@emit事件由子组件向父组件冒泡数据或者采用$on的方式调用子组件的方式回调传递数据,同样也是单向的;还可以采用Vuex

  3. 兄弟组件:创建eventBus事件总线通讯,简单方便不受兄弟组件的层级关系限制;子1上报给父,父下发给子2,数据传递逻辑较乱,不能适用于多层级的兄弟关系;还可以采用Vuex

  4. 父子组件的值同步修改:父组件中绑定v-model:example,子组件设置emits: ['update:example'], 当子修改后,采用$emit('update:example')就可以将父组件的值同步改变

六、Vuex的使用

  组件之间经常会有数据之间相互通信,但是多层嵌套传值复杂度就会增加。因此vuex就是把常用的变量抽取出来组成一个全局单例模式进行管理,
  将共享的数据放到vuex,任何组件都可以使用,一旦数据修改,所有引用数据的组件的值都会同步修改,通过commit('***')进行修改,通过mapState把全局的state和getters映射到组件中,

  总共有五个属性:

  state: 存放一些状态(简单说就是变量),状态被修改后,所有引用的地方都会修改

  getters: 有时候需要从state中派生出一些状态,比如对状态根据某个条件进行过滤

  mutations:定义如何修改state中的状态,更新state值的唯一方法就是提交mutation,比如:store.commit('****')

  action:专门用来解决mutations只有同步无异步的问题,使用commit赋值

  modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

七、路由的使用

  1. 全局路由:beforeEach、afterEach方法当导航触发时会被顺序执行,可以进行添加token以及做跳转拦截等

  2. 单个路由:beforeEnter

  3. 组件间路由:beforeRouteEnter beforeRouteUpdate  beforeRouteLeave

八、需要注意的知识点

  1. v-model和v-bind的差别:

    v-bind是单向绑定或者叫属性绑定,支持修改属性值,可简写为:attr
    v-model是双向绑定,可用在输入标签中
    v-bind和v-model同时使用时 model优先级更高

  2. 为什么数组的值变化了不能同步更新到UI:

    Vue2对数据的监听主要是通过defineProperty方法实现的,通过试验可以得知该方法可以监控已有属性的变化,但是Vue2依旧没有实现这个能力

    原因主要是考虑到性能问题:一个对象的属性个数一般是有限的,所以对属性进行监控消耗性能不大,但是数组可能会有成千上万,

    对每个属性监控性能消耗太大,付出和用户体验不成正比,故而没有实现

  3. computed和watch的使用和区别:  

    都是以vue的依赖追踪机制为基础,都是为了当某一个数据发生变化时,所有依赖这个数据的数据发生变化
    watch: 一个数据影响多个数据
    computed:一个数据受多个数据影响,支持set、get方法(默认是get),有缓存效果

标签:知识点,简要,DOM,绑定,Vue2,组件,数据,节点,属性
From: https://www.cnblogs.com/codeOnMar/p/17417245.html

相关文章

  • vue2插槽的透传
    多组件嵌套的情况下,有时候会希望父组件向孙子组件(或者更小的辈分)的slot中插入内容,显然,这需要在孙子组件里面用<slot:name="field.component":data="formValue"/>,在父组件里面用<childComponent#slotName="childData"><childComponent/>。但是在子组件中应该如何进行插槽的......
  • 前端遗忘知识点
    #JS1.基本数据类型numberstringbooleanundefindnullbigintsymbol2.交互alertconfirm确认prompt带输入的确认3.Object.assign(a,b,c)进行合并将a,b,c中的同名属性进行合并4.计算属性名可以将变量的计算结果作为属性的名称```letname="firstname"letperson={......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • QT的类的一些知识点
    给一个例子classSerialReaderThread:publicQThread{Q_OBJECTpublic:explicitSerialReaderThread(QSerialPort*serialPort,QObject*parent=nullptr):QThread(parent),serialPort(serialPort){}protected:voidrun()override......
  • JUC知识点框架
    JUC(java.util.concurrent)atomicAtomicBooleanAtomicIntegerAtomicLongAtomicReferencelocksAQS(AbstractQueuedSynchronizer)ReentrantLockConditionLockSupportReentrantReadWriteLockStampedLockAQS典型应用ReentrantLockCountDownLatchSemaphore......
  • Knowledgeroot 开源知识管理系统简要介绍
    [url]http://blog.sina.com.cn/s/blog_701dfa430101hsyt.html[/url][color=red][b]Knowledgeroot[/b][/color]开源知识管理系统(KMS)官方网站:Knowledgeroot.org-当前版本:version:1.0.3Knowledgeroot可用于文档管理,知识库管理。1.基于php开发,支持lin......
  • PACS在工作中需要认识的知识点有哪些?
    PACS系统特点:•覆盖院内大多数影像科室。可连接医院的多种影像设备:包括CT、MRI、CR/DR、DSA、ECT、PET、PET/CT、PET/MR、US、内窥镜、病理显微镜、ECG等;•高效的检查信息查询:可通过影像号、患者姓名、年龄、性别、检查时间、检查设备等多种查询条件迅速的获取查询患者;•具有......
  • 张宇1000题知识点整理
    张宇1000题知识点函数极限与联系当\(x\rightarrow0\)时,若\(\alpha(x)x\rightarrow0\),则有\(e^{\alpha(x)(1+x)}-1\sim\alpha(x)\ln(1+x)\sim\alpha(x)x\),这可以视作\((1+x)^\alpha-1\sim\alphax\)的推广。当\(x\to0\)时,\(1-\cos^\alpha(x)\sim\frac{\alpha}{2......
  • 数据治理专业认证CDMP学习笔记(思维导图与知识点)- 第10章参考数据和主数据篇
    大家好,我是独孤风,一位曾经的港口煤炭工人,目前在某国企任大数据负责人,公众号大数据流动主理人。在最近的两年的时间里,因为公司的需求,还有大数据的发展趋势所在,我开始学习数据治理的相关知识。数据治理需要进行系统的学习才能真正掌握,也需要进行专业的考试认证才能证明自己在数据治理......
  • 总结vue3 的一些知识点:Vue.js 安装
    Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。StaticfileCDN(国内) : https://cdn.staticfile.org/v......