vue总结（更新中）

奥奥奥奥奥奥利奥 2022-07-25 18:08:54

VUE

vue双向绑定原理

vue双向绑定原理：其实就是采用数据劫持结合发布者-订阅者模式的方式。

具体实现方法是：new Vue()先将data中的变量引入对象内部，然后为其添加访问器属性。并且在set()函数中添加通知函数。接着会扫描dom树，将扫描到的可能发生变化的元素，保存到额外创建的一棵虚拟DOM树中。每次只要我们试图修改变量值时，都会自动调用通知函数，向虚拟DOM树发出通知，虚拟DOM树就会立刻扫描自己。查找所有引用这个变量的元素，然后进行页面的更新。

虚拟dom树，好处

虚拟dom树：保存可能发生变化的元素。

(1). 小: 只保存受影响的元素，其余元素都不保存

(2). 遍历快: 因为元素个数少，所以遍历快:

(3). 修改效率高: 只更新受影响的元素，不受影响的元素不更新

(4). 避免重复操作: 虚拟DOM树天生封装了原生DOM的增删改查方法.

数据驱动（MVVM)

MVVM表示的是 Model-View-ViewModel

Model：模型层，专门替界面保存所有所需的变量和事件处理函数的对象
View：视图层，负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，专门负责将模型对象中的变量值始终与界面同步的特殊对象

v-show与v-if

v-show通过display:none隐藏元素。v-if是通过删除元素隐藏元素
v-show 由false变为true的时候不会触发组件的生命周期；v-if由false变为true的时候，触发组件的beforeCreate、created、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法
性能消耗：频繁切换用v-show

Vue生命周期

beforeCreate -> created ->beforeMount -> mounted ->beforeUpdate -> updated -> beforeDestroy ->destroyed

数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的，两者的相同点：都能拿到实例对象的属性和方法。讨论这个问题本质就是触发的时机，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。

v-if和v-for的优先级

v-for优先级比v-if高,同时用在同一个元素上，会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

SPA首屏加载速度慢的怎么解决

减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR(服务端渲染)

为什么data属性是一个函数而不是一个对象

目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

Vue传参

路由传参：在router里需要传参的组件的路径上，配置上斜杠冒号（/:）想要传递的变量名，并且设置Props属性值为true,然后在组件中用props接传递过来的变量即可

组件之间的通信方式都有哪些

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
兄弟关系的组件数据传递可选择$eventBus，其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量

vue中key的原理

key的作用主要是为了高效的更新虚拟dom

key是给每一个对象的唯一id，可以根据key，更准确，更快的找到对应的节点

NextTick是什么

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

把回调函数放入callbacks等待执行
将执行函数放到微任务或者宏任务中
事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调

keep-alive

生命周期函数：activated与deactivated

当我们从首页–>列表页–>详情页–>再返回，这时候列表页应该是需要keep-alive

缓存后如何获取数据

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

Vue常用的修饰符

表单修饰符事件修饰符
- lazy填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步
- trim 自动过滤用户输入的首空格字符，而中间的空格不会过滤
- number自动将用户的输入值转为数值类型
- .stop：阻止事件冒泡
- .native：绑定原生事件
- .self ：将事件绑定在自身身上，相当于阻止事件冒泡
- .prevent：阻止默认事件
- .caption：用于事件捕获
- .once：只触发一次
- .keyCode：监听特定键盘按下
- .right：右键
鼠标按键修饰符
- left 左键点击
- right 右键点击
- middle 中键点击
键值修饰符
v-bind修饰符
- async
- prop
- camel

Vuex

使用场景：比如组件间的状态共享：登录状态；组件间的数据共享：购物车数据，登录的token

state	数据存放
getters	相当于计算属性，可以返回一个值
mutation	同步操作，修改数据
action	异步操作
modules	模块化

原理：vuex实现了一个单项数据流，在全局又有一个state存放数据，当组件要更改state中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。而当所有异步操作（常见于调用后台接口异步获取更新数据）或批量的同步操作需要走Action,但Action也是无法直接修改state的，还是需要通过Mutation来修改state的数据。最后根据state的变化，渲染到视图上。

Vue项目中你是如何解决跨域的呢

JSONP
CORS
Proxy

而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开

proxy 在vue.config.js文件，新增以下代码

amodule.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

通过axios发送请求中，配置请求的根路径