vue2基础

SPA 单页面的理解，它的优缺点

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

MVVM架构思想

MVVM架构思想的核心在于将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。这三个部分分别承担不同的职责，实现了解耦和职责分离，从而提高了代码的可维护性和可测试性。具体来说，MVVM架构思想的实现步骤如下：

模型（Model）：负责处理数据的读写操作，包括从服务器获取数据、存储数据等。

视图（View）：负责渲染用户界面，包括HTML、CSS和JavaScript等，但不包括业务逻辑。

视图模型（ViewModel）：连接视图和模型的桥梁，负责从模型中获取数据，并将其转换为视图可以使用的格式，同时也负责将视图中的用户交互事件转换为模型可以理解的操作。视图模型中不包含任何与视图相关的代码，从而实现了解耦。

vue生命周期

beforeCreate（创建前）

created（创建后）

beforeMount(载入前)

mounted（载入后）

beforeUpdate（更新前）

updated（更新后）

beforeDestroy（销毁前）

destroyed（销毁后）

vue双向数据绑定

数据劫持

Vue.js通过数据劫持来实现数据的双向绑定。它通过使用ES5中的Object.defineProperty()方法来劫持对象属性的setter和getter方法。这样，当对象的属性发生变化时，Vue.js就可以监听到变化，并将变化同步到视图上。例如，我们可以定义一个名为Person的类，然后通过Object.defineProperty()方法来劫持其属性：

vue父子传值

1. props，父组件通过属性绑定的形式将数据传递给子组件，并在子组件中定义props来接收。

2. 子传父： $emit, 通过在子组件中使用$ emit方法触发自定义事件，然后在父组件中使用v-on指令监听该事件并执行相应的逻辑。这样子组件就可以向父组件发送消息或传递数据。

3. parent和children：通过访问父组件的this.parent或子组件的this.children属性来直接访问父组件或子组件的实例，并进行数据传递。

4. Provide和Inject：通过在父组件中使用provide提供数据，在子组件中使用inject注入数据。这种方式可以实现跨级组件之间的数据传递。

在上述示例中，父组件通过this.children 获取子组件实例的数组，并访问了子组件实例的message属性。子组件通过this.parent 获取父组件实例，并访问了父组件实例的parentMessage属性。然而，这种直接访问父子组件实例的方式并不是常用的数据传递方式。通常推荐使用props和$emit等方式来进行父子组件之间的数据传递，以保持代码的可维护性和可测试性。

Vue 组件间通信有哪几种方式？

（1）props / $emit 适用父子组件通信

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

8、Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created >-> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程父 beforeUpdate -> 父 updated

销毁过程父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

vuex

vuex是vue.js的状态管理库-的状态管理库，它通过中心化的状态管理使得组件间的数据共享更加容易。 Vuex包含五个核心属性：state、getters、mutations、actions和modules。

1.state：定义了应用程序的状态，就是我们要管理的数据。

存放应用程序的状态（数据），所有组件共享。它是Vue实例的data属性的替代品，但是通过它存储和管理的状态，可以在整个应用程序中实现全局共享，即不同的组件可以通过定义的getter和setter访问同一状态数据。

2.getters

getters：用于获取State中的状态，主要用于对state进行逻辑上的组合和应用，类似于Vue组件中的计算属性。

3：mutations

mutations：用于修改state中的数据，是唯一可以修改state的地方。mutations接收state作为第一个参数，接收payload作为第二个参数。

4：actions

actions：用于异步操作和提交mutations，在actions中可以进行任何异步操作，最后再提交到mutations中同步修改state。actions接收context作为第一个参数，其中包含了state、getters和commit等属性。

5：modules

modules：用于将store分割成模块，每个模块都拥有自己的state、mutation、action、getters和子模块，以便提高应用程序的可维护性。

vue插槽有那些

默认插槽语法 <slot></slot>

具名插槽语法 <slot name="名称"></slot>

作用域插槽语法 <slot :自定义name=data中的属性或对象></slot>

vue路由的跳转方式

router-link

this.$router.push() (函数里面调用)

this.$router.replace() (用法同上,push)

this.$router.go(n)

区别

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

vue watch侦听属性与computed计算属性

watch:更多是观察作用，无缓存性，指定数据的监听回调。一对一的关系，watch可以有异步操作，computed不能有异步操作，否则返回值为undefined;不应该使用箭头函数，理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，watch默认不会执行一次，需要设置才会默认执行。

computed计算属性：依赖其他属性值，并且有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算。一对多的关系。computed会默认执行一次。

watch的使用场景：一个数据影响多个数据,需要在数据变化时执行异步操作或者开销较大的操作时使用。例如：购物车商品结算的时候
computed：一个数据受多个数据影响，处理复杂的逻辑或多个属性影响一个属性的变化时使用。例如：搜索数据

vue-router路由有几种

如下：

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

vue自定义指令

vue官方提供很多指令，如：v-model，v-show，v-if，v-if等，他们都以v-开头。当这些指令不能满足我们实际开发需求时，我们还可以自定义指令。自定义指令主要分为全局自定义指令和局部自定义指令。

一、什么是自定义指令 vue官方提供很多指令，如：v-model，v-show，v-if，v-if等，他们都以v-开头。当这些指令不能满足我们实际开发需求时，我们还可以自定义指令。自定义指令主要分为全局自定义指令和局部自定义指令。
二、全局自定义指令directive
在main.js中写全局自定义指令
 // 自动获取焦点
`Vue.directive('focus', {
 inserted: function (el) {
   el.focus()
 }
})`
三、局部自定义指令directives
可以在任意组件中定义自定义指令，directives是一个对象，他的每一个属性就只一个自定义指令，这里定义了一个>focus指令。
directives: {
 focus: {
   inserted: function (el) {
     el.focus()
   }
 }
}
四、自定义指令的调用
和普通指令的使用方式一样v-自定义指令名称
如v-focus

五、自定义指令的钩子函数

有以下五个钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

每个钩子函数有以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。

binding：一个对象，包含以下 property：

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。注意：bind和insert都只调用一次；bind在insert前执行，也就是bind在dom树绘制前调用，insert在dom树绘制后调用；涉及dom操作的，我们一般都用insert，如自动获取焦点指令，只能用insert函数。

vue封装组件

Vue中封装组件的方法有多种，以下是其中常用的几种方法：

全局组件可以使用Vue.component()方法在全局注册一个组件。在main.js（或任何你选择作为入口文件的地方）中，使用Vue.component()方法注册组件，然后就可以在整个应用程序中使用该组件。
javascriptCopy Code
// 在main.js中注册全局组件
import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';
Vue.component('my-component', MyComponent);
在其他组件中使用：
htmlCopy Code

<template>
  <div>
    <my-component></my-component>
  </div>
</template>
局部组件除了全局组件，你还可以在每个组件的定义中注册局部组件。这样，该组件只能在当前组件中使用。
javascriptCopy Code
// 在组件定义中注册局部组件
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  },
  // 组件的其他选项...
}
在当前组件的模板中使用：
htmlCopy Code

<template>
  <div>
    <my-component></my-component>
  </div>
</template>
插槽（Slot）插槽是一种让父组件可以向子组件传递内容的机制。通过在子组件的模板中使用元素，可> 以定义一个或多个插槽，然后在父组件中填充插槽内容。
htmlCopy Code

<template>
  <div>
    <slot></slot>
  </div>
</template>
在父组件中使用子组件，并填充插槽内容：
htmlCopy Code

<template>
  <div>
    <my-component>
      <p>插槽内容</p>
    </my-component>
  </div>
</template>
动态组件动态组件允许你根据条件渲染不同的组件。你可以使用Vue的元素并根据数据或计算属性> 的值来决定要渲染的组件。
htmlCopy Code

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>
在上面的代码中，componentName是一个响应式的数据或计算属性，它的值决定了要渲染的组件。

这些是Vue中封装组件的常用方法，具体选择哪种方法取决于你的需求和项目的复杂性。你可以根据实际情况选择最适合的封装方式。

创建Vue项目的过程可以分为以下步骤：

步骤1：安装Node.js 首先，确保你的计算机上已经安装了Node.js。你可以从官方网站（[nodejs.org] (nodejs.org/)）下载并安装适合你操…

步骤2：安装Vue CLI Vue CLI是一个用于快速搭建Vue项目的命令行工具。打开命令行终端（Windows用户可以使用> 命令提示符或PowerShell），运行以下命令来全局安装Vue CLI：
Copy Code
npm install -g @vue/cli
步骤3：创建新项目在你想要创建项目的目录下，运行以下命令创建一个新的Vue项目：
Copy Code
vue create 项目名称
例如，如果你想要创建一个名为"my-vue-app"的项目，可以执行以下命令：
Copy Code
vue create my-vue-app
接下来，Vue CLI会询问你想要使用哪种预设配置。你可以选择默认配置（default）或手动选择配置（manual）。> 根据你的需求选择适合的选项。

步骤4：等待项目创建一旦你选择了配置选项，Vue CLI会自动下载所需的依赖并创建项目结构。这个过程可能需要> 一些时间，取决于你的网络连接速度和计算机性能。

步骤5：进入项目目录项目创建完成后，进入项目目录：
Copy Code
cd 项目名称
例如，如果你的项目名为"my-vue-app"，可以执行以下命令：
Copy Code
cd my-vue-app
步骤6：运行开发服务器进入项目目录后，你可以运行以下命令启动开发服务器：
Copy Code
npm run serve
这将启动一个本地开发服务器，并在浏览器中打开项目。你将能够在开发过程中实时查看和调试项目。

至此，你已经成功创建了一个Vue项目。你可以根据需要进行进一步的开发、添加组件、配置路由等等。