[JavaScript知识库]Vue期末简答题复习

1.请简述什么是Vue。

Vue（读音/Vju?/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。
其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。
Vue；两大特点：响应式编程，组件化

2.请简述Vue优势有哪些？

1.轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。
2.数据绑定: Vue是一个MVVM框架，即数据双向绑定。
3.指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。
4.插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。

3.请简单介绍Vue、React 之间的区别。

1、写法上面的不同。
vue使用的扩展的html写法，就是一个文件里有html、js、css，分开写，react使用的是jsx语法，提倡all in js，也就是样式、js、html混合。
2、渲染方式的不同。
vue中对于循环和判断使用的是v-if，v-for等vue指令进行vue组件的渲染，react使用的是js中if判断，for、map循环等进行dom的渲染。
3、redux和vuex的区别。
vuex中可以使用dispatch和commit，并且在页面中使用可以通过this.$store和辅助函数，redux只能使用dispatch，并且在页面中使用需要使用connect，使用。
4、diff优化不同。
vue中组件渲染采用的是默认优化，react中的优化，可以使用shouldcomponetupdate、purecomponent以及hooks中的memo进行组件的渲染优化。

4.请列出Vue指令常用内部指令，至少6个。

v-model：双向数据绑定
v-on：监听事件
v-bind：单向数据绑定
v-text：插入文本内容
v-html：插入包含HTML的内容
v-for：列表渲染
v-if：条件渲染
v-show：显示隐藏

5.请简述什么是Vue组件化开发。

1.在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写。
2.提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。
3.组件主要以页面结构形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。

6.请简述什么是Vue实例对象。

在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。
通过new关键字的方式创建vm实例对象。
创建方式：

<script>
var vm = new Vue({
  // 选项
})
<script>

其中，配置选项的主要内容及含义：
1.data：Vue实例数据对象
2.methods：定义Vue实例中方法
3. components：定义子组件
4. computed：计算属性
5. filters: 过滤器
6. el: 唯一根元素
watch: 监听数据变化

7.请简述什么是Vue插件，如何安装。

插件是一个对象或函数，通过插件可以为Vue添加全局功能。（2分）
如果是对象，必须提供install()方法，用来安装插件；（1分）
如果插件是一个函数，则该函数将被当成install()方法。（1分）
Vue.use主要用于在Vue中安装插件，（1分）

8.请列举5个常用Vue全局API接口，并简介其作用。

1.Vue.directive():Vue中有很多内置指令，如v-model、v-for和v-bind等
2.Vue.use():Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能
3.Vue.extend():Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
4.Vue.set():Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新
5.Vue.mixin():Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例

9.请列举5个Vue实例对象的常用属性和方法。

1.vm.$props:使用vm.$props属性可以接收上级组件向下传递的数据
2.vm.$options:Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项3.vm.$el: vm.$el用来访问vm实例使用的根DOM元素4.vm.$children: vm.$children用来获取当前实例的直接子组件5.vm.$root: vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身6.vm.$slots: 插槽就是定义在组件内部的template模板，可以通过$slots动态获取7.vm.$attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性

10.请简单列举并说明路由对象包括哪些属性。

this.$router，全局路由对象this.$route，当前路由对象
$route.path
$route.query：{key : value} URL 查询参数
$route.params：{key : value} 路由转跳携带参数
$route.hash：在 history 模式下获取当前路由的 hash 值（有 # 的那种）
$route.fullPath：完成解析后的URL，包含查询参数和 hash 的完整路径
$route.name
$route.matched：路由记录，当前路由下路由声明的所有信息，从父路由（如果有）到当前路由为止
$route.redirectedFrom：若有重定向，即为重定向来源的路由

11.请简述vue-router 路由的作用。

12.简述Vuex配置对象中的主要配置选项及作用。

1）. actions：用来定义事件处理方法，用于处理 state 数据
2）. mutations：选项中的事件处理方法接收 state 对象作为参数，即初始数据
3）. getters：store 实例允许在 store 中定义 getters 计算属性，类似于 Vue 实例的 computed
4）. modules：modules 用来在 store 实例中定义模块对象
5）. plugins：Vuex 中的插件配置选项为 plugins，插件本身为函数
6）. devtools：store 实例配置中的 devtools 选项用来设置是否在 devtools 调试工具中启用 Vuex，默认值为 true，表启用

13.简述Vuex中的actions的含义。

actions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。
在使用时，需要在 store 仓库中注册 actions 选项，在里面定义事件处理方法。事件处理方法接收 context 作为第1个参数，payload 作为第 2 个参数（根据需要进行选择）。

14.简单描述使用Vue CLI 3创建项目的步骤。

打开命令行工具，切换到项目根目录，执行以下指令来创建项目：
vue create hello-vue（项目名）
在交互界面中，选择手动配置项，进行配置
项目创建完成后，执行以下命令进去项目目录：
cd hello-vue
执行命令，启动项目
npm run server

15.简单描述Vue CLI 3安装的过程

如果之前已经全局安装了旧版的 vue-cli（1.x或2.x），需要先进行卸载，指令如下：
npm uninstall vue-cli -g
如果之前没有全局安装旧版，则直接全局安装@vue/cli脚手架，指令如下：
npm install @vue/cli –g
vue –V 查看版本号
16.简单介绍CLI服务vue-cli-service 中的command命令包括哪些。
serve start development server 启动服务
build build for production 生成用于生产环境的包
inspect inspect internal webpack config 审查 webpack 配置
lint lint and fix source files lint？并修复源文件

17.简述如何在现有项目中安装CLI插件和第三方插件。

CLI 插件安装完成之后，在 package.json 文件中查看，是以 @vue/cli-plugin-开头。
注意：vue add 安装和调用只是 Vue CLI 插件，普通的 npm 包还是用 npm 来进行安装的。
例如 vue add @vue/eslint
第三方插件：
如果不带 @vue/ 前缀，将会安装第三方包
例如 vue add vuetify

18.列举几个钩子函数（生命周期）并说明作用

1.beforeCreate 创建实例对象之前执行
2.created 创建实例对象之后执行
3.beforeMount 页面挂载成功之前执行
4.mounted 页面挂载成功之后执行
5. beforeUpdate 组件更新之前执行
6.Update 组件更新之后执行
7.beforeDestory 实例销毁之前执行
8.Destory 实例销毁之后执行

19.简述什么是组件，特点是什么

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
组件特性：
能够减少重复代码的编写，提高开发效率。
降低代码之间的耦合程度，使项目更易维护和管理。
根据业务逻辑实现复杂的项目功能。

20.列举几个事件修饰符，并说明

1…enter/.page-down/.shift…… 按键修饰符
2…stop 阻止事件冒泡
3…prevent 阻止默认事件行为
4…capture 事件捕获
5…self 将事件绑定到自身，只有自身才能触发
6…once 事件只触发一次

21.事件冒泡

父元素和子元素分别绑定一个单击事件；
单击子元素，先触发子元素的单击事件，然后触发父元素的单击事件，这种情况叫冒泡；
v-on:click.stop 作用是阻止冒泡事件。即单击子元素时不会再触发父元素的单击事件。
若子元素是一个链接，它具有默认行为是跳转到指定界面，
v-on:click.prevent 作用是阻止默认行为。

22.事件修饰符

@/v-on:click/focus/blur/keydown/keyup.stop/.prevent…

23.显示/隐藏div

界面有三个按钮分别是显示，隐藏和切换。还有一个div
三个按钮分别绑定三个事件。
div用v-if绑定一个Vue实例中的数据msg;
显示事件：this.msg=true
隐藏事件：this.msg=false
切换事件：this.msg=!this.msg

24.动态加载商品列表

v-for要写在

• 标签里面。格式为item in items；
  Items是在Vue实例data属性中的数组。格式为items：[{ },{ },];

•  <th>{{item.变量名}}</th>
  

  25.自定义属性指令

  v-for v-if 等都是指令 自定义指令就是自己规定一个v-xx的指令，指令的作用同样自己规定。
  自定义指令被声明在directives选项中。
  Vue.directives({‘xx’,{
  bind(){}, 指令与元素绑定
  el代表当前使用该属性的元素，原生的dom。
  obj里面的的arg参数代表用户传入的参数
  inserted(){}, 指令绑定的元素挂载到父元素上
  update(){}, 数据更新
  unbind(){}, 指令与元素解绑
  componentUndate(){} 更新完成
  }
  })

  26.局部过滤器

  	  {{msg|add}}     | 叫做管道符
  

  文本内容 | 文本处理函数
  局部过滤器用在花括号和v-bind
  在Vue实例中的filters属性中定义文本处理函数。

  27.Watch

  watch检测数据是否有变化，
  Vue实例中的watch属性里的格式为
  变量名(){变量变化之后执行的指令}

  28.Computed

  计算属性：当一个变量变化的时候，另外一个变量也跟着变化。
  Vue实例中computed属性里的格式为
  变量名(){跟随另一个变量变化的语句}

  29.路由

  1.导入vue-router，注意顺序，在vue.js后面。
  2.定义组件。

  var loginTemplate = {template:'<h1>登录组件</h1>'};
  var 组件名 = {template:'模板'};
  

  3.注册组件
  Vue.component(‘login’,loginTemplate);
  Vue.component(‘注册名’,组件名);
  4.定义路由对象。
  var myrouter = new VueRouter({})
  var 路由对象名 = new VueRouter({})
  5.定义路由匹配规则
  定义路由匹配规则 routes:[]
  每条路由规则是一个对象，格式{path:xx,component:组件名}
  path表示监听哪个路由链接地址
  component表示该path对应哪个组件模板
  【注意】component后面是【组件】，而不是组件的【注册名称】
  6.注册路由
  在Vue实例中router:myrouter（路由对象名）
  7.使用路由展示组件
  router-link使用to进行跳转，默认渲染成一个a标签。
  router-view 将负责挂载路由匹配到的视图组件。

  30.路由传参

  1.params传参

  2.Query传参

  31.子组件和父组件之间的传值

  通过属性传值给子组件。v-bind:子组件要用的数据="父组件的变量.
  在子组件中使用props选项存放子组件要用的数据