vue小总结

vue常用指令

v-bind：动态绑定属性 动态更新HTML元素上的属性更新元素

 v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’'

v-if：条件渲染指令 通过条件判断条件是否成立 决定dom节点是否渲染

v-else-if 必须和v-if连用

 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误

v-show：条件显示  通过条件判断条件是否成立 决定dom节点是否显式 通过display=block/none控制 

v-hide 隐藏内容 同上

v-for：列表渲染

v-text：的textContent

v-html：通过指令的方式向dom节点赋值 innerHTML

v-on：监听dom事件 绑定事件

v-model：双向绑定数据 代表value和input的语法糖 并且会处理拼音输入法的问题

v-once：定义元素或组件只渲染一次 之后不再随数据的变化重新渲染 将被视为静态内容

v-cloak 防止闪烁 该属性需配合 样式使用,例如： [v-cloak]{display:none}

1. 什么是MVVM（前后端分离）

        M：model 模式存储数据

        V：view 显示内容（html）

        VM viewModel视图模块 连接视图与modelcompon模型

        当model数据发生变化.时候通过VM可以监听变化更新视图

        当view视图发变化时候通过VM可以监听变化自动更新model数据

2.什么是MVC（前后不分离代码）

        M：模型

        v： 视图

        c： 控制器2

        后端软件的设计思维：把视图V和模型M通过C控制实现分类

        前端写好视图 交给后端 后端经过编译 生成 html 发送给浏览器（客户端）

        mvvm（有利于开发）前后端分类

3. 为什么data必须是一个函数

        一、实例和组件定义data的区别

                vue实例中的data属性既可以是一个对象，也可以是一个函数

                组件中定义data属性，只能是一个函数

                如果为组件data直接定义为一个对象

                则会得到警告信息：返回的data应该是一个函数在每一个组件实中

4.v-if与v-show的区别

        相同点：都可以动态控制着dom元素的显示与隐藏

        区别：v-if 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

                show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，

                设置none或者是block，DOM元素是还存在的,相比于v-if更适合用于频繁切换显示

                与隐藏的情况

5.Vue生命周期的执行过程

        总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。

        创建前：没有props data还没有好

        创建完成：有data和methods $el还没有

        挂载前：有$el 但是dom节点没有渲染

        挂载后：dom节点已经渲染好

        更新前：数据更新，dom没有更新

        更新后：dom已经重新渲染好

        销毁前：有data和methods没有真正销毁

        销毁后：data和methods不可以用

6.Vue的双向数据绑定原理

        通过Object.defineproperty 劫持数据的getter与setter

        订阅观察者模式通知更新

        watcher 连接

7.浏览器的回流与重绘

        回流：当页面元素的尺寸，样式，布局，dom增删发生改变时，浏览器会重新构造页面，这一过程就是回流

        重绘：当页面中的元素属性发生改变，例如颜色，背景色，而这些属性只影响元素的外观风格，不影响布局时，浏览器就会进行更新，这就是重绘

回流与重绘的区别：

        回流一定会引起重绘，但是重绘不一定要回流，只有在页面的布局和几何属性发生改变时，才会进行回流，例如：删除元素后引发元素位置的改变，属性导致大小，边框，内外边距改变等

如何避免重绘：

1 、集中改变样式，通过同样的类名进行改变

2 、将频繁操作变为一次性操作，例如进行for循环添加dom结构或者修改数据

Vue中的虚拟dom

一、什么是虚拟DOM

        虚拟dom就是用js对象的形式去模拟dom节点

        操作dom 重绘，回流，消耗页面性能

        虚拟dom，操作js比操作dom要快，通过diff算法查找之前的vdom与现状vdom最小区别，通过patch更新到dom视图中

        虚拟dom可以映射html，虚拟dom可以转换为ios的组件，转换为android组件（react-native）

        前端通过编写js实现原生ios/Android 的效果（实现跨平台开发）

vue中的diff算法

        diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

Vue组件通信(父传子、子传父、兄弟通信)

一.父组件传到子组件

        父组件是通过props属性给子组件通信的
        数据是单向流动 父—>子    

        子组件通过props来接受数据

二.子组件向父组件传值

        通过绑定事件然后及$emit传值

        子组件通过$emit触发父组件上的自定义事件，发送参数

        父组件通过绑定自定义事件，接受子组件传递过来的参数

        vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据

非父子关系

        ref获取引用

        依赖注入：provide inject

        vuex

        vue2（选项options）：event Bus传参；$parent父对象，$children子对象 $root根节点

vue监听和深度监听watch

        通过watch属性可以监控data属性中name值的变化，定义监控时，name这个值对应的是一个监控处理函数name()。

        将name属性和对话框绑定，并在对应页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框中输入值的变化而变化。

其中监控处的理函数有两个参数：

1.表示当前监控的值(新值).
2.表示上一次监控的值(旧值).

 vue中的修饰符

        一、事件修饰符

        .stop 阻止事件继续传播

        .prevent 阻止标签默认行为

        .capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

        .self 只当在 event.target 是当前元素自身时触发处理函数

        .once 事件只会触发一次

        .passive 告诉浏览器你不想阻止事件的默认‘行为

二、 v-model的修饰符

        .lazy 通过这个修饰符，转变为在 change 事件再同步

        .number 自动将用户输入值转化为数值类型

        .trim 自动过滤用户输入的收尾空格

三、键盘事件的修饰符

         .enter

        .tab

        .delete (捕获“删除”和“退格”键)

        .esc

        .space

        .up

        .down

        .left

        .right

四、系统修饰符

        .ctrl

        .alt

        .shift

        .meta

五、鼠标按钮修饰符

         .left

        .right

        .middle

keep-alive

        keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

        max 最多缓存，include包含，exclude排除

v-for为什么要使用key

        key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

        key提升虚拟dom 的diff算法，提高列表在排序，过滤的渲染速度

要求兄弟节点间key保持唯一性

$nextTick()的作用

        数据更新，等待视图更新执行的回调函数（dom操作常用）

vue-router

前端路由原理
路由就是用来解析URL以及调用对应的控制器，在不重新请求页面的情况下，更新页面的视图

路由模式
路由分为hash模式与history模式

hash与history的切换

在router的index.js文件中，有一个new Router(),里面的mode默认为hash模式，可以在这里更改为history模式

hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash

1 hash不会被包含在http请求中，因此，改变hash不会重新加载页面

2 hashchange 用来监听hash改变的事件

3 每一次改变，都会在浏览器中添加一个历史记录

方法

HashHistory.push     跳转路由，添加历史记录栈

HashHistory.replace()  跳转路由，直接替换当前页面，不会添加历

history模式

特点

1 history模式的URL要与后端的URL一样，后端如果没有对应路由，则会返回404错误

2 popState（window.onpopstate）用来监听history改变的事件

方法

history.pushState()   跳转路由，添加历史记录栈

history.replaceState()   跳转路由，直接替换当前页面，不会添加历史

路由传参
query，params，动态路由传参

1、  params只能使用name  query可以使用name和path  

2、  使用params传参刷新后丢失，而query传参刷新后不会丢失

3、  Params在地址栏中不会显示，query会显示

4、  Params可以和动态路由一起使用，query不可以

vue的路由守卫

路由守卫分为全局守卫，路由独享守卫，组件内守卫

实现权限管理：

在路由配置定义meta权限

通过全局beforeEach实现路由守卫

beforeEach3个参数 to要去的页面，from从哪个页面来，next下一操作

$router,和$route区别

$route是当前页面路由信息，params，query，path,fullpath 

$router是整个路由实例  通常带方法push，replace back forward go

vue2和vue3的区别

双向数据绑定原理发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：

        响应式原理不同：Object.defineProperty和Proxy

            可直接监听数组类型的数据变化

             启动方式不同

              全局挂载方法不同

             监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升

        Vue3 增加了setup 组合式api   可直接实现对象属性的新增/删除

生命周期有了一定的区别

Vue2--------------vue3

beforeCreate  ---->   setup() 开始创建组件之前，创建的是data和method

created     ---->    setup()

beforeMount   ---->   onBeforeMount 组件挂载到节点上之前执行的函数。

mounted       ---->     onMounted 组件挂载完成后执行的函数

beforeUpdate   ---->   onBeforeUpdate 组件更新之前执行的函数。

updated       ---->        onUpdated 组件更新完成之后执行的函数。

beforeDestroy         ---->        onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed   ---->   onUnmounted 组件卸载之前执行的函数。

activated   ---->     onActivated 组件卸载完成后执行的函数

deactivated   ---->    onDeactivated

option选项api ：创建前后，挂载前后，更新前后，销毁前后

Vue3：setup中：没有创建前后

created 有this，发起ajax请求，监听事件，定时器

Vue3：setup 没有this ，发起ajax请求，监听事件，定时器

mounted 可以操做dom

beforeDestroyed | Vue3：onUnmount  移除定时器，移除事件监听

 computed与watch区别

        computed有缓存，watch没有

        conputed从现有数据计算出新的数据，watch是监听数据变化执行handler回调函数

        computed 多对 一，watch一对多

什么是vuex

vuex是vue的全局状态管理器，当state更新，引用state组件的视图会响应式更新。

本质上就是一个没有template的vue文件

通过vuex可以更好集中管理数据，多个组件共享数据

vuex 哪些组件

存储数据的state

修改数据唯一方式 mutations

异步操作的Actions

模块：module

映射方法：getters

vuex和全局变量区别

都可以实现多个组件全局共享数据

vuex的数据是响应式，会自动更新视图

vuex的修改必须是mutations，更加利于调试

vuex还支持异步操作，方便vuex插件便于调试

vuex mutations和action区别

mutations用来改变数据（唯一方式）

actions执行异步操作

计算属性getters

模块 modules

数据 state

哪些数据你都存储在vuex

当多个组件都需要使用的数据通常都存储在vuex里面

app信息： ，菜单栏信息，设备，运行模式

用户相关：token ，用户信息，权限信息，第三方登录信息

                 用户访问历史，操作日志

设置信息：主题，自定义菜单，标签

权限相关：路由，固定路由，菜单路由，

同时通过actions执行请求，mutations更新

axios封装哪些常用功能

基础配置：baseURL，timeout，headers

拦截响应与请求：加载提示，token和其他请求头，错误响应操作，添加或移除权限