V3基本知识复习

请简述什么是Vue。

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

请简述Vue优势有哪些？

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

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

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

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

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

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

this.r o u t e r ， 全 局 路 由 对 象 t h i s . router，全局路由对象 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：若有重定向，即为重定向来源的路由

简述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，表启用

简述Vuex中的actions的含义。

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

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

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

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

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

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

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

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

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

事件冒泡

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

2.定义组件。

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.使用路由展示组件

.路由传参

1.params传参

2.Query传参

Vue 父子组件间的参数传递是如何做到的？

 父组件向子组件传值：

    1）子组件在props中创建一个属性，用来接收父组件传过来的值；

    2）在父组件中注册子组件；

    3）在子组件标签中添加子组件props中创建的属性；

    4）把需要传给子组件的值赋给该属性

  子组件向父组件传值：

    1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；

    2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；

    3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

导航钩子函数有哪些？它们有哪些参数？

导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）

双向绑定的含义

把Model绑定到View的同时，也将View绑定到Model上。这样，当更新Model时，View就会自动更新；反之，如果用户更新了View，Model的数据也自动被更新了。

v-bind绑定value属性的值；

v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

Vshow和Vif的区别

首先，在用法上的区别：

v-show是不支持template；

v-show不可以和v-else一起使用；

其次，本质的区别：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换；

-if当条件为false时，其对应的元素压根不会被渲染到DOM中；

开发中如何进行选择呢？

如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；

如果不会频繁的发生切换，那么使用v-if；

计算属性和watch区别

1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）。

5、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----用户名展示、列表展示、购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框。

计算属性和函数的区别

函数：每次调用都会执行（如果数据经常发生变化，推荐使用）

计算属性：只要返回的结果没有发生变化，计算属性就只会被执行一次（如果数据不经常变化，推荐使用）函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值 2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值

vue生命周期

• 创建期间的生命周期函数：
  • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性
  • created：实例已经完成了模板的编译，但是还没有挂载到页面中
  • beforeMount：此时已经完成了模板的翻译，但是还有完全挂载到页面中
  • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
• 运行期间的生命周期函数：
  • beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  • updated：实例更新完毕之后调用次函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
    • 当执行 beforeDestroy 钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段；当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods， 以及 过滤器、指令、、 都处于可用状态，此时，还没有真正执行销毁的过程
  • destroyed：Vue 实例销毁后调用。调用后，vue 实例 指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁

组件传值

父传子 (自定义属性–props)

父组件向子组件传值，通过自定义属性的方式进行传值，在子组件中用 props 定义自定义属性，然后在父组件中通过 v-bind 指令把需要传递的数据绑定在子组件上，那在子组件中 props 里面的自定义属性可以直接使用

子传父 (自定义事件–this.$emit)

子组件向父组件传数据使用自定义事件，vue 组件为我们提供了一个 $emit 方法，使用方式 (this.$emit('自定义事件名', 传递的数据))，子组件传递数据时，触发相应的事件函数，就会自动触发通过 $emit 给父组件绑定的自定义事件，自定义事件接收一个参数，参数就是子组件传递过来的数据

兄弟之间传值 (eventBus)

兄弟组件之间的数据传递，通过 eventBus 来做中间的桥梁，传输方通过 Bus.$emit('自定义事件名', 数据)传数据，接收方通过 Bus.$on('自定义事件名', callback)接收数据，两者之间的自定义属性名保持一致

使用vue-router的步骤:

第一步∶创建路由组件的组件;

第二步:配置路由映射:组件和路径映射关系的routes数组﹔

第三步:通过createRouter创建路由对象，并且传入routes和history模式;

第四步:使用路由:通过<router-link>和<router-view> ;

VUEX

State

• 数据唯一来源(数据源)，vuex所有的数据都会存在state中，就像一个很大的仓库，存储所有数据，可以实例化用来存储所有的数据，如何存储呢？实际上status就是一个庞大的对象，本身是一个json对象，用来存储所有的数据

Getter

• 获取数据。本来可以通过state实例化拿到所有数据，但是getter有其存在的道理，好比是vue的computed计算属性，相似性：从现有的state来派生出一个新的state，大大方便我们获取数据，或者state派生出新的状态的时候有很大的作用

Mutation

• 修改数据，不是通过直接修改，需要通过一个commit
  mutation来修改数据，mutation本质上就是一个function，为什么不能直接通过实例化state直接去给state里面的数据做修改，而是通过commit一个mutation，在通过mutation传入一个state，再对state进行修改呢？这里主要是因为，每次提交mutation，都会有一个记录，vue这样做是为了更方便的记录下每一个数据改变的历史和轨迹，方便于监听和回滚之类的操作。还需要注意一点，mutation的操作一定是同步的，写成异步会有很大的麻烦，具体看文档

Action

• 提交mutation，为什么会多出这个呢？实际上mutation是同步修改数据，而往往业务需求有很多的异步操作，来修改vuex的数据状态，action里面可以进行异步操作，因为我们提交的时候mutation，mutation是通过同步修改数据。Action相当于包装了一层，可以进行任意的异步编程。来提交mutation，在通过mutation同步修改数据

Modules

面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。