Vue面试相关

MVVM相关

什么是MVVM, 谈谈你对MVVM开发模式的理解?

​ MVVM是是Model-View-ViewModel的缩写,Model代表数据模型,定义数据操作的业务逻辑,View代表视图层,负责将数据模型渲染到页面上,ViewModel通过双向绑定把View和Model进行同步交互,不需要手动操作DOM的一种设计思想。

MVVM分为Model、View、ViewModel三者。

Model:代表数据模型,数据和业务逻辑都在Model层中定义;

View:代表UI视图,负责数据的展示;

ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;

Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。

MVVM和MVC区别?和其他框架(jquery)区别?那些场景适用?

​ MVVM和MVC都是一种设计思想,主要就是MVC中的Controller演变成ViewModel,,MVVM主要通过数据来显示视图层而不是操作节点,解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度慢,影响用户体验问题。主要用于数据操作比较多的场景。
场景:数据操作比较多的场景,更加便捷

mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?

一个model+view+viewModel框架,数据模型model,viewModel连接两个

区别:vue数据驱动,通过数据来显示视图层而不是节点操作。

场景:数据操作比较多的场景,更加便捷

自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数:el、binding

指令相关

Vue 有哪些指令,请说出相关一些?

  • v-if?show:判断是否隐藏; 用来显示或隐藏元素,v-show 是通过display实现,v-if 是每次删除后在创建
  • v-for:数据循环出来; 对数组或对象进行循环操作
  • v-bind:class:绑定一个属性;
  • v-model:双向数据绑定,一般用于表单元素。

v-model是什么?怎么使用? vue中标签怎么绑定事件?

​ 可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog()/>

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

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

Vue.cli相关

请说出vue.cli项目中src目录每个文件夹和文件的用法?

  • assets文件夹是放静态资源;
  • components是放组件;
  • router是定义路由相关的配置;view视图;
  • app.vue是一个应用主组件;
  • main.js是入口文件

vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {

第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue'

第三步:注入到vue的子组件的components属性上面,components:{smithButton}

第四步:在template视图view中使用,

vue-cli如何新增自定义指令?

1、创建局部指令

var app = new Vue({
    el: '#app',
    data: {   
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2、全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3、指令的使用

<p>
    <p v-dir1></p>
	<p v-dir2></p>
</p>

Vuex相关

vuex是什么?怎么使用?哪种功能场景使用它?

​ vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

vue框架中状态管理,就是把组建的共享状态取出来,以一个全局单例模式管理,这样,不管在任何时候,都能获取状态或者触发行为

你是怎么认识vuex的?

vuex可以理解为一种开发模式或框架。 通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。

应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。

vuex 状态管理模式

采用集中式存储,管理应用所有组件的状态,简单说集中管理数据,类似于react中的redux,基于flux前段状态管理框架。

基本使用:nmp install vuex -S

创建store.js 文件,vuex相关配置。在main.js 中导入,import store fomr './store.js main.js 配置store选项,子组this.$store

import vue fomr vue import vuex from vuex vue.use(vuex);

vuex核心store 相当于一个容器,一个store实例中包含一下属性和方法:

getters 获取属性

actions 定义方法 动作,如流程判断 异步请求 const action={ 方法名(context){})} context 对象有comit dispatch state

commit 提交的意思,修改数据唯一方式, conmit('add) 提交一个叫add的变化

mutations 定义变化

var state= { count:6} //创建store对象 const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;

编辑 app。js 编辑store, 作为计算属性:computed:(){return this.$store.state.count};

方式一 this.#store访问

方式二 mapGetters mapActios访问

mapGetter 获取属性

mapActions 获取方法

导入辅助函数 import {mapGetter} from vuex

computed:mapGetters{('count')}

Vue 生命周期

什么是vue生命周期?

​ Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

vue生命周期的作用是什么?

​ 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段?

​ 它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

第一次页面加载会触发哪几个钩子?

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

DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了

简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法:

beforecreate : 可以在这加个loading事件,在加载实例时触发

created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

mounted : 挂载元素,获取到DOM节点

updated : 如果对数据统一处理,在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

nextTick : 更新数据后立即操作dom

Vue生命周期的理解?

​ 生命周期:就是一个组件或者实例开始被初始化、创建开始到这个实例被销毁或者结束的一个过程。

​ 这个过程比如官网表述的:在过程中需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等,同时,在这个过程中vue给我们提供了很多的方法,也就是所说的生命周期钩子函数。

​ 在实例生命周期的不同阶段借助这些钩子函数,“用户在不同阶段添加自己的代码”

由此:真正的生命周期是一个流程,而不是单单那几个钩子函数,钩子函数只是用来在流程的不同阶段帮助我们做更多的事情。

vue的生命周期统分为5大区块:

  • 创建(初始化)
  • 查找与处理(找到组件并渲染)
  • 挂载(插入)
  • 更新(重新渲染并插入)
  • 销毁(卸载所有)

其中每一大块又分几个小的步骤,但是大体规律又是如出一辙:

  • 本区块开始前(一个区块流程开始的钩子告诉你)
  • 本区块开始中
  • 本区块开始后(一个区块流程完毕的钩子告诉你)

一、创建部分

new Vue 这句代码初始化一个vue实例。

开始创建一个vue对象生命周期开始,init event初始化事件,为当前实例做基础配置;

创建之前,这里提供一个钩子函数,beforeCreate 开始创建钩子,这个时候还啥也没做呢,页面一片空白,可以在页面中先展示一个loading组件,给用户一个友好体验;

创建中,init injections(初始化注册) & reactivity 创建过程中,data属性被成功绑定,dom未生成;

创建之后,这里提供一个钩子函数,created 创建完毕钩子,

  这个时候vue对象实例化完毕,dom树依旧未生成,页面还是一片空白,但是,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。

可以在这里ajax获取数据赋给data属性了,以便日后使用;

二、查找部分

也就是new Vue()括号里边的参数开始被执行解析的过程:

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

​ 查找el属性的对应内容,el对应的DOM 元素作为 Vue 实例的挂载目标。

  • 如果值可以被找到,那么实例将立即进入编译过程

  • 如果找不到,就去查是否在括号后边挂载了$.mount()并有内容,用于手动开启编译

​ 以上官网解说:“如果在实例化时存在el这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。”官网:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM

  • 如果都没找到,生命周期结束;

  • 如果顺利的都找到了,就继续往下查找{}内的下一个属性template

    • 如果template对应的值当中有组件或者有html内容,那么也算查找成功,
    • 如果为空,继续查找render属性值是否为空
  • 紧接着,如果{}选项中存在渲染函数render,

    • 那么template将被忽略,因为render渲染函数是字符串模板的代替方案,
      • render可以让你发挥 JavaScript 最大的编程能力,而不用写template的静态模板
    • 如果没有或为空,template字符串模板将会替换挂载的元素,即el的属性值
      • 挂载元素el的内容都将被忽略,除非模板template的内容有分发插槽。
    • 如果template和render都不存在,则生命周期结束。

三、挂载部分

开始挂载之前,这里提供一个钩子函数,beforeMount挂载前钩子(编译template里的内容并在虚拟dom中执行,页面上依旧没有任何展示)

  • 挂载中,要做的事就是创建vm$.el,并替换到el元素,
  • 挂载完毕,这里提供一个钩子函数,mounted挂载完毕钩子,
    • el 被新创建的 vm.$el 替换,并挂载到实例上去
    • 至此,所有的dom结构和数据都被展示到页面当中,

四、更新部分

依旧是那个套路,触发了更新的开关后,会给一个开始更新的回调:

  • 更新之前,这里有一个钩子函数,beforeUpdate开始更新前钩子,
    • 在这个钩子里可以提供一个弹窗提示用户确认跟新啥的。或者再展示一个loading;
    • 也可以手动移除已添加的事件监听器
  • 更新中,vue实例要开始将旧数据替换为新数据,在虚拟dom中重新渲染
    • 虚拟dom开始改变,但是页面这时没有任何变化,因为只是改的虚拟dom,还并未真正修改dom结构;
  • 更新完毕,这里有一个钩子函数,updated更新后钩子,
    • 这时真正的dom结构被彻底替换,页面展示上也会发生改变,
    • 在这个钩子里可以提供一个弹窗告诉用户更新完毕。同时去掉loading弹层啥的;

五、销毁部分

  • 开始销毁vue实例之前,会有一个钩子函数提示开发者组件要开始销毁:beforeDestory开始销毁钩子,
    • 在这个钩子中我们可以提醒用户是否删除等,或者做一些开发者与业务有关的相关操作;
  • 销毁中,vue这时的主要目标就是卸载,就像人要洗澡前各种脱一样(具体就不要想象了!),
    • 他要卸载在身上的各种监听、各种事件, 各种绑定以及各种子组件实例销毁,感觉像毁灭一切
      • 比如watchers(我没用过没有发言权)、子组件child components、事件event;
  • 销毁后,这时再次提供最后一个钩子函数,destoryed销毁完毕。
    • 在这里我们可以提示用户删除完毕啥的,也可以清空我们自己的定时器或者做一些其他善后工作。

到这一步,此次整个vue实例的生命周期就彻底结束了。

请详细说下你对vue生命周期的理解?

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后

① 创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。

② 载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

③ 更新前/后:当data变化时,会触发beforeUpdate和updated方法。

④ 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

什么是vue生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

vue生命周期的作用是什么?

它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段?

它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

请列举出3个Vue中常用的生命周期钩子函数

​ created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算 watch/event事件回调. 然而, 挂载阶段还没有开始, el属性目前还不可见

​ mounted : el被新创建的 vm.el属性目前还不可见mounted:el被新创建的vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
​ activated: keep-alive组件激活时调用

组件

请说下封装 vue 组件的过程?

​ 首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

​ 然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

组件之间的传值?

  • 父组件与子组件传值
  • 父组件通过标签上面定义传值
  • 子组件通过props方法接受数据
  • 子组件向父组件传递数据
  • 子组件通过$emit方法传递参数

Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件:$emit方法传递参数
2.非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)

v-router 路由相关

路由之间跳转

声明式(标签跳转) 编程式( js跳转)

怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

​ 在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id

vue-router是什么?它有哪些组件?

vue用来写路由一个插件。router-link、router-view

vue-router有哪几种导航钩子?

有三种,

第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件

过滤器

vue-router路由

使用vue.js 开发spa 单页面应用,根绝不同url地址,显示不同内容,但实现在统一页面红,称单页面应用。

安装路由:cnpm install vue-router -S

<p id='itsny'>
    <p>
    	<!--使用router-link组件来定义导航,to属性指定链接url -->
    	<router-link to="/home">主页</router-link>
		<router-link to="/news">新闻</router-link>
	</p>
	<p>
      <!--使用router-view用来显示路由内容 -->
       <router-view></router-view>
	</p>
</p>
<script>
//1、定义组件
    var Home={
        template: '<h3>我是主页</h3>'
    }
var News={
    template:'<h3>我是新闻</h3>'
};

// 2、配置路由
const routes=[
    {path:'/home',component:Home},
    {path:'/news/:username/:password',component:News},
    {path:'*',redirect:'/home'} //重定向
];

// 3、创建路由实例
const router = new VueRouter({
    routes, //简写,相当于routers:routes
    //mode:'history' //更改模式
    linkActiveClass: 'active' //更新活动链接的class类名
});

// 4、创建根实例并将路由挂载到Vue实例上
new Vue({
    el:'#itany',
    router //注入路由
});
</script>

vue-router使用总结

单页面应用的工作原理

​ 我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容。

​ 那么为什么hash的不同,为什么会影响页面的展示呢?浏览器在这里面做了什么内容。以前#后面的内容一般会做锚点,但是会定位到一个页面的某个位置,这个是怎么做到的呢,和我们现在的路由有什么不同。(我能想到一个路由的展示就会把其他路由隐藏,是这样的吗)后面会看一看写一下这个疑惑,现在最重要的是先把基本概念弄熟。

正文

​ 当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们

起步

//*** router-link 告诉浏览器去哪个路由

//*** router-view 告诉路由在哪里展示内容
<p id="app">
    <h1>Hello App!</h1>
	<p>
   	<!-- 使用router-link组件来导航 -->
    <!-- 通过传入`to`属性指定链接 -->
    <!-- <router-link> 默认会被渲染成一个`<a>`标签 -->
		<router-link to="foo">Go to Foo</router-link>
		<router-link to="bar">Go to Bar</router-link>
	</p>
	<!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
	<router-link></router-link>
</p>

// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' },
const Bar = { template: 'bar' },

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
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')
// 现在,应用已经启动了!

动态路由匹配

​ 相当于同一个组件,因为参数不同展示不同的组件内容,其实就是在 vue-router 的路由路径中使用『动态路径参数』

const router - new VueRouter({
    routes: [
        //动态路径参数,以冒号开头
        {path:'/user/:id',component:User}
    ]
})
那么我们进入uesr/001 和 user/002 其实是进入的同一个路由,可以根据参数的不同在内容页展示不同的内容。一般适用场景:列表,权限控制

定义的时候用: 表示是动态路由,使用 {{ $route.params.id }} 来拿到本路由里面参数的内容

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象

const User = {
    template: '...',
    watch: {
        '$route'(to,from){
            //对路径变化作出响应...
        }
    }
}
	有时候,同一个路径可以匹配多个路由,此时,**匹配的优先级**就按照路由的定义顺序:**谁先定义的,谁的优先级就最高。**

嵌套路由

//路由里面也会出现 这是嵌套路由展示内容的地方
const User = {

 template: `
	<p class="user">
		<h2>User {{ $route.params.id }}</h2>
		<router-view></router-view>
	</p>
	`
}

//定义路由的时候在 加children 子路由属性
const router = new VueRouter({
 routes: [
 { path: '/user/:id', component: User,
  children: [
  {
   // 当 /user/:id/profile 匹配成功,
   // UserProfile 会被渲染在 User 的 中
   path: 'profile',
   component: UserProfile
  },
  {
   // 当 /user/:id/posts 匹配成功
   // UserPosts 会被渲染在 User 的 中
   path: 'posts',
   component: UserPosts
  }
  ]
 }
 ]
})

设置空路由,在没有指定路由的时候就会展示空路由内容

const router = new VueRouter({

routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功,
// UserHome 会被渲染在 User 的 中
{ path: '', component: UserHome },
]
}
]
})

编程式导航

声明式:
编程式:router.push(...)

可以想象编程式 push 可以理解为向浏览器历史里面push一个新的hash,导致路由发生变化

router.replace() 修改路由但是不存在历史里面
router.go(n) 有点像JS的window.history.go(n)

命名路由 就是给每一个路由定义一个名字。

命名视图

​ 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):

const router = new VueRouter({

routes: [
{
 path: '/',
 components: {
  default: Foo,
  a: Bar,
  b: Baz
 }
}
]
})

重定向和别名

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

const router = new VueRouter({

 routes: [
  { path: '/a', redirect: '/b' }
 ]
})

一般首页的时候可以重定向到其他的地方

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({

 routes: [
  { path: '/a', redirect: { name: 'foo' }}
 ]
})

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({

 routes: [
  { path: '/a', redirect: to => {
   // 方法接收 目标路由 作为参数
   // return 重定向的 字符串路径/路径对象
  }}
 ]
})

『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

​ /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

上面对应的路由配置为:

const router = new VueRouter({

 routes: [
  { path: '/a', component: A, alias: '/b' }
 ]
})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

HTML5 History模式

ue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '*', component: NotFoundComponent }
 ]
})

或者,如果你使用 Node.js 服务器,你可以用服务端路由匹配到来的 URL,并在没有匹配到路由的时候返回 404,以实现回退。

导航守卫

我的理解 就是组件或者全局级别的 组件的钩子函数

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

完整的导航解析流程

  • 导航被触发。
  • 在失活的组件里调用离开守卫。
  • 调用全局的 beforeEach 守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 在路由配置里调用 beforeEnter。
  • 解析异步路由组件。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫 (2.5+)。
  • 导航被确认。
  • 调用全局的 afterEach 钩子。
  • 触发 DOM 更新。
  • 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

​ 我的理解就是 他可以把路由的父路径都列举出来,完成一些任务,比如登录,user 组件需要登录,那么user下面的foo组件也需要,那么可以通过这个属性 来检测这个路由线上 的一些状态。

定义路由的时候可以配置 meta 字段:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

数据获取

我的理解就是在哪里获取数据,可以再组件里面,也可以在组件的守卫里面,也就是组件的生命周期里面。

有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。

导航完成后获取数据

当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

<template>
    <p class="post">
        <p class="loading" v-if="loading">
            Loding..
       	</p>
		<p v-if="error" class="error">
            {{ error }}
        </p>
		<p v-if="post" class="content">
            <h2>{{ post.title }}</h2>
			<p>{{ post.body }}</p>
		</p>
	</p>   
</template>
export default {
 data () {
  return {
   loading: false,
   post: null,
   error: null
  }
 },
 created () {
  // 组件创建完后获取数据,
  // 此时 data 已经被 observed 了
  this.fetchData()
 },
 watch: {
  // 如果路由有变化,会再次执行该方法
  '$route': 'fetchData'
 },
 methods: {
  fetchData () {
   this.error = this.post = null
   this.loading = true
   // replace getPost with your data fetching util / API wrapper
   getPost(this.$route.params.id, (err, post) => {
    this.loading = false
    if (err) {
     this.error = err.toString()
    } else {
     this.post = post
    }
   })
  }
 }
}

在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据,当数据获取成功后只调用 next 方法。

export default {
 data () {
  return {
   post: null,
   error: null
  }
 },
 beforeRouteEnter (to, from, next) {
  getPost(to.params.id, (err, post) => {
   next(vm => vm.setData(err, post))
  })
 },
 // 路由改变前,组件就已经渲染完了
 // 逻辑稍稍不同
 beforeRouteUpdate (to, from, next) {
  this.post = null
  getPost(to.params.id, (err, post) => {
   this.setData(err, post)
   next()
  })
 },
 methods: {
  setData (err, post) {
   if (err) {
    this.error = err.toString()
   } else {
    this.post = post
   }
  }
 }
}

在为后面的视图获取数据时,用户会停留在当前的界面,因此建议在数据获取期间,显示一些进度条或者别的指示。如果数据获取失败,同样有必要展示一些全局的错误提醒。

vue-router是怎么传值的

1、在路由处配置

path:'/detail/:id'
//调用:
this.$router.push({
    path:'/home/${id}'
})

在组件内通过this.$route.params.id即可获取。

2、在router-link标签中传递参数

<router-link :to = {
    params:{
        id:1
    }
}/>

也可通过:this.$route.params.id获取

这里通过router-link传参方式是隐形传参

3、另一种params的是通过params传参,通过name配置路由。

//路由处:
{
    path:'/home',
    name:'Home',
    component:Home
}
//调用:
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})

获取:this.$route.params.id

4、通过query来传递参数,参数会在url后边的?id=?中显示

//路由处:
{
    path:'/home',
    name:'Home',
    component:Home
}
//调用:
this.$router.push({
    path:'/home',
    query:{
       id:id
    }
})

获取:this.$route.query.id

过滤器

vue如何自定义一个过滤器?

html代码

<p id="app">
    <input type="text" v=model="msg" />
    {{ msg | capitalize }}
</p>

JS代码:

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

其他

Vue公司的双向数据绑定原理是什么?

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

具体步骤:

第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

vue和react区别

​ 相同点:都鼓励组件化,都有’props’的概念,都有自己的构建工具,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。

​ 不同点:React:数据流单向,语法—JSX,在React中你需要使用setState()方法去更新状态。Vue:数据双向绑定,语法--HTML,state对象并不是必须的,数据由data属性在Vue对象中进行管理。适用于小型应用,但对于对于大型应用而言不太适合。

v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。

Vue中如何在组件内部实现一个双向数据绑定?

假设有一个输入框组件,用户输入时,同步父组件页面中的数据。

具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值;当输入数据时,父子组件中的数据是同步改变的;我们在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢?答案是可以的,你只需要修改父组件:

v-model 实际上会帮我们完成上面的两步操作.

Vue中如何监控某个属性值的变化?

比如现在要监控data中,obj.a的变化。Vue中监控对象属性的办法你可以这样做:

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }

deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改

watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

还有一种方法,可以通过computed 来实现,只需要:

computed: {
    a1 () {
      return this.obj.a
    }
}

利用计算属性的特性来实现,当依赖改变时,便会重新计算一个新值。

前端如何优化网站性能?

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵,这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时,是将HTML内容从上至下依次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受 JS 加载影响。

一般情况下都是CSS在头部,JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。

4、减少重排(Reflow)

基本原理:重排是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如果Reflow的过于频繁,CPU使用率就会急剧上升。

减少Reflow,如果需要在DOM操作时添加样式,尽量使用 增加class属性,而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换

网页从输入网址到渲染完成经历了哪些过程?

大致可以分为如下7步:

  • 输入网址;

  • 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;

  • 与web服务器建立TCP连接;

  • 浏览器向web服务器发送http请求;

  • web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);

  • 浏览器下载web服务器返回的数据及解析html源文件;

  • 生成DOM树,解析css和js,渲染页面,直至显示完成;

$route和$router的区别

​ $route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等

vue的method,computed,watch的区别:

​ computed是对结果进行缓存的,只要依赖的值没有变化,结果就不会变化.

​ method就是普通的方法。

​ computed减少执行的getter减去了重复计算,节省内存。watch是一直在监听。比如this.num + new Date(),虽然new Date的值一直在变,但只要this.num没变,结果还是一样的。

聊聊你对Vue.js的template编译的理解?

简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)

详情步骤:

​ 首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。

​ 然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

vue的历史记录

history 记录中向前或者后退多少步

vue-loader是什么?使用它的用途有哪些?

​ 解析.vue文件的一个加载器,跟template/js/style转换成js模块。

​ 用途:js可以写es6、style样式可以scss或less、template可以加jade等

vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module

vuex的State特性
A、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
A、getters 可以对State进行计算操作,它就是Store的计算属性
B、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用,是可以不用getters
vuex的Mutation特性
Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。

坚持这种真诚,那么总归能遇到良人。

posted on 2020-10-12 15:02  九酒馆  阅读(30)  评论(0编辑  收藏  举报

导航