vue细节的这方方面面-白红宇

能体现自己平时的技术积累，和自学总结提升能力这才是不悔走进前端！

vue与React的区别

相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；

中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。

不同点：

React采用的Virtual DOM会对渲染出来的结果做脏检查；

Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

vuex

只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state

Vuex 使用单一状态树,即每个应用将仅仅包含一个store

实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

getters类似vue的计算属性，主要用来过滤一些数据。

actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

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

1.创建局部指令

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

2.全局指令

Vue.directive('dir2', {    inserted(el) {        console.log(el);    }})复制代码

3.指令的使用

下面为一些面试题

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

html代码：


         
          {
   {msg| capitalize }}
    
复制代码

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)})过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数复制代码

对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

css只在当前组件起作用

答：在style标签中写入scoped即可例如：

v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

route和router的区别

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

vue.js的两个核心是什么？

答：数据驱动、组件系统

vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture: 事件侦听，事件发生的时候会调用

v-on 可以绑定多个方法吗？

答：可以

vue中 key 值的作用？

答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，

而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。

好处：

①使得数据处理结构清晰；

②依赖于数据，数据更新，处理结果自动更新； ③计算属性内部this指向vm实例；

④在template调用时，直接写计算属性名即可；

⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；

⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

vue等单页面应用及其优缺点

答：

优点：

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：

不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

vue中子组件调用父组件的方法props

子组件调用父组件的方法可以使用this.$emit()

vue等单页面应用及其优缺点

优点：

1、具有桌面应用的即时性、网站的可移植性和可访问性。

2、用户体验好、快，内容的改变不需要重新加载整个页面。

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

4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。

5、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

缺点：

1、不利于SEO。（如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用）

2、初次加载耗时相对增多。

3、导航不可用，如果一定要导航需要自行实现前进、后退。

Vue中引入组件的步骤?

1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

2.对组件进行注册

代码如下

Vue.component('my-component', {  template: '
    
     A custom component!
    
'})复制代码

3.使用组件


    复制代码

指令v-el的作用是什么?

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,

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

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

mounted: el被新创建的 vm. $el 替换，并挂载到实例上去之后调用该钩子。如果 root实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。

activated::keep-alive组件激活时调用

Vuex的组成：一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

state中保存着共有数据

改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

active-class是哪个组件的属性？嵌套路由怎么定义？

vue-router模块的router-link组件。

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

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id 例如 : this.$route.params.id;

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

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

scss是什么？安装使用的步骤是？有哪几大特性？

预处理css，把css当成函数编写，定义变量,嵌套。

先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

axios是什么？怎么使用？描述使用它实现登录功能的流程？

请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

跨域，添加用户操作，更新操作。

9、什么是RESTful API？怎么使用?

是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete

10、vuex是什么？怎么使用？哪种功能场景使用它？

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

app4.todos.push({ text: '新项目' })，列表最后添加了一个新项目。
      
         
            {
   { todo.text }}    
  
     
    
var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})复制代码

使用 Object.freeze() ，停止响应系统的追踪变化使数据不能改变，试图不能刷新

$watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {  // 这个回调将在 `vm.a` 改变后调用}复制代码

其下是vue细节方面的处理

不要在选项属性或回调上使用箭头函数，箭头函数没有this

v-once 指令，数据改变时，{
{}} 中的内容不会更新

站点上动态渲染的任意 HTML 很容易导致 XSS 攻击绝不要对用户提供的内容使用插值

{
{ }} 里面只能包含表达式的语句三元运算符函数表达式

attributeName 是获取js动态值 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href<a v-bind:[attributeName]="url"> ...

空格和引号，放在 HTML 特性名里是无效的，在 DOM 中使用模板时你需要回避大写键名 ❌错误写法 <a v-bind:['foo' + bar]="value"> ...

浏览器会把特性名全部强制转为小写

<a v-bind:[someAttr]="value"> ...

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

created 里可以直接调用methous里的方法，直接this.方法名

axios 里面 .then 里用箭头函数作为回调函数，回调函数里 this 指向window ，耦合this指向。返回的是promise对象

axios.defaults.baseURL = "";设置请求路径的公共部分

vue 中图片懒加载插件 vue-lazyload

多种写法 v-lazy 图片路径

开发时，vue路由不使用h5模式，h5模式回车会404

router-link中 tag属性定义标签类型

router-link自带class类名，定义激活样式

router在vue实例里挂载后，每个组件都会有一个$router的属性

methods：{    fn(){        this.$router.push("locain")    }}//push   强制跳转路径//go     数字决定返回还是前进//repalce  路由替换，将当前的历史替换掉## vue路由，redirect重定向## vue路由中子路由不带/，带/表示了一级路由this.$route.params.c
    
     商品1
    //  /article/2/d  匹配出一个对象//  /article/:c/:a =>{c:2,a:'d'} = this.$route.params## 如果用对象作为to的属性，并且使用了参数，必须给路由起个名字，通过名字跳转
    
     1
    let routes=[{path:'/article/:c/:a',component:article,name:'pro'}]## 路径参数发生变化   vue实例中watch 监控参数的变化来发送ajaxwatch：{    $route(){        alert('ajax');    }}## 组件之间路由切换会进行销毁， 用keep-alive  进行缓存，不让销毁。## vue路由元信息哪个单页面组件需要缓存，在路由配置里加上meta：{keep:true}//需要缓存的页面
    
     
    //不需要缓存的页面
    ## 路由动画
    
     
      
     
    ## 路由懒加载不再采用引入组件的方法，采用动态使用组件。实现路由懒加载。routes=[{path:"/",name:"home",component:()=>import("../components/home.vue")}]## vue路由全局导航钩子   router.beforeEach(function (to,from,next) {    //  拦截功能    if(to.path==='/list'){        next(path:'/add')    }else{        next()       }})## vuexstore  容器中保存着公共数据state改变store中的state   通过mutation  中commit来改变方法去变更状态，并且是同步的需要支持异步，通过actions 改变  mutation  方法状态管理，将数据统一管理vuex  单向数据流容器store  是唯一的  只能有一个store 被注册到了实例上 ,  所有组件都会有一个  属性  this.$storevuex 实例上加上 strict ：true   严格模式  ，只能通过mutation 更改状态mutations   中的方法  第一个参数  是 state是自动放入的，默认指的是当前的state第二个参数是载荷，传过来的值const  mutations = {    add(state){        state.count +=1;    }};## vuex  提供日志插件  logger   实时监听并记录vuex数据状态变更const  store = new Vuex.store({ state, mutations, plugins:[logger()], strict:true})## vuex  提供  getters   计算属性，相当于computedconst  getters = {    val:(state)=>state.count%2?'1':'2';}import Vue from 'vue';import Vuex from 'vuex';import logger from 'vuex/dist/logger';Vue.use(Vuex);let state = {car:[]};import mutations from './mutations';export default new Vuex.store({ state, mutations, strict:true, plugins:[logger()]});复制代码

。。。未完待更新！

能体现自己平时的技术积累，和自学总结提升能力 这才是不悔走进前端！

vue与React的区别

相同点：

不同点：

vue路由的钩子函数

vuex

state

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

1.创建局部指令

2.全局指令

3.指令的使用

下面为一些面试题

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

html代码：

JS代码：

全局定义过滤器

对keep-alive 的了解？

使用方法

css只在当前组件起作用

v-if 和 v-show 区别

route和router的区别

vue.js的两个核心是什么？

vue几种常用的指令

vue常用的修饰符？

v-on 可以绑定多个方法吗？

vue中 key 值的作用？

什么是vue的计算属性？

好处：

vue等单页面应用及其优缺点

优点：

缺点：

vue中子组件调用父组件的方法props

子组件调用父组件的方法可以使用this.$emit()

vue等单页面应用及其优缺点

优点：

缺点：

Vue中引入组件的步骤?

代码如下

指令v-el的作用是什么?

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

Vuex的组成：一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

state中保存着共有数据

active-class是哪个组件的属性？嵌套路由怎么定义？

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

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

scss是什么？安装使用的步骤是？有哪几大特性？

axios是什么？怎么使用？描述使用它实现登录功能的流程？

8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

9、什么是RESTful API？怎么使用?

10、vuex是什么？怎么使用？哪种功能场景使用它？

其下是vue细节方面的处理

能体现自己平时的技术积累，和自学总结提升能力这才是不悔走进前端！