vue细节的这方方面面

时间 2019-11-24

标签 vue 细节方方面面繁體版

原文原文链接

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

vue与React的区别

相同点：

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

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

不一样点：

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

Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做Virtual DOM。vue

vue路由的钩子函数

首页能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。node

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

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

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

next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转面试

vuex

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

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.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>
复制代码

下面为一些面试题

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

html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>
复制代码

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) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>
复制代码

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等单页面应用及其优缺点

优势：

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

二、用户体验好、快，内容的改变不须要从新加载整个页面。

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

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

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

缺点：

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

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

三、导航不可用，若是必定要导航须要自行实现前进、后退。

Vue中引入组件的步骤?

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

2.对组件进行注册

代码以下

Vue.component('my-component', 
{  template: '<div>A custom component!</div>'})

复制代码

3.使用组件

<my-component></my-component>
复制代码

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

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

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

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

mounted: el被新建立的 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函数中

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

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

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

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

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

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

app4.todos.push({ text: '新项目' })，列表最后添加了一个新项目。
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
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 = "http://123.206.85.192:3000";设置请求路径的公共部分
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
<router-link to="/article/1/a">商品1</router-link>
//  /article/2/d  匹配出一个对象
//  /article/:c/:a =>{c:2,a:'d'} = this.$route.params


## 若是用对象做为to的属性，而且使用了参数，必须给路由起个名字，经过名字跳转

<router-link to='{name:'pro',params:{c:1,a:2}}'>1</router-link>
let routes=[{path:'/article/:c/:a',component:article,name:'pro'}]



## 路径参数发生变化 vue实例中watch 监控参数的变化来发送ajax

watch：{
    $route(){
        alert('ajax');
    }
}


## 组件之间路由切换会进行销毁， 用keep-alive 进行缓存，不让销毁。

## vue路由元信息

哪一个单页面组件须要缓存，在路由配置里加上meta：{keep:true}
//须要缓存的页面
<keep-alive>
<router-view  v-if="$router.meta.keep"></router-view>
</keep-alive>

//不须要缓存的页面
<router-view  v-if="!$router.meta.keep"></router-view>


## 路由动画

<transition name="fadeIn">
<keep-alive>
<router-view  v-if="$router.meta.keep"></router-view>
</keep-alive>
</transition name="fadeIn">



## 路由懒加载

再也不采用引入组件的方法，采用动态使用组件。
实现路由懒加载。
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()   
    }
})



## vuex

store  容器中保存着公共数据state

改变store中的state   经过mutation  中commit来改变方法去变动状态，而且是同步的

须要支持异步，经过actions 改变  mutation  方法


状态管理，将数据统一管理

vuex  单向数据流

容器store  是惟一的  只能有一个

store 被注册到了实例上 ,  全部组件都会有一个  属性  this.$store

vuex 实例上加上 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 计算属性，至关于computed

const  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细节的这方方面面

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

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是什么？怎么使用？描述使用它实现登陆功能的流程？

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

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

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

其下是vue细节方面的处理

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