vue知识点合集

同大大
458 阅读2分钟

目录

  1. vue的理解
  2. vue生命周期
  3. vue父组件和子组件生命周期钩子的执行顺序
  4. virtual DOM
  5. DIFF算法
  6. vue双向绑定原理
  7. vue2和vue3
  8. vue基础：事件绑定，数据绑定，组件化，指令，模板，修饰符
  9. v-model/自己实现v-model
  10. vue高级用法：vue2的mixin复用、动画特效、插槽、过滤器、实现可换行的vue的input组件 vue指令
  11. 组件传值
  12. $nextTick的运行原理 *
  13. vue的computed和watch的运行原理
  14. systemJS 模块、Babel原理、babel编译工具链的使用
  15. vue-router
  16. vuex

1、vue的理解

   (1)vue是一个构建数据驱动的渐进式框架，通过API实现响应数据绑定和视图更新。可根据需求选择不同的功能实现，比如表单->组件->路由->状态->工程化
   (2)vue的特点：
       1.解耦视图和数据，即MVVM模式：
       2.组件复用:每个.vue文件都可以视为一个组件，降低组件耦合度，调试方便，可维护性高
       3.路由管理
       4.状态管理
       5.虚拟DOM
       6.指令系统：条件渲染指令v-if、列表渲染指令v-for、属性绑定指令v-bind、事件绑定指令v-on、双向数据绑定指令v-model
   (3)vue优点
   (4)vue缺点
   (5)MVVM模式：
       Model:模型层，处理业务逻辑和服务端数据交互，即js代码块
       View：视图层，将数据模型转化为UI展示，形成DOM页面
       ViewModel：视图模型层，连接Model和view

2、vue生命周期

   vue实例的生命周期包括：开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、销毁。即从创建到销毁的过程。四大步，创建、挂载、更新、销毁。
   1.beforeCreate：根DOM元素$el和data均为未初始化，
   值为undefined， 数据还未挂载，data observer(数据观测)和event/watcher事件配置之前被调用。
   
   2.created：完成data的初始化；完成以下配置：data observer数据观测、属性和方法的运算、event/watcher事件回调。根DOM元素的$el未初始化，但实例观察的数据对象data已配置好，message已得到
   
   3.beforeMount：完成$el和data的初始化；
               $el和data均已初始化，message并未渲染，$el的值为“虚拟”的DOM节点(Virtual DOM)
               
   4.mounted：完成挂载； $el被创建的vm.$el替换
            $el也渲染完成并挂载到实例上了
            
   5.beforeUpdate：监听到data的变化，并更新data，此时vue的虚拟DOM机制会重新构建虚拟DOM，与上一次的虚拟DOM树利用DIFF算法进行对比。
   
   6.updated：渲染完成，data数据更改完成，DOM也重新Render完成
   (keep-alive：activated:keep-alive激活时调用。deactivated：keep-alive组件停用时调用。)
   7.beforeDestroy：进入销毁阶段，指令，过滤器，定时器，监听事件，绑定事件仍可用
   
   8.destroyed：事件绑定被解绑，监听器被移除，实例被销毁
   
   运用：
    (1)created钩子可以对data数据进行操作，可将ajax的数据赋给data
    (2)updated钩子会在数据变化时触发，但不能判断哪个属性值变化，用computed和watch来监听属性的变化
    (3)mounted钩子，DOM已被渲染到页面上了
    (4)生命周期钩子不能用箭头函数定义，因为箭头函数没有this，this会作为变量向上级词法作用域上查找，知道找到为止。导致报错。

3、vue父组件和子组件生命周期钩子的执行顺序

   1.加载渲染过程
       1、父组件：brforeCreate -> created -> beforeMount -> 
       2、子组件：beforeCreate -> created -> beforeMount -> mounted ->
       3、父组件：mounted
       总结：先父组件执行到beforeMount，然后子组件挂载完成后，返回父组件再挂载。即从外到内，再从内到外。
   2.子组件更新过程
       父组件brforeUpdate -> 子组件brforeUpdate -> 子组件updated -> 父组件updated
   3.父组件更新过程
       父组件brforeUpdate -> 父组件updated
   4.销毁过程
       父组件brforeDestroy -> 子组件brforeDestroy -> 子组件destroyed -> 父组件destroyed

4、virtual DOM

   1.定义：由JS对象嵌套的方式来描述DOM对象
   2.virtual DOM的优点：对DOM节点的操作需要遍历整颗DOM树，消耗计算资源，虚拟DOM通过监听属性的状态差异，通过diff算法更新虚拟DOM，提升渲染性能

5、DIFF算法

   diff的整体策略是：深度优先，同层比较
   运行规则：
   1.把树形结构按照层级分解，只比较同级元素，不会垮层级比较
   2.diff比较过程中，循环从两边向中间比较
   3.给列表的每一个单元添加唯一key树形，方便比较

6、vue双向数据绑定原理

   通过数据劫持结合发布者-订阅者模式的方式来实现的，底层是利用了Object.defineProperty(obj,prop,descripter)这个方法，重新定义了对象的获取属性get和设置属性set，来劫持各个属性的setter和getter，数据变动时发布消息给订阅者，触发相应的监听回调。
   数据变动,set方法会调用Dep.nofify通知所有订阅者Watcher，订阅者就会调用patch方法给真实DOM打补丁，更新相应的视图。patch函数有两个参数oldVnode和Vnode，代表新旧节点，然后进行diff算法，Dep收集依赖，发送通知。
   
   监听器(Observer)：对所有数据进行监听，数据变动获取到最新值通知订阅者
   解析器(Compiler)：对元素节点的指令进行扫描解析，根据指令模板替换数据，以及绑定相应的更新函数
   watcher：Observer和Compiler之间的桥梁，能够订阅收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

3.png

7、vue2和vue3

   实质是Object.defineProperty和Proxy(ES6)的区别：
   1.defineProperty监听的是对象的属性，Proxy监听的是对象，可以代理所有属性，所以defineProperty必须遍历对象的每个属性如果是嵌套对象的话，需要深层遍历，以劫持其属性，性能消耗大
   2.defineProperty不能监听数组的变化，Proxy则直接监听，不需要对数组进行重载。原因是由于性能问题问题，源码的实现是obsever的构造函数constructor里对当前对象进行了判断，Array.isArray(value)是数组的话，就不进行walk深度遍历了，所以，利用索引直接设置数组项时arr[index] = newValue 和修改数组长度时 arr.length = newlength

8、vue修饰符

   表单修饰符：
   lazy: inpput的change事件
   trim：input过滤首空格字符
   number：input输入数值类型
   
   事件修饰符：
   stop：阻止事件冒泡
   prevent：form表单的阻止事件默认行为
   natvie：
      
   鼠标按键修饰符：
   left
   right
   middle
   
   键值修饰符
   enter
   onkeyup
   onkeydown
   
   v-bind修饰符
   async
   prop

9、v-model

   语法糖：
   1.v-bind绑定一个value属性
   2.v-on指令给当前元素绑定input事件，通过$emit()去触发input事件，给父组件通讯

10、vue指令

   v-if
   v-for
   v-show
   v-once
   v-html
   v-model
   v-bind
   v-on
   v-text
   v-cloak

11. 组件传值

1.父子组件 props/$emit 
2.兄弟组件 EventBus EventBus.$emit(methods,data)传输   EventBus.on(methods,data) 接收事件
EventBus.$off(methods,{}) 移除事件
3.祖孙组件provide/inject

    祖组件
         export default {
            data () {
                return {}
            },
            provide:{
                index:'祖组件要传给子子组件的数据'
            }
         }

   子组件
    export default {
        data () {
            return {}
        },
        inject: ['index']   //可直接在页面使用index或在js中进行赋值
    }


4.隔代传值 $attrs/$listeners   新增了inheriAttrs属性 true继承除props之外的属性，false只继承class属性。 $attrs继承父组件data，$listeners继承父组件事件
5.vuex
6.storage
7.ref

12. $nextTick的运行原理

13. vue的computed和watch的运行原理

14. systemJS 模块、Babel原理、babel编译工具链的使用

15. vue-router

hash和history模式
hash用来做页面定位的，hash改变会触发hashchange事件，#也被称作锚点，使对应的id元素显示在可视区域内
history模式是H5新增的，有popstate事件，监听浏览器的前进后退的事件。pushstate创建新的历史记录，replacestate修改当前历史记录。

16. vuex

 state、getter、mutation、action、models
 getter:this.$store.getters.info
 mutation:传值通过this.$store.commite('edit',obj)
 actions：由于mutation进行异步操作，会引起数据失效。this.$store.diapatch('eidt',obj)
 
 解决vuex刷新丢失方案：
 页面刷新的时候异步请求后台数据，由于数据量大或网络延迟，页面加载完vuex还未获取到数据，这样就造成了数据丢失，解决方案：监听浏览器刷新前事件，刷新前把数据暂存在sessionStorage里，刷新后数据未返回就用sessionStorage里的数据，否则获取vuex里的数据。
 window.addEventListener('beforeunload',()=>{
     sessionStorage.setItem('data',data)
 })

17. vuex和vue组件的映射关系

mapState、mapGetters ===> computed
mapMutations、mapActions ===> methods
avatar
文章
阅读
粉丝