【vue相关知识】

一、vue

1、 Vue 的优势：

​ 1、Vue.js 可以进行组件化开发，代码量减少，易理解。

​ 2、Vue.js可以对数据进行双向绑定。

​ 3、使用Vue.js编写出来的界面效果是响应式的。

​ 4、vue是单页面应用，页面局部刷新，不用每跳转页面都要请求所有数据和dom，加快访问速度。

​ 5、Vue 使用路由不会刷新页面。传统的页面通过超链接会刷新

​ 6、而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率。

2、 MVVM 和 MVC 区别

​ 1、 MVVM即Model-View-ViewModel 的简写，即【模型-视图-视图模型】，

​ 模型（Model）指的是后端传递的数据，视图(View)指的是所看到的页面，

​ 视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。

​ 2、 MVC是Model-View- Controller的简写。即【模型-视图-控制器】。

​ 大量的DOM操作使页面渲染性能降低

3、Vue 数据双向绑定的原理是什么

​ Vue.js 是采用【数据劫持】结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持 【各个 属性的setter，getter】，在数据变动时发布消息给订阅者，触发相应的监听回调。

4、Vue 生命周期总共分为几个阶段

4大阶段8个方法，初始化、挂载、更新、销毁

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

1、beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

2、【created】：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (dataobserver)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见，不能操作dom。

3、beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用

4、【mounted】：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子，如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。可以操作dom。

5、【beforeUpdate】：数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有DOM，比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6、【updated】：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子

7、【beforeDestroy】：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染不被调用

8、【destroyed】：Vue 实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

9、【activated】：keep-alive组件激活时调用。该钩子在服务器端渲染不被调用，获取缓存数据后的操作。

10、deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

11、errorCaptured（2.5.0+ 新增） 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生 错误的组件实例以及一个包含错误来源信息的字符串此钩子可以返回 false 以阻止该错误继续向上传播

父子组件生命周期顺序：

1、初始、挂载阶段：父组件beforeCreate => 父组件create => 父组件beforeMount =>

子组件beforeCreate => 子组件create => 子组件beforeMount => 子组件mount => 父组件mount

2、更新阶段：父组件beforeUpdate => 子组件beforeUpdate=> 子组件update=> 父组件update

3、销毁阶段：父组件beforeDestroy=> 子组件beforeDestroy=> 子组件destroy=> 父组件destroy

5、Vue 组件如何进行传值的：

1、父组件向子组件传递数据

在父组件中引用子组件标签上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可

2、子组件向父组件传递数据

子组件通过 vue 实例方法**$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法**处理。

3、子组件设ref，父组件可以调用子组件方法

4、 兄弟组件传参：

​ 方法一：

​ 1)：import引入第三方new vue定义好的js文件定义为Bus

​ 2)：传参组件：Bus.$emit(“brother”,this.num++,”传参”)

​ 3)：接收组件：Bus.$on(“brother”,(val,val2)=>{ console.log(val,val2)} )

​ 方法二：利用vuex 定义全局变量，然后改变值，然后接收

​ 方法三：利用浏览器缓存

6、 Vue 常用的修饰符都有哪些

1、事件修饰符、处理 DOM 事件细节

【.stop】阻止单击事件冒泡；（stop和.prevent可以串联在一起使用,都会生效）

【.prevent】提交事件不再重载页面；

【.once】 点击事件将只会触发一次, 不只能对原生DOM时间生效,还可以用在自定义组件上

【.self】 当事件发生在该元素本身而不是子元素的时候会触发；

【.capture】事件侦听，事件发生的时候会调用；

【.passive】立即触发默认行为,能够提升移动端性能,和.prevent一起使用时.prevent会被忽略并警告

2、表单修饰符， v-model增强的修饰符

【.lazy】 - 在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示在页面

【.trim】 - 过滤表单输入时前后的空格

【.number】 - 限制输入数字或将输入的数据转为数字

7、 Vue 常用的指令都有哪些

1、v-model：多用于表单元素实现双向数据绑定

2、v-for：格式：v-for="字段名in(of)数组 json"循环数组或json

3、v-hide：隐藏内容

4、v-show：显示内容，本质就是通过设置 css 中的 display 设置为 none，控制隐藏

5、v-if：显示与隐藏【v-else和v-else-if必须和v-if连用】不能单独使用，否则报错：模板编译错误。【v-show只编译一次后控制 css】【而 v-if 不停的销毁和创建，动态的向DOM树内添加或删除DOM元素】

6、v-bind：动态绑定作用，及时对页面的数据进行更改【可以省略写：就行】

7、v-on:click：给标签绑定函数，可以缩写为@click，绑定一个点击函数，函数写在methods里面。

8、v-text：解析纯文本，单项绑定，数据(data)改变跟着改，但插值发生变化数据对象不变。 {{}}是v-text的简写

9、v-html：解析html标签

10、v-bind:class三种绑定方法

​ 1)、对象型 ‘{red:isred}’； 2)、三元型 ‘isred?“red”:“blue”’；

​ 3)、 数组型 ‘[{red:“isred”},{blue:“isblue”}]’

11、v-once：进入页面时 只渲染一次 不在进行渲染

12、v-cloak：防止闪烁

13、v-pre：把标签内部的元素原位输出

8、 为什么避免 v-if 和 v-for 用在一起

v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for

9、组件中写name选项有什么作用：

1、项目使用 keep-alive 时，可搭配组件name进行缓存过滤

2、DOM 做递归组件时需要调用自身 name

3、vue-devtools调试工具里显示的组见名称是由vue中组件name决定

10、Vue 组件data为什么必须是函数：

1、data组件都是Vue的实例，如果组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他的。【组件中的data写成一个函数】，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，创建一个私有的数据空间，让各个组件实例维护各自的数据。

2、vue是组件化开发，每一个都是一个vue实例，可以在很多地方引用，为了组件复用之后都会产生一个全新的data. 组件与组件之间各自维护自己的数据, 互不干扰。

11、【watch、methods和computed】的区别

1)computed：计算属性将被混入到Vue 实例中,所有getter和setter的this上下文自动地绑定为Vue 实例,【一个数据受多个数据影响】

2)watch：观察和响应Vue实例上的data数据变动【deep: true是深度监听】，一个对象，键是需要观察的表达式，值是对应 回调函数,值也可以是方法名，或者包含选项的对象，Vue 实例将会在实例化时调,$watch()，遍历 watch 对象的每一个属性

3)methods： methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

【默认加载的时候先computed再watch，不执行methods。】

【触发某一事件后先computed再methods再到watch】

12、Vue-给对象新增属性，使用this.$set()

【this.$set(object, key, value)】方法将响应属性添加到嵌套的对象上，可以实现双向绑定，而普通添加不能。

13、在 Vue 中使用插件的步骤

采用ES6的【import … from …】语法或CommonJS的require()方法引入插件，使用全局方法【Vue.use( plugin )】使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

14、Vue 项目优化的解决方案都有哪些

1、使用mini-css-extract-plugin 插件抽离css

2、配置optimization把公共的js代码抽离出来

3、【通过 webpack 处理文件压缩】

4、不打包框架、库文件，通过cdn的方式引入

5、【小图片使用base64】

6、配置项目【文件懒加载】

7、UI库配置按需加载\引入

8、防抖节流

9、少使用循环

15、vue路由

1、路由文件配置

import Vue from ‘vue’

import Router from ‘vue-router’

Vue.use(Router)

2、 路由配置项

【hidden: true】当设置true的时候该路由不会再侧边栏出现，如401，login等页面，或编辑页面/edit/1

【alwaysShow: true】

​ 1、当一个路由的children声明的路由大于1时，自动会变成嵌套的模式–如组件页面

​ 2、只有一个时，会将那个子路由当做根路由显示在侧边栏–如引导页面

​ 3、若你想不管路由下面的children声明的个数都显示你的根路由

​ 4、你可以设置alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由

【edirect: noRedirect】当设置 noRedirect的时候该路由在面包屑导航中不可被点击

【name:‘router-name’】设定路由的名字，一定要填写不然使用时会出现各种问题

【meta : {

【noCache: true】如果设置为true，则不会被 缓存(默认 false)

【title: ‘title’】设置该路由在侧边栏和面包屑中展示的名字

【icon: ‘svg-name’】设置该路由的图标，对应路径src/assets/icons/svg

【breadcrumb: false】如果设置为false，则不会在breadcrumb面包屑中显示

}】

// 公共路由

export const constantRoutes = [

{

path: ‘/admin/:id?’, //路由名称 ，?代表参数值可传可不传，不写?一定要传

component: (resolve) => require([‘@/views/admin/Index’], resolve),//导入页面

hidden: true；//不出现在侧边栏中

},

]

//一些配置

export default new Router({

mode: ‘history’, //两种模式：（history去掉url中的 # 号）（hash的话url带#号）

scrollBehavior: () => ({ y: 0 }),

routes: constantRoutes

})

3、路由跳转：

​ 1、传值方式有：

​ 1.1）字符串：直接传递路由地址，但是不能传递参数

this.$router.push(“home”)

​ 1.2）命名路由 这种方式传递参数，用 name 来引入 ，目标页面刷新会报错

this.$router.push({name:“news”, params:{userId:123})

​ 1.3）查询参数 用path 来引入

this.$router.push({path:"/news’, query:{uersId:123})

4、this.$router.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数

5、query传参和params传参之间的区别是什么？

​ 1、query要用path来引入，params要用name来引入

​ 2、接收参数时，分别是this.$route.\ast \ast query\ast \ast .name和this.$route.params.name

​ 3、query更加类似ajax中get传参，params则类似于post，

​ 4、query在浏览器的地址栏中显示，params地址栏不显示

​ 5、params传值一刷新就没了，报错，query传值刷新还存在

6、声明式导航router-link

<router-link to:"news"></router-link> <!--字符串-->
<router-link :to:"{name:'news',params:{userid:1111}}"></route-link> <!--命名路由-->
<router-link :to="{path:'/news',query:{userId:1111}}"></router-link> <!--查询参数-->

7、vue路由守卫vue-router有几种钩子函数？

1 、什么是路由守卫
路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

2、 分类

1.全局路由守卫
beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
afterEach(to, from) 全局后置守卫，路由跳转完成后触发

2.路由独享守卫
beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

3.组件路由守卫
beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
beforeRouteUpdadte(to,from,next) 当前路由改变时触发
beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发

4.参数
to： 即将要进入的目标路由对象
from： 即将要离开的路由对象
next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

17、vue钩子函数包括：

​ 生命周期、自定义指令、路由守卫、computed、watch

17、$nextTick的作用是：

在下次DOM更新循环结束之后执行延迟回调，获取更新后的DOM；就解决了异步渲染获取不到更新后DOM的问题了。nextTick的原：nextTick本质是返回一个Promise 。

应用场景：在created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中

18、Vue 中 for循环为什么加 key

​ 性能优化，因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，

比如：有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。

19、Vue 跨域

跨域指浏览器不允许当前页面的所在的源去【请求另一个源的数据】。源指：协议，端口，域名。只要这个3个中有一个不同就是跨域

20、请说出 Vue.cli 项目中 src 目录每个文件夹和文件的用法？

//1、assets 文件夹是放静态资源 
//2、components 是放组件 
//3、router 是定义路由相关的配置 
//4、view 视图 
//5、app.vue 是一个应用主组件 
//6、main.js 是入口文件

21、请详细介绍一些 package.json 中的配置的作用

//1、 Name:项目名称 
//3、 Version: 项目版本 
//3、 Description: 项目描述 
//4、 Author：作者 
//5、 Prinate：项目是否私有 
//6、 Scripts:npm run *** 命令用于调用 node 执行的.js 文件
//7、 scripts指定了运行脚本命令的npm命令行缩写
/*8、dependencies和devDependencies两项，分别指定了项目运行所依赖的模块、项目开发所需要的模块。它们都指向一个对象，该对象的各个成员，分别由模块名和对应的版本要去组成，表示依赖的模块及其版本范围*/