关于前端:前端开发框架vue常见的面试题

对于前端来说，只管 css、html、js 是次要的基础知识，然而随着技术的一直倒退，呈现了很多优良的 mv* 框架以及小程序框架。因而，对于前端开发者而言，须要对一些前端框架进行熟练掌握。这篇文章咱们一起来聊一聊 VUE 及全家桶的常见面试问题。
1、请讲述下 VUE 的 MVVM 的了解？
MVVM 是 Model-View-ViewModel 的缩写，行将数据模型与数据体现层通过数据驱动进行拆散，从而只须要关系数据模型 前端培训 的开发，而不须要思考页面的体现，具体说来如下：
Model 代表数据模型：次要用于定义数据和操作的业务逻辑。
View 代表页面展现组件（即 dom 展示模式）：负责将数据模型转化成 UI 展示进去。
ViewModel 为 model 和 view 之间的桥梁：监听模型数据的扭转和管制视图行为、解决用户交互。通过双向数据绑定把 View 层和 Model 层连贯了起来，而 View 和 Model 之间的同步工作齐全是主动的，无需人为干预
在 MVVM 架构下，View 和 Model 之间并没有间接的分割，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因而 View 数据的变动会同步到 Model 中，而 Model 数据的变动也会立刻反馈到 View 上。
2、VUE 的生命周期及了解？
答：总共分为 8 个阶段，具体为：创立前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。
创立前 / 后：在 beforeCreated 阶段：ue 实例的挂载元素 $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 构造仍然存在。
具体解说及利用
beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其余的货色都还没创立，data 和 methods 中的数据都还没有初始化。不能在这个阶段应用 data 中的数据和 methods 中的办法
create：data 和 methods 都曾经被初始化好了，如果要调用 methods 中的办法，或者操作 data 中的数据，最早能够在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中曾经编译好了模板了，然而还没有挂载到页面中，此时，页面还是旧的，不能间接操作页面的 dom 和获取 dom 对象
mounted：执行到这个钩子的时候，就示意 Vue 实例曾经初始化实现了。此时组件脱离了创立阶段，进入到了运行阶段。如果咱们想要通过插件操作页面上的 DOM 节点，最早能够在和这个阶段中进行
beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data 中的数据是更新后的，页面还没有和最新的数据放弃同步
updated：页面显示的数据和 data 中的数据曾经放弃同步了，都是最新的
beforeDestory：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods、指令、过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：这个时候上所有的 data 和 methods、指令、过滤器 ……都是处于不可用状态。组件曾经被销毁了。
3、v-if 和 v -show 的区别？
共同点：都能管制元素的显示和暗藏；
不同点：实现实质办法不同，v-show 实质就是通过管制 css 中的 display 设置为 none，管制暗藏，只会编译一次；v-if 是动静的向 DOM 树内增加或者删除 DOM 元素，若初始值为 false，就不会编译了。而且 v -if 不停的销毁和创立比拟耗费性能。
如果要频繁切换某节点，应用 v -show(切换开销比拟小，初始开销较大)。如果不须要频繁切换某节点应用 v -if（初始渲染开销较小，切换开销比拟大）。
4、v-if 和 v -for 同时应用在同一个标签上的体现？
当 v -if 与 v -for 一起应用时，v-for 具备比 v -if 更高的优先级，这意味着 v -if 将别离反复运行于每个 v -for 循环中。
所以，不举荐 v -if 和 v -for 同时应用。如果 v -if 和 v -for 一起用的话，vue 中的的会主动提醒 v -if 应该放到外层去
5、v-for 中的 key 的了解？
须要应用 key 来给每个节点做一个惟一标识，Diff 算法就能够正确的辨认此节点。次要是为了高效的更新虚构 DOM。
6、vue 中 transition 的了解？
1）定义 transition 时须要设置对应的 name，具体语法为：<transition name=“fade”> 须要动画的内容或者组件或者页面 </transition>
2）过渡动画次要蕴含 6 个 class，别离为：
• v-enter：定义元素进入过渡的初始状态，在元素插入前失效，插入后一帧删除，
• v-enter-active：在元素插入前失效，在动画实现后删除，
• v-enter-to：在元素插入后一帧失效，在动画实现后删除，
• v-leave：来到过渡的初始状态，在元素来到时失效，下一帧删除
• v-leave-active：在来到过渡时失效，在动画实现后删除
• v-leave-to：来到过渡完结状态，在来到过渡下一帧失效，在动画实现后删除

⚠️：v 会转化为对应的 transition 的 name 值
3）当然咱们也能够自定义这六个 class 能够间接在 transition 中设置对应的属性为对应的 class 名称，属性有：enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-to-class
4）在同时应用过渡和 css 动画的时候 能够设置 type 属性来制订 vue 外部机制监听 transitioned 或者 animationed 事件来实现过渡还是动画的监听
5）如果须要设置对应的过渡工夫，能够间接设置属性 duration，能够间接接管一个数字（单位为毫秒），也能够接管一个对象{enter:1000,leave:300}
6）也能够设置过渡的钩子函数，具体有：before-enter，enter，after-enter，enter-cancelled，before-leave，leave，after-leave，leave-cancelled
7、vue 的自定义指令？
自定义指令分为全局指令和组件指令，其中全局指令须要应用 directive 来进行定义，组件指令须要应用 directives 来进行定义，具体定义方法同过滤器 filter 或者其余生命周期，具体应用办法如下：
全局自定义指令 directive(name,{})，其中 name 示意定义的指令名称（定义指令的时候不须要带 v -，然而在调用的时候须要哦带 v -），第二个参数是一个对象，对象中包含五个自定义组件的钩子函数，具体包含：

1. bind 函数：只调用一次，指令第一次绑定在元素上调用，即初始化调用一次，
2. inserted 函数：并绑定元素插入父级元素（即 new vue 中 el 绑定的元素）时调用（此时父级元素不肯定转化为了 dom）
3. update 函数：在元素产生更新时就会调用，能够通过比拟新旧的值来进行逻辑解决
4. componentUpdated 函数：元素更新实现后触发一次
5. unbind 函数：在元素所在的模板删除的时候就触发一次

钩子函数对应的参数 el,binding,vnode,oldnode, 具体参数解说如下：
a、el 指令所绑定的元素 能够间接操组 dom 元素
b、binding 一个对象，具体包含以下属性：

1. 1）name：定义的指令名称 不包含 v -
2. 2）value：指令的绑定值，如果绑定的是一个计算式，value 为对应计算结果
3. 3）oldvalue：指令绑定元素的前一个值，只对 update 和 componentUpdated 钩子函数有值
4. 4）expression：指令绑定的原始值 不对值进行任何加工
5. 5）arg：传递给指令的参数
6. 6）modifiers：指令修饰符，如：v-focus.show.async 则接管的 modifiers 为{show：true，async：true}

c、vnode：vue 编译生成的虚构 dom
d、oldVnode：上一个 vnode，只在 update 和 componentUpdated 钩子函数中无效
⚠️：如果不须要其余钩子函数，能够间接简写为：directive(“focus”,function(el,binding){})
8、vue 的实现原理？
vue.js 是采纳数据劫持联合发布者 - 订阅者模式的形式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。
具体步骤：
第一步：须要 observe 的数据对象进行递归遍历，包含子属性对象的属性，都加上 setter 和 getter
这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变动
第二步：compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要做的事件是:

1. 1、在本身实例化时往属性订阅器 (dep) 外面增加本人
2. 2、本身必须有一个 update()办法
3. 3、待属性变动 dep.notice()告诉时，能调用本身的 update()办法，并触发 Compile 中绑定的回调，则功成身退。

第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听本人的 model 数据变动，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动 (input) -> 数据 model 变更的双向绑定成果。
9、vue 的 diff 算法了解？
1）diff 算法的作用：用来批改 dom 的一小段，不会引起 dom 树的重绘
2）diff 算法的实现原理：diff 算法将 virtual dom 的某个节点数据扭转后生成的新的 vnode 与旧节点进行比拟，并替换为新的节点，具体过程就是调用 patch 办法，比拟新旧节点，一边比拟一边给实在的 dom 打补丁进行替换
3）具体过程详解：
a、在采纳 diff 算法进行新旧节点进行比拟的时候，比拟是依照在同级进行比拟的，不会进行跨级比拟：

b、当数据产生扭转的时候，set 办法会调用 dep.notify 告诉所有的订阅者 watcher，订阅者会调用 patch 函数给响应的 dom 进行打补丁，从而更新实在的视图
c、patch 函数承受两个参数，第一个是旧节点，第二个是新节点，首先判断两个节点是否值得比拟，值得比拟则执行 patchVnode 函数，不值得比拟则间接将旧节点替换为新节点。如果两个节点一样就间接查看对应的子节点，如果子节点不一样就阐明整个子节点全副扭转不再往下比照间接进行新旧节点的整体替换
d、patchVnode 函数：找到实在的 dom 元素；判断新旧节点是否指向同一个对象，如果是就间接返回；如果新旧节点都有文本节点，那么间接将新的文本节点赋值给 dom 元素并且更新旧的节点为新的节点；如果旧节点有子节点而新节点没有，则间接删除 dom 元素中的子节点；如果旧节点没有子节点，新节点有子节点，那么间接将新节点中的子节点更新到 dom 中；如果两者都有子节点，那么持续调用函数 updateChildren
e、updateChildren 函数：抽离出新旧节点的所有子节点，并且设置新旧节点的开始指针和完结指针，而后进行两辆比拟，从而更新 dom（调整程序或者插入新的内容 完结后删掉多余的内容）
10、vue 组件的通信（父子组件和非父子组件）？
父子组件通信
传递参数能够应用 props，传递函数能够间接在调用子组件的时候传递自定义事件，并应用 $emit 来调用，例如：
// 父组件
<div classs=”parent”>
<child @getinfo=”myname” :userinfo=”usermessage”></child>
<div>
export default {

 data(){
     return {usermessage:'我是父亲'}
 },
 methods:{myname(name){console.log('我的名字叫'+name)
     }
 }

}

// 子组件
<div classs=”child”>
起源：{{userinfo}}
<button @click=”getname”> 显示我的名字 </button>
<div>
export default {

 props:['userinfo'],
 methods:{getname(){this.$emit('getinfo','bilibili')
     }
 }

}兄弟组件通信
首先建设一个 vue 实例空白页（js 文件）
import Vue from ‘vue’
export default new Vue()组件 a（数据发送方）通过应用 $emit 自定义事件把数据带过来
<template>

<div>
    <span>A 组件 ->{{msg}}</span>
    <input type="button" value="把 a 组件数据传给 b" @click ="send">
</div>

</template>
<script>
import vmson from “../../../util/emptyVue”
export default {

data(){
    return {
        msg:{
            a:'111',
            b:'222'
        }
    }
},
methods:{send:function(){vmson.$emit("aevent",this.msg)
    }
}

}
</script> 组件 b（数据接管方）应用而通过 $on 监听自定义事件的 callback 接收数据
<template>
<div>

<span>b 组件,a 传的的数据为 ->{{msg}}</span>

</div>
</template>
<script>

  import vmson from "../../../util/emptyVue"
  export default {data(){
            return {msg:""}
        },
     mounted(){vmson.$on("aevent",(val)=>{// 监听事件 aevent，回调函数要应用箭头函数;
           console.log(val);// 打印后果：我是 a 组件的数据
           this.msg = val;
        })
      }
}

</script>11、vue 的路由模式及区别？
hash 模式在浏览器中符号“#”，# 以及 #前面的字符称之为 hash，用 window.location.hash 读取；
特点：hash 尽管在 URL 中，但不被包含在 HTTP 申请中；用来领导浏览器动作，对服务端平安无用，hash 不会重加载页面。
history 模式：history 采纳 HTML5 的新个性；
提供了两个新办法：pushState（），replaceState（）能够对浏览器历史记录栈进行批改，以及 popState 事件的监听到状态变更。history 模式下，前端的 URL 必须和理论向后端发动申请的 URL 统一，否则会报 404 谬误
12、vue 与 react、angular 的比拟？
Vue
轻量级框架：只关注视图层，是一个构建数据的视图汇合，大小只有几十 kb；
简略易学：国人开发，中文文档，不存在语言障碍，易于了解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简略；
组件化：保留了 react 的长处，实现了 html 的封装和重用，在构建单页面利用方面有着独特的劣势；
视图，数据，构造拆散：使数据的更改更为简略，不须要进行逻辑代码的批改，只须要操作数据就能实现相干操作；
虚构 DOM：dom 操作是十分消耗性能的，不再应用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种形式；
运行速度更快: 相比拟与 react 而言，同样是操作虚构 dom，就性能而言，vue 存在很大的劣势。
React
相同点：React 采纳非凡的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用；中心思想雷同：一切都是组件，组件实例之间能够嵌套；都提供正当的钩子函数，能够让开发者定制化地去解决需要；都不内置列数 AJAX，Route 等性能到外围包，而是以插件的形式加载；在组件开发中都反对 mixins 的个性。
不同点：React 采纳的 Virtual DOM 会对渲染进去的后果做脏查看；Vue.js 在模板中提供了指令，过滤器等，能够十分不便，快捷地操作 Virtual DOM。
Angular
相同点：都反对指令：内置指令和自定义指令；都反对过滤器：内置过滤器和自定义过滤器；都反对双向数据绑定；都不反对低端浏览器。
不同点：AngularJS 的学习老本高，比方减少了 Dependency Injection 个性，而 Vue.js 自身提供的 API 都比较简单、直观；在性能上，AngularJS 依赖对数据做脏查看，所以 Watcher 越多越慢；Vue.js 应用基于依赖追踪的察看并且应用异步队列更新，所有的数据都是独立触发的。
13、vue-roter 的钩子函数？
vue 路由钩子大抵能够分为三类:
全局钩子
次要包含 beforeEach 和 aftrEach,beforeEach 函数有三个参数：
to:router 行将进入的路由对象
from: 以后导航行将来到的路由
next:Function, 进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed（确认的）；否则为 false，终止导航。
afterEach 函数不必传 next() 函数这类钩子次要作用于全局, 个别用来判断权限, 以及以及页面失落时候须要执行的操作, 例如:
// 应用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {

const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){next('/login');
}else if(to.meta.permission){
    // 如果是管理员权限则可进入，这里只是简略的模仿管理员权限而已
    role === 'admin' ? next() : next('/403');
}else{
    // 简略的判断 IE10 及以下不进入富文本编辑器，该组件不兼容
    if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
        Vue.prototype.$alert('vue-quill-editor 组件不兼容 IE10 及以下浏览器，请应用更高版本的浏览器查看 ',' 浏览器不兼容告诉 ', {confirmButtonText: '确定'});
    }else{next();
    }
}

})2）单个路由外面的钩子
次要用于写某个指定路由跳转时须要执行的逻辑
3）组件路由
次要包含 beforeRouteEnter 和 beforeRouteUpdate,beforeRouteLeave, 这几个钩子都是写在组件外面也能够传三个参数(to,from,next), 作用与后面相似.
beforeRouteEnter(to, from, next) {

next(vm => {
  if (vm.$route.meta.hasOwnProperty('auth_key') &&
    vm.$route.meta.auth_key != ''
  ) {if (!vm.hasPermission(vm.$route.meta.auth_key)) {vm.$router.replace('/admin/noPermission')
    }
  }
})

}14、vuex 的应用？
Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化，具体包含：
1）state：Vuex 应用繁多状态树, 即每个利用将仅仅蕴含一个 store 实例，但繁多状态树和模块化并不抵触。寄存的数据状态，不能够间接批改外面的数据。
2）getter：state 的计算属性，相似 vue 的计算属性，次要用来过滤一些数据。
3）action：actions 能够了解为通过将 mutations 外面处里数据的办法变成可异步的解决数据的办法，简略的说就是异步操作数据。view 层通过 store.dispath 来散发 action。能够异步函数调用
4）mutation：mutations 定义的办法动静批改 Vuex 的 store 中的状态或数据
5）modules：我的项目特地简单的时候，能够让每一个模块领有本人的 state、mutation、action、getters, 使得构造十分清晰，方便管理。
15、vue 的 filter 的了解与用法？
1）全局过滤器必须写在 vue 实例创立之前
Vue.filter(‘testfilter’, function (value,text) {// 返回解决后的值
return value+text
})2）部分写法：在组件实例对象里挂载。
filters: {

    changemsg:(val,text)\=>{return val + text}
}3）应用形式：只能应用在 {{}} 和：v-bind 中，定义时第一个参数固定为预处理的数，前面的数为调用时传入的参数，调用时参数第一个对应定义时第二个参数，顺次往后类推

<h3 :title=”test|changemsg(1234)”>{{test|changemsg(4567)}}</h3>
// 多个过滤器也能够串行应用
<h2>{{name|filter1|filter2|filter3}}</h2>4）vue-cli 我的项目中注册多个全局过滤器写法：
//1. 创立一个独自的文件定义并裸露函数对象
const filter1 = function (val) {
return val + ‘–1’
}
const filter2 = function (val) {
return val + ‘–2’
}
const filter3 = function (val) {
return val + ‘–3’
}

export default {
filter1,
filter2,
filter3
}

//2. 导入 main.js(在 vue 实例之前)
import filters from ‘./filter/filter.js’

//3. 循环注册过滤器
Object.keys(filters).forEach(key=>{
Vue.filter(key,filters[key])
})16、vue 的 keep-alive 的了解？
keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染，页面第一次进入，钩子的触发程序:created-> mounted-> activated，退出时触发 deactivated , 当再次进入（后退或者后退）时，只触发 activated 事件挂载的办法等，只执行一次的放在 mounted 中；组件每次进去执行的办法放在 activated 中；其有几个属性如下：
1）include – 字符串或正则表达式，只有名称匹配的组件会被缓存
2）exclude – 字符串或正则表达式，任何名称匹配的组件都不会被缓存
3）include 和 exclude 的属性容许组件有条件地缓存。二者都能够用“，”分隔字符串、正则表达式、数组。当应用正则或者是数组时，要记得应用 v -bind。
<!– 逗号分隔字符串，只有组件 a 与 b 被缓存。–>
<keep-alive include=”a,b”>
<component></component>
</keep-alive>

<!– 正则表达式 (须要应用 v-bind，合乎匹配规定的都会被缓存) –>
<keep-alive :include=”/a|b/”>
<component></component>
</keep-alive>

<!– Array (须要应用 v-bind，被蕴含的都会被缓存) –>
<keep-alive :include=”[‘a’, ‘b’]”>
<component></component>
</keep-alive>17、如何封装一个 vue 组件？
依据业务需要，建设组件的模板，先把架子搭起来，写写款式，思考好组件的根本逻辑。
筹备好组件的数据输出。即剖析好逻辑，定好 props 外面的数据、类型。
筹备好组件的数据输入。即依据组件逻辑，做好要裸露进去的办法。
封装结束了，间接调用即可
18、vue 首屏白屏如何解决？
1）路由懒加载
2）vue-cli 开启打包压缩 和后盾配合 gzip 拜访
3）进行 cdn 减速
4）开启 vue 服务渲染模式
5）用 webpack 的 externals 属性把不须要打包的库文件拆散进来，缩小打包后文件的大小
6）在生产环境中删除掉不必要的 console.log
plugins: [

new webpack.optimize.UglifyJsPlugin({ // 增加 - 删除 console.log
  compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
  },
  sourceMap: true
}),7）开启 nginx 的 gzip , 在 nginx.conf 配置文件中配置

http {// 在 http 中配置如下代码，
gzip on;
gzip_disable “msie6”;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #压缩级别
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不压缩临界值
gzip_types text/plain application/javascript application/x-javascript text/css

application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

}8）增加 loading 成果，给用户一种进度感触
19、vue 中的 v -cloak 的了解？
应用 v-cloak 指令设置款式，这些款式会在 Vue 实例编译完结时，从绑定的 HTML 元素上被移除。
个别用于解决网页闪屏的问题，在对一个的标签中应用 v -cloak，而后在款式中设置 [v-cloak] 款式,[v-cloak]需写在 link 引入的 css 中，或者写一个内联 css 款式，写在 import 引入的 css 中不起作用。
20、vue 中 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 节点，外面有（标签名、子节点、文本等等）
21、v-model 的了解？
答：v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背地就做了两个操作：
1）v-bind 绑定一个 value 属性；
2）v-on 指令给以后元素绑定 input 事件
22、computed 和 watch 的用法和区别？
computed
1）变量不在 data 中定义，而是定义在 computed 中，写法跟写办法一样，有返回值。函数名间接在页面模板中渲染，不加小括号。
2）依据传入的变量的变动 进行后果的更新。
3）计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因而进步了程序的性能。而 methods 中每调用一次就会从新计算一次，为了进行不必要的资源耗费，抉择用计算属性。
watch
1）计算属性的时候 初始化的时候就能够被监听到并且计算 然而 watch 是产生扭转的时候才会触发。
2）当有一些数据须要随着其它数据变动而变动时，或者当须要在数据变动时执行异步或开销较大的操作时，应用 watch。
总结：
1）计算属性变量在 computed 中定义，属性监听在 data 中定义。
2）计算属性是申明式的形容一个值依赖了其余值，依赖的值扭转后从新计算结果更新 DOM。属性监听的是定义的变量，当定义的值发生变化时，执行绝对应的函数。
23、$nextTick 的应用？
答：在 vue 中了解批改数据后，对应的 dom 须要肯定的工夫进行更新，因而为了可能精确的后去更新后的 dom，能够采纳提早回调的办法进行更新 dom 的获取，所以呈现了 $nextTick 来进行提早回调。即：在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，获取更新后的 DOM。
24、data 为什么是一个函数？
答：这是有 JavaScript 的个性所导致，在 component 中，data 必须以函数的模式存在，不能够是对象。
组建中的 data 写成一个函数，数据以函数返回值的模式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有本人公有的数据空间，它们只负责各自保护的数据，不会造成凌乱。而单纯的写成对象模式，就是所有的组件实例共用了一个 data，这样改一个全都改了。
25、vue 单页面和传统的多页面区别？
单页面利用（SPA）
艰深一点说就是指只有一个主页面的利用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都蕴含在这个所谓的主页面中。但在写的时候，还是会离开写（页面片段），而后在交互的时候由路由程序动静载入，单页面的页面跳转，仅刷新部分资源。多利用于 pc 端。
多页面（MPA）
指一个利用中有多个页面，页面跳转时是整页刷新
单页面的长处：
用户体验好，快，内容的扭转不须要从新加载整个页面，基于这一点 spa 对服务器压力较小；前后端拆散；页面成果会比拟炫酷（比方切换页面内容时的专场动画）。
单页面毛病：
不利于 seo；导航不可用，如果肯定要导航须要自行实现后退、后退。（因为是单页面不能用浏览器的后退后退性能，所以须要本人建设堆栈治理）；首次加载时耗时多；页面复杂度进步很多。
26、vue 罕用的修饰符？
.stop：等同于 JavaScript 中的 event.stopPropagation()，避免事件冒泡；.prevent：等同于 JavaScript 中的 event.preventDefault()，避免执行预设的行为（如果事件可勾销，则勾销该事件，而不进行事件的进一步流传）；.capture：与事件冒泡的方向相同，事件捕捉由外到内；.self：只会触发本人范畴内的事件，不蕴含子元素；.once：只会触发一次。
27、vue 更新数组时触发视图更新的办法？
答：push()；pop()；shift()；unshift()；splice()；sort()；reverse()
28、route 和 router 的区别？
$router
router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter)和 VueRouter 构造函数失去一个 router 的实例对象，这个对象中是一个全局的对象，他蕴含了所有的路由蕴含了许多要害的对象和属性, 常见的有：
1）push：向 history 栈增加一个新的记录，当咱们点击浏览器的返回按钮时能够看到之前的页面
// 字符串
this.$router.push(‘home’)
// 对象
this.$router.push({path: ‘home’})
// 命名的路由
this.$router.push({name: ‘user’, params: { userId: 123}})
// 带查问参数，变成 /register?plan=123
this.$router.push({path: ‘register’, query: { plan: ‘123’}})2）go：页面路由跳转 后退或者后退
// 页面路由跳转 后退或者后退
this.$router.go(-1) // 后退 3）replace：push 办法会向 history 栈增加一个新的记录，而 replace 办法是替换以后的页面，不会向 history 栈增加一个新的记录
$route
&dollar;route 对象示意以后的路由信息，蕴含了以后 URL 解析失去的信息。蕴含以后的门路、参数、query 对象等。
1）&dollar;route.path：字符串，对该当前路由的门路，总是解析为绝对路径，如 “/foo/bar”。
2）&dollar;route.params：一个 key/value 对象，蕴含了 动静片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
3）&dollar;route.query：一个 key/value 对象，示意 URL 查问参数。例如，对于门路 /foo?user=1，则有 $route.query.user == 1，如果没有查问参数，则是个空对象。
4）&dollar;route.hash：以后路由的 hash 值 (不带 #)，如果没有 hash 值，则为空字符串。
5.&dollar;route.fullPath：实现解析后的 URL，蕴含查问参数和 hash 的残缺门路。
6&dollar;route.matched：数组，蕴含以后匹配的门路中所蕴含的所有片段所对应的配置参数对象。
7.&dollar;route.name：以后门路名字
8.&dollar;route.meta：路由元信息
29、vue-router 实现懒加载的形式？
vue 异步组件
vue 异步组件技术 ==== 异步加载
vue-router 配置路由 , 应用 vue 的异步组件技术 , 能够实现按需加载。然而, 这种状况下一个组件生成一个 js 文件
/ vue 异步组件技术 /
{
path: ‘/home’,
name: ‘home’,
component: resolve => require([‘@/components/home’],resolve)
},{
path: ‘/index’,
name: ‘Index’,
component: resolve => require([‘@/components/index’],resolve)
},{
path: ‘/about’,
name: ‘about’,
component: resolve => require([‘@/components/about’],resolve)
}es 提案的 import()
路由懒加载 (应用 import)
// 上面 2 行代码，没有指定 webpackChunkName，每个组件打包成一个 js 文件。
/* const Home = () => import(‘@/components/home’)
const Index = () => import(‘@/components/index’)
const About = () => import(‘@/components/about’) */
// 上面 2 行代码，指定了雷同的 webpackChunkName，会合并打包成一个 js 文件。把组件按组分块
const Home = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/home’)
const Index = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/index’)
const About = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/about’){
path: ‘/about’,
component: About
}, {
path: ‘/index’,
component: Index
}, {
path: ‘/home’,
component: Home
}webpack 的 require,ensure()
vue-router 配置路由，应用 webpack 的 require.ensure 技术，也能够实现按需加载。这种状况下，多个路由指定雷同的 chunkName，会合并打包成一个 js 文件。
/ 组件懒加载计划三: webpack 提供的 require.ensure() /
{
path: ‘/home’,
name: ‘home’,
component: r => require.ensure([], () => r(require(‘@/components/home’)), ‘demo’)
}, {
path: ‘/index’,
name: ‘Index’,
component: r => require.ensure([], () => r(require(‘@/components/index’)), ‘demo’)
}, {
path: ‘/about’,
name: ‘about’,
component: r => require.ensure([], () => r(require(‘@/components/about’)), ‘demo-01’)
}30、delete 和 Vue.delete 删除数组的区别？
答：delete 只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。Vue.delete 间接删除了数组 扭转了数组的键值。
31、路由跳转和 location.href 的区别？
应用 location.href=’/url’ 来跳转，简略不便，然而刷新了页面；
应用路由形式跳转，无刷新页面，动态跳转；
32、vue 的 solt 的用法？
在子组件内应用非凡的简略说来就是：在子组件外部用 <slot></slot> 标签占位，当在父组件中应用子组件的时候，咱们能够在子组件中插入内容，而这些插入的内容则会替换 <slot></slot> 标签的地位。
当然：单个 solt 的时候能够不对 solt 进行命名，如果存在多个 则一个能够不命名，其余必须命名，在调用的时候指定名称的对应替换 slot，没有指定的则间接默认无名称的 solt
33、$emit、$on、$once、$off 了解？
$emit
触发以后实例上的自定义事件（并将附加参数都传给监听器回调）
$on
监听实例上自定义事件并调用回调函数，监听 emit 触发的事件
$once
监听一个自定义事件，然而只触发一次，在第一次触发之后移除监听器。
$off
用来移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。
这四个办法的实现原理是：通过对 vue 实例挂载，而后别离应用对象存储数组对应的函数事件，其中 emit 通过循环查找存储的数组中对应的函数进行调用，once 只匹配一次就就完结，on 是将对应的函数存储到数组中，off 是删除数组中指定的元素或者所有的元素事件。具体能够参考文章：VUEemit 实现
34、$root、$refs、$parent 的应用？
$root
能够用来获取 vue 的根实例，比方在简略的我的项目中将公共数据放再 vue 根实例上 (能够了解为一个全局 store), 因而能够代替 vuex 实现状态治理；
$refs
在子组件上应用 ref 个性后，this. 属性能够间接拜访该子组件。能够代替事件 emit 和 $on 的作用。
应用形式是通过 ref 个性为这个子组件赋予一个 ID 援用，再通过 this.$refs.testId 获取指定元素。
留神：$refs 只会在组件渲染实现之后失效，并且它们不是响应式的。这仅作为一个用于间接操作子组件的“逃生舱”——你应该防止在模板或计算属性中拜访 $refs。
$parent
$parent 属性能够用来从一个子组件拜访父组件的实例，能够代替将数据以 prop 的形式传入子组件的形式；当变更父级组件的数据的时候，容易造成调试和了解难度减少；
35、vue 开发遇到的问题？
1）款式净化
答：在编写款式中，如果须要避免款式的净化，能够应用两种形式，一种是在组件的根元素上减少一个惟一的 class 或者 id，而后在编写组件的款式时候在根元素对应的 class 或者 id 下进行编写；另一种形式是在对应的 style 上增加 scoped 关键字，不过该关键字对援用的框架 UI 有效
2）router-link 在安卓上不起作用
答：不起作用的起因是因为转码编译的问题，能够应用 babel 来进行解决，装置 babel polypill 插件解决
3）初始化页面呈现闪屏乱码的问题
答：这是因为 vue 还没有解析的状况下会容易呈现花屏景象，看到相似于 {{data}} 的字样，能够应用两种形式来进行解决，一种为：在设置 index.html 的根元素的元素的款式为 display:none，而后在 mounted 中的 $nextTick 函数中 display:block 展现；另一种形式是应用 vue 的内置指令：v-cloak, 并且在 css 中设置款式
[v-cloak] {

display: none;  

}
4）router-link 上事件有效解决办法
答：应用 @click.native 来进行调用原生的 js 事件。起因：router-link 会阻止 click 事件，.native 指间接监听一个原生事件。