Vue.js 核心解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44882018/article/details/126584951
                    
                    Vue系列 
  说说对Vue的理解 
    发展史：最早的静态页面—>jsp前后端不分离—>vue前后端分离
是什么：开源的单页面的框架
核心：MVVM模型；组件化（优点）；指令（优点）；不操控Dom，只操作数据
 
双向绑定 
    原理：运用了MVVM思想，数据变化更新视图，视图变化更新数据
实现：初始化时，对data中的数据进行响应式处理，对里面的每个值都绑定一个watcher，当数据变化的时候watcher就去执行更新函数；对模板进行编译，找到动态绑定的数据，从data中获取并渲染到视图；
 
SPA（单页面应用） 
    是什么：用户交互的时候，不是页面之间的切换，而是重写页面里面的内容，不重新加载页面
MPA：多页面应用，每个页面都是主页面，每次切换页面的时候需要重新加载html css js
优点：（1） 具有桌面应用的及时性、网站的可移植性、可访问性 （2） 用户体验好、内容改变之后不想要重新加载页面 （3） 前后端分离
缺点：（1） 首次渲染速度较慢 （2） 不利于搜索引擎的抓取
 
v-if和v-show
Vue实例（new vue()）在挂载的时候经历了什么 
    调用_init方法 
      定义 
            
                s 
               
                e 
               
                t 
               
                、 
               
               set、 
              
           set、get、 
            
                d 
               
                e 
               
                l 
               
                e 
               
                t 
               
                e 
               
                、 
               
               delete、 
              
           delete、watch等方法
定义 
            
                o 
               
                n 
               
                、 
               
               on、 
              
           on、off、 
            
                e 
               
                m 
               
                i 
               
                t 
               
                、 
               
               emit、 
              
           emit、once等事件
定义_update、 
            
                f 
               
                o 
               
                r 
               
                c 
               
                e 
               
                U 
               
                p 
               
                d 
               
                a 
               
                t 
               
                e 
               
                、 
               
               forceUpdate、 
              
           forceUpdate、destroy等生命周期
 
调用$mount进行页面挂载（挂载的时候主要通过mountComponent）
定义updateComponent更新函数
执行render生成DOM
_update将虚拟dom生成真实DOM，并渲染到页面中
 
生命周期的理解和流程
v-if和v-for不建议一起用 
    vue2：优先级v-for高于v-if
vue3：优先级v-if高于v-for
性能损耗，每次都得判断一次
 
SPA性能优化 
    代码优化：css外部链接放在顶部，js外部链接放底部，减少DOM数量
减少资源的大小：图片大小
减少Http的请求次数：缓存
按需加载或者懒加载
 
data属性为什么是函数而不是对象 
    vue实例的data既可以是对象又可以是函数
组件的data只能是函数，若定义为对象，实例对象的内存地址可能是一样的，可能会造成数据污染，而函数返回的内存地址是不一样（initData时会将其作为工厂函数都会返回全新data对象）
 
给对象添加属性不更新 
    obj.a不是响应式的，应该响应式的添加
 
组件之间通信
nexttick作用原理
mixin的理解 
    提取公共的ts代码
 
slot 
    便于组件的拓展，复用
有哪些
 
Vue.observable 
    把一个对象变成响应式的，用来处理data函数返回的对象，返回的对象可直接用于计算属性或者渲染函数
用来进行数据共享的，比vuex体积小，维护成本低
 
vue中key的原理 
    给节点设置唯一的id，通过这个id可以很快地找到这个节点
如果不设置key采用的是 就地复用 策略，一旦数据改变，最小元素移动原则，对数据进行patch，浪费性能，设置之后，会比对key，相同的就不更新，不同的才更新
 
怎么缓存当前组件，缓存之后怎么更新，keep-alive得理解（这问的都是keep-alive，动态组件） 
    keep-alive能在组件切换过程中将状态保存在内存中，防止页面的重复渲染
被keep-alive包裹的组件必须要有name
第一次进入：beforeRouteEnter→beforeCreate→created→beforeMount→mounted→activated→…→beforeRouteLeave→deactivated
再次进入：beforeRouteEnter→activated→…→beforeRouteLeave→deactivated
缓存之后更新数据参考再次进入经历的生命周期
 
常用的修饰符以及应用场景
 后续还有补充
vue系列面试题
