Vue学习指南与基本知识点汇总

Vue文档资源记录

1、官方文档

2、简单项目地址-github

Vue基本知识点汇总

插槽

插槽是什么？

插槽是组件的内容分发，类似于标签里的内容， 元素作为内容分发的承载。 参考

插槽分类：

默认插槽和具名插槽

具名插槽：
元素可以指定name 来确定承载哪个内容分发；
组件使用时在 元素上使用 v-slot 指令，v-slot可以指定名称

组件定义时具名插槽的写法：
<slot name="header"></slot>

组件使用具名插槽的用法：
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

参考生命周期

生命周期

基本的生命周期：包括

• created(vue实例创建，data 数据的初始化，属性方法运算，事件回调)
• destroy(vue实例销毁)
• mounted(vue虚拟dom挂载到
  根节点dom树)，挂载后才能显示vue里的数据和模板，渲染；可以在此做一些ajax操作
• updated(vue数据更新，同时更新到dom树显示，此时会调用这个钩子)
• 虚拟dom:在vue对象里保存的一个真实dom树（html的节点树）的镜像 （官网的生命周期图示）

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有

beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

2、为什么data是一个函数

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

3、Vue组件通讯有哪些方式**

1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。
2、$parent 和 $children获取单签组件的父组件和当前组件的子组件。3、$attrs 和 $listenersA->B->C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。4、父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）5、$refs 获取组件实例。
6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。
7、vuex 状态管理。

4、怎样理解 Vue 的单项数据流

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。

注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。

如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。

数据绑定、vue的指令

数据绑定v-bind，缩写<a :href="url">...</a>
条件渲染与循环： v-if v-for
事件监听：v-on,比如v-on:click="自定义方法"
 双向绑定：v-model   主要实现表单输入和用户状态的双向绑定

3、组件

  组件与自定义元素的关系：
  使用很相似，都可以实现复杂页面
   组件有父子组件通信，自定义事件

vue实例

遵循MVVM模型，model-view-viewmodel
包括数据data和方法

方法、计算属性、侦听属性

• 计算属性：可以缓存数据，只在依赖的数据改变时才重新求值，只要依赖的数据没有发生改变，便会立即返回缓存的计算结果，不必再次执行

• 侦听：一些数据随着其他数据变动而变动，主要执行异步操作或开销较大时使用

父子组件通信，待补充

1、通过props在父子组件传值时
2、this.$emit提交的事件名称，v-on:handleChange=“handleChange”，和父组件监听时候创建的方法名是否一样？到底哪个才是v-on应该监听的事件名称？
3、v-model
4、v-bind与class的绑定
5、通过插槽向组件分发内容

路由的基本使用（待补充）：了解几种面试题

基本路由

1. 定义（路由)组件

   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }
   

2. 定义路由routes

	const routes = [
	  { path: '/foo', component: Foo },
	  { path: '/bar', component: Bar }
	]

3. 创建router实例，然后传‘routes’配置

   const router = new VueRouter({
     routes // (缩写) 相当于 routes: routes
   })
   

4. 创建和挂载根实例
   要通过router配置参数注入路由从而让整个应用都有路由功能

   const app = new Vue({
     router
   }).$mount('#app')
   

动态参数路由

解决在某种情况下，需要把某种模式匹配到的所有路由，全都映射到同个组件。

	const User = {
	  template: '<div>User</div>'
	}
	
	const router = new VueRouter({
	  routes: [
	    // 动态路径参数 以冒号开头
	    { path: '/user/:id', component: User }
	  ]
	})

“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

	const User = {
	  template: '<div>User {{ $route.params.id }}</div>'
	}

一个路由中设置多段路由参数，对应的值都会设置到$route.params中。