watch 和 computed 区别

  • watch 是监听动作，computed 是计算属性
  • watch 没缓存，只要数据变化就执行。computed 有缓存，只在属性变化的时候才去计算。
  • watch 可以执行异步操作，而 computed 不能
  • watch 常用于一个数据影响多个数据，computed 则常用于多个数据影响一个数据

讲一下 Vue 的生命周期？

创建期间的生命周期函数：

  • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
  • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。
    • 换句话说，此时页面中的类似 {{msg}} 这样的语法还没有被替换成真正的数据。
  • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示【可以获取 DOM 节点 | 发起异步请求】
    • 用户已经可以看到渲染好的页面了

运行期间的生命周期函数：

  • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
  • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue 的父组件和子组件生命周期钩子执行顺序是什么

  1. 加载渲染过程
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  2. 子组件更新过程
    父beforeUpdate->子beforeUpdate->子updated->父updated
  3. 父组件更新过程
    父beforeUpdate->父updated
  4. 销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结：从外到内，再从内到外

Vue 中父组件如何监听子组件的生命周期？

v-on / $emit

<child-comp @child-event="handleChildEvent"></child-comp></div>
Vue.component('child-comp', {template: '',data: function () {return {childMsg: 'Hello, I am Child'};},methods: {},mounted() {this.$emit('child-event');}});const app = new Vue({el: '#app',data: function () {return {parentData: 'parent Message'};},beforeCreate: function () {console.log('before created');},methods: {handleChildEvent() {console.log('child mounted');}}});

在子组件中的 mounted 钩子函数中调用 this.$emit("child-event"); 向父组件发送 child-event 消息。 父组件 @child-event="handleChildEvent" 监听了此消息。

@hook

假如我们这里的子组件是外部的，是不可更改的。那我们父组件监听这个外部子组件中的生命周期钩子函数怎么办呢?

<div id="app"><child-comp @hook:mounted="handleChildEvent"></child-comp></div>
Vue.component('child-comp', {template: '',data: function () {return {childMsg: 'Hello, I am Child'};},methods: {},mounted() {//this.$emit("child-event");}});const app = new Vue({el: '#app',data: function () {return {parentData: 'parent Message'};},beforeCreate: function () {console.log('before created');},methods: {handleChildEvent() {console.log('child mounted');}}});

把子组件中的 mounted 钩子函数中的 $emit 方法去掉， 在父组件中使用 @hook:mounted

更多阅读

  • 包你理解—vue 的生命周期

组件

现在有个父子组件，我希望在父级中给子组件绑定一个原生click事件，这个事件会被触发吗？

<div id='app'><my-button @click='change'></my-button></div><script> export default {methods: {change() {alert(1)}} }</script>

答：不能，绑定的该click事件会被当做组件上的一个普通属性看待，如果想要使click事件生效，可以使用 @click.native='change' 的方式来实现。

为什么Vue实例对象中的data直接是个对象，而组件内的data是个函数，且返回一个对象？

因为组件中是 data:{} 的话，这个 {} 是个对象，引用类型。如果多处地方引用同一个组件的话，则共享同一个data对象，这是不合理的。所以需要每次使用组件时，return一个新的对象，这样就不会共享了。

组件间如何通讯？

  • props/$emit+v-on: 通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。
  • EventBus: 通过EventBus进行信息的发布与订阅
  • vuex: 是全局数据管理库，可以通过vuex管理全局的数据流
  • $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以进行跨级的组件通信
  • provide/inject：以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效，这成为了跨组件通信的基础

Vue 组件间通信六种方式

this.$emit 的返回值是什么？如果需要返回值该怎么办？

this.$emit 的返回值就是 this ，即当前子组件 VueComponent 。

如果想要有返回值可以如下操作：

子组件

<template><input :value="name" @change="handleChange" /></template><script>export default {props: ['name'],methods: {handleChange(e) {const res = this.$emit("Echange", e.target.value, val => {console.log(val);});console.log(res, res === this);},}}</script>

父组件

<template><Child :name='name' @Echange="handleEventChange" /></template><script>export default {data() {return {name: '',}}methods: {handleEventChange(val, callback) {this.name = valcallback("hello")return 'hello'}}}</script>

filter 过滤器

filter中的this是什么？

this是undefined，在filter中拿不到vue实例。filter应该是个纯函数，不应该依赖外界或者对外界有所影响。如果需要用到this，可以用 computed 或者 method 代替。

vue 指令

能讲下 v-if 和 v-show 的区别吗？

  • v-if: 是否加载这个元素（一次性的）
  • v-show：控制显示方式block or none（需要切换的，侧边栏）

因此：如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好

v-for 你使用过程中，有遇到什么问题或者关注点吗？

  1. 避免将 v-if 和 v-for 放在同一个元素上，因为 v-for 优先级比 v-if 更高。例如要渲染 todo 列表中未完成的任务，给 li 标签同时写上 v-for 和 v-if 后会导致每次重新渲染都得遍历整个列表。优化方案是把需要遍历的 todoList 更换为在计算属性上遍历过滤。（Vue文档有详细说明）
  2. 给 v-for 设置键绑定键值 key。理由见下。

在列表组件中添加 key 属性的作用？

key的主要作用就是在更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。这样可以更高效的更新虚拟 DOM。

另外如果给列表组件设置了过渡效果，不添加key属性会导致过渡效果无法触发。因为不添加key会导致vue无法区分它们，导致只会替换节点内部属性而不会触发过渡效果。

为什么不建议用 index 作为 key 呢？

更新DOM时会出现性能问题

例如我们在使用index作为key值时想要下面列表进行倒序排列：

<li key='0'>React</li><li key='1'>Vue</li><li key='2'>Angular</li><li key='0'>Angular</li><li key='1'>Vue</li><li key='2'>React</li>

vue这个时候仅会调换第一和第三项的文本，li元素则不会调换顺序，因为vue发现key值也就是index没变化。而这会导致li里面的文本重新渲染，影响性能。

而如果采用 id 作为 key，则仅仅需要移动下DOM就OK了，并不需要重新渲染DOM：

<li key='react'>React</li><li key='vue'>Vue</li><li key='angular'>Angular</li><li key='angular'>Angular</li><li key='vue'>Vue</li><li key='react'>React</li>

会发生一些状态bug

还是以上面例子为例，给每个li元素中加一个checkbox：

<li key='react'><input type='checkbox'>React</li><li key='vue'><input type='checkbox'>Vue</li><li key='angular'><input type='checkbox'>Angular</li>

如果采用 index 作为 key，选中状态会出现bug（左边列表采用index，右边采用id形式）：

原因也是 index 没有变化被复用了，导致选中状态永远都是 index=0 的第一项。

阅读更多：

  • 避免 v-if 和 v-for 用在一起
  • 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
  • Vue2.0 v-for 中 :key 到底有什么用？
  • Vue：为什么使用v-for时必须添加唯一的key？为什么不宜用index作为key？

数据响应式（双向绑定）怎么做到的？

原理：Vue 采用 数据劫持 结合 发布者-订阅者 模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 以及 getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

  1. 第一步：需要 Observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
  2. 第二步：Compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新数据。
  3. 第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情有：
    1. 在自身实例化时往属性订阅器（dep）里面添加自己
    2. 自身必须有一个 update() 方法
    3. 待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
  4. 第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的桥梁，达到数据变化 -> 视图更新；视图交互变化（input） -> 数据 model 变更的双向绑定效果。

参考：

追问1：那如果我要监听一个对象属性的删除或添加呢？

受 defineProperty 限制，Vue 无法检测对象属性的删除和添加。所以我们可以利用 Vue 提供的 Vue.set 来解决此问题。

例子：

有一个obj:{a:1}，想要this.obj.b=233，不会触发视图更新Vue.set(this.obj, 'b', 233) or this.$set(this.obj, 'b', 233)

追问2：为什么对象属性的删除或添加无法触发页面更新

因为 vue 在实例化过程中，深度遍历了 data 下所有属性, 把属性全转为 getter/setter 。这样才能监听属性变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

当你在对象上新加了一个属性 newProperty ，当前新加的这个属性并没有加入 vue 检测数据更新的机制（因为是在初始化之后添加的）, vue.$set 是能让 vue 知道你添加了属性, 它会给你做处理。

js 实现简单的双向绑定

<body><div id="app"><input type="text" id="txt"><p id="show"></p></div><script>window.onload = function () {let obj = {};window.obj = objObject.defineProperty(obj, "txt", {get: function () {return obj;},set: function (newValue) {document.getElementById("txt").value = newValue;document.getElementById("show").innerHTML = newValue;}})document.addEventListener("keyup", function (e) {obj.txt = e.target.value;})}</script></body>

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

  1. Vue 中使用 Object.defineProperty 进行双向数据绑定时，告知使用者是可以监听数组的，但是只是监听了数组的 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 这八种方法，其他数组的属性检测不到。
  2. Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
  3. Object.defineProperty 只能劫持对象的属性，因此对每个对象的属性进行遍历时，如果属性值也是对象需要深度遍历，那么就比较麻烦了，所以在比较 Proxy 能完整劫持对象的对比下，选择 Proxy。
  4. Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

Vue模板渲染的原理是什么？

vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。

模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。

  • parse阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
  • optimize阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。
  • generate阶段：将最终的AST转化为render函数字符串。

来源：https://juejin.im/post/6870374238760894472

Vuex 用过吗？

Vuex 是专为 Vue 应用程序开发的状态管理工具，相当于共享仓库，方便任何组件直接获取和修改。

  • state – 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】
    • $store.state.count
  • mutations – 方法【同步函数】
    • inc(state, 参数唯一) {}
    • $store.commit(‘inc’, 2)
  • getters – 包装数据 【store的计算属性，可缓存】
    • show: function(state) {}
    • this.$store.getters.show
    • 传参，返回函数：show(state) {return function(参数) {return …}}【不会缓存数据】
  • actions -【异步操作】【提交的是mutations，不直接修改状态】
    • increment(context, num) {context.commit()}
    • this.$store.dispatch(‘’,arg)

使用 Vuex 管理数据，与直接在全局window下定义变量相比，有什么区别或者说优势？

全局作用域下定义的数据是静态的，只能通过手动修改，修改后数据变了，但使用这些数据的组件并不会重新渲染，也必须得手动渲染。而且全局作用域下定义太多变量还容易造成变量污染。

Vuex 只要 store 中的数据更新，就会立即渲染所有使用 store 数据的组件。Vuex 使用单向数据流，要想修改 store 数据需要经过 action 层，mutation 层，层次划分明确，便于管理。

Vuex 是通过什么方式提供响应式数据的？

在 Store 构造函数中通过 new Vue({}) 实现的。利用 Vue 来监听 state 下的数据变化，给状态添加 getter、setter。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

Vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件。

VueRouter 是什么？你平常是怎么用的？

  • 是什么：Vue-Router 是 Vue 官方的路由管理器

  • 作用：为了页面跳转

  • 原理：监听锚点值改变，渲染指定页面

    <div class="h">我是头部</div><div id="content" class="b"></div><div class="f">我是底部</div><script type="text/javascript">//监视锚点值的改变window.addEventListener('hashchange', function() {var text = '';switch (location.hash) {case '#/music':text = '各种音乐的数据';break;case '#/movie':text = '各种电影的数据';break;}document.getElementById('content').innerHTML = text;})</script>

动态路由

查询字符串：

  1. 去哪（列表页传参） xxx
  2. 导航（router中） { name:‘detail’ , path:‘/detail’, component: Detail }
  3. 去了干嘛（详情页接收参数）this.$route.query.id

path方式：

  1. 去哪里 xxx
  2. 导航 { name:‘detail’ , path:‘/detail/:name’, component: Detail}
  3. 去了干嘛（获取路由参数）this.$route.params.name

编程式导航

// name配params：this.$router.push({name: 'Goods', params: {goodsId:id}})// path配query：this.$router.push({path: '/goods', query: {goodsId:id}})// 参数接收匹配：this.goodsId = this.$route.query.goodsIdthis.goodsId = this.$route.params.goodsId

路由守卫

  • 全局守卫：beforeEach, beforeResolve, afterEach【没有next】
  • 路由独享守卫：beforeEnter
  • 组件内守卫：beforeRouteEnter【唯一next有回调】, Update, Leave

应用

  • 全局守卫：beforeEach（用户登录以及权限判定）

    router.beforeEach((to, from, next) => {const isLogin = localStroage.token// 个人中心需要登录if (to.name === 'Member') {isLogin " />next() : next('/login')} else {next()}})

  • 组件内守卫：beforeRouteEnter（根据用户从何而来，修改当前组件标题）

    // 详情页组件beforeRouteEnter(to, from, next) {let title = ''title = from.name === 'news.list' ? '新闻详情' : '商品详情'// 一定要调用 next ，否则无法从列表页跳转到详情页next(vm => vm.title = title) // 通过 vm 访问组件实例}

讲一下完整的Vue路由生命周期

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

实现一个简单路由

// hash路由class Route{constructor(){// 路由存储对象this.routes = {}// 当前hashthis.currentHash = ''// 绑定this，避免监听时this指向改变this.freshRoute = this.freshRoute.bind(this)// 监听window.addEventListener('load', this.freshRoute, false)window.addEventListener('hashchange', this.freshRoute, false)}// 存储storeRoute (path, cb) {this.routes[path] = cb || function () {}}// 更新freshRoute () {this.currentHash = location.hash.slice(1) || '/'this.routes[this.currentHash]()}}

vue脚手架生成的 router.js 中，有一段 base: process.env.BASE_URL 配置，你知道它引用了谁的路径么？

const router = new Router({mode: 'history',base: process.env.BASE_URL, // <-...

它会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的线上/开发环境的基础路径：

const path = require('path')module.exports = {// 旧版叫做baseURL// 线上/开发环境的路径配置publicPath: process.env.NODE_ENV === 'production' ? 'http://你的线上环境' : '/',

你是如何使用插槽的？

  • 默认插槽：父html模板 | 子
  • 具名插槽：父 | 子
  • 作用域插槽：父 | 子提供数据

阅读更多：深入理解vue中的slot与slot-scope

相同名称的插槽是合并还是替换？

  • Vue 2.5版本，匿名和具名插槽都是合并，作用域插槽是替换
  • Vue 2.6版本，都是替换（因为新版底层原理一样）

nextTick的更新原理

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

nextTick的回调函数会等到同步任务执行完毕，DOM更新后才触发。

阅读更多：Vue.nextTick 的原理和用途

让你自己实现一个nextTick,说说你的思路？（TODO）

待续…

在 Vue 中，子组件为何不可以修改父组件传递的 Prop

为了保证数据的单向流动，便于对数据进行追踪，避免数据混乱。官网有详细的信息 prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

设想一个场景，某个父组件下不只使用了一个子组件。而且都使用到了这份 prop 数据，那么一旦某个子组件更改了这个prop数据，会连带着其他子组件的prop数据也被更改。这会导致数据混乱，而且由于修改数据的源头不止一处，在出错后debug时难以定位错误原因。

所以我们需要将修改数据的源头统一为父组件，子组件想要改 prop 只能委托父组件帮它。从而保证数据修改源唯一

另外 props 传入的值如果对象的话，是可以直接在子组件里更改的，因为是同一个引用。

如果修改了，Vue 是如何监控到属性的修改并给出警告的

下面的代码就是实现Vue提示修改props的操作，在组件 initProps 方法的时候，会对props进行defineReactive操作，传入的第四个参数是自定义的set函数，该函数会在触发props的set方法时执行，当props修改了，就会运行这里传入的第四个参数，然后进行判断，如果不是root根组件，并且不是更新子组件，那么说明更新的是props，所以会警告

// src/core/instance/state.js 源码路径function initProps (vm: Component, propsOptions: Object) {const propsData = vm.$options.propsData || {}const props = vm._props = {}// cache prop keys so that future props updates can iterate using Array// instead of dynamic object key enumeration.const keys = vm.$options._propKeys = []const isRoot = !vm.$parent// root instance props should be convertedif (!isRoot) {toggleObserving(false)}for (const key in propsOptions) {keys.push(key)const value = validateProp(key, propsOptions, propsData, vm)/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {const hyphenatedKey = hyphenate(key)if (isReservedAttribute(hyphenatedKey) ||config.isReservedAttr(hyphenatedKey)) {warn(`"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,vm)}defineReactive(props, key, value, () => {if (!isRoot && !isUpdatingChildComponent) {warn(`Avoid mutating a prop directly since the value will be ` +`overwritten whenever the parent component re-renders. ` +`Instead, use a data or computed property based on the prop's ` +`value. Prop being mutated: "${key}"`,vm)}})} else {defineReactive(props, key, value)}// static props are already proxied on the component's prototype// during Vue.extend(). We only need to proxy props defined at// instantiation here.if (!(key in vm)) {proxy(vm, `_props`, key)}}toggleObserving(true)}// src/core/observer/index.js/** * Define a reactive property on an Object. */export function defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean) {const dep = new Dep()const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) {return}// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) && arguments.length === 2) {val = obj[key]}let childOb = !shallow && observe(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value = getter ? getter.call(obj) : valif (Dep.target) {dep.depend()if (childOb) {childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal === value || (newVal !== newVal && value !== value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()}// #7981: for accessor properties without setterif (getter && !setter) returnif (setter) {setter.call(obj, newVal)} else {val = newVal}childOb = !shallow && observe(newVal)dep.notify()}})}

如果传入的props是基本数据类型，子组件修改父组件传的props会警告，并且修改不成功，如果传入的是引用数据类型，那么修改引用数据类型的某个属性值时，对应的props也会修改，并且vue不会报警告。

虚拟DOM

什么是虚拟DOM

Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构，之所以需要虚拟DOM，是因为浏览器中操作DOM的代价比较昂贵，频繁操作DOM会产生性能问题。虚拟DOM的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue对比更新前后的虚拟DOM，匹配找出尽可能少的需要更新的真实DOM，从而达到提升性能的目的。

来源：https://juejin.im/post/6870374238760894472

虚拟DOM实现原理?

  • 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
  • 状态变更时，记录新树和旧树的差异
  • 最后把差异更新到真正的dom中

详细实现见虚拟DOM原理?

虚拟DOM的优劣如何?

优点:

  • 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
  • 无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
  • 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

缺点:

  • 无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化

Vue项目能进行哪些性能优化

链接：https://juejin.im/post/6857856269488193549

其它

vue 的优点是什么？

  • 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的”View”上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
  • 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
  • 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
  • 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

当执行 import vue from ‘vue’ 时发生了什么？

平时开发中，经常会用到这样一个语句：

import Vue from 'vue';

由于浏览器兼容性问题，通常这个语法是在 webpack 的构建流搭建的项目中执行的，那么这个语句到底做了什么呢？

其实在 nodejs 中，执行 import 就相当于执行了 require，而 require 被调用，其实会用到 require.resolve 这个函数来查找包的路径，而这个函数在 nodejs 中会有一个关于优先级的算法。先看一下 import Vue from 'vue' 这一句做了什么：

  1. import Vue from 'vue' 解析为 const Vue = require('vue')。
  2. require 判断 vue 是否未 nodejs 核心包，如我们常用的：path，fs 等，是则直接导入，否则继续往下走。
  3. vue 非 nodejs 核心包，判断 vue 是否未 ‘/’ 根目录开头，显然不是，继续往下走。
  4. vue 是否为 ‘./’、‘/’ 或者 ‘…/’ 开头，显然不是，继续往下走。
  5. 以上条件都不符合，读取项目目录下 node_modules 包里的包。

到了第五步，import Vue from 'vue' 就找到了 vue 所在的实际位置了，那么问题来了，node_modules 下的 vue 是一个文件夹，而引入的 Vue 是一个 javascript 对象，那它是怎么取到这个对象呢？

其实对于一个 npm 包，内部还有一个文件输出的规则，先看下 node_modules/vue 下的文件结构是怎么样的：

├── LICENSE├── README.md├── dist├── package.json├── src└── types

是不是看起来很笼统，其实对于 npm 包，require 的规则是这样的：

  1. 查找 package.json 下是否定义了 main 字段，是则读取 main 字段下定义的入口。
  2. 如果没有 package.json 文件，则读取文件夹下的 index.js 或者 index.node。
  3. 如果都 package.json、index.js、index.node 都找不到，抛出错误 Error: Cannot find module 'some-library'。

那么看一下 vue 的 package.json 文件有这么一句：

{..."main": "dist/vue.runtime.common.js",...}

到这里就很清晰了：

import vue from 'vue';// 最后转换为const vue = require('./node_modules/vue/dist/vue.runtime.common.js');

而 vue.runtime.common.js 文件的最后一行是：module.exports = Vue;，就正好跟我们平时使用时的 new Vue({}) 是一致的，这就是 import vue from 'vue' 的过程了。

当然，这个是我们平时使用得最多的导入方式，还有其他一些导入规则，都可以在 nodejs 的文档 中找到。

文章来源：https://www.jianshu.com/p/fad3688cbd81

Vue 和 jQuery 有什么区别？

jQuery是使用选择器（ ）选取 D O M 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象，而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容：）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“label”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定，也就是MVVM。

谈谈你对 MVVM 开发模式的理解

  • Model 数据模型层，保存页面中的数据
  • View 视图层，页面数据的展示；
  • ViewModel M，V调度者。双向数据绑定。通过监听 Model 数据的改变来控制V的更新，处理用户交互操作；

M 数据改变 =>VM => 触发 View 更新

V 用户操作 => VM => M 数据同步更新

开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom 。

请你讲一下Vue项目中使用token登录的具体流程

对 token 完全不了解的同学可以查看我博客中转载的 这篇文章 。

不想看长篇大论的我这里简单描述下基于 token 身份验证的整个流程：

  1. 用户通过账户名和密码发送登录请求
  2. 服务端对账户的有效性进行验证
  3. 验证成功后再利用「密钥」和「加密算法」（如：HMAC-SHA256）对「用户数据」（如账号信息）做一个签名的 token 返回给客户端
  4. 客户端本地存储 token ，并在每次请求的 header 中带上 token
  5. 服务端验证 token 并返回数据

对于 Vue 项目来说，具体流程如下：

  1. 客户端：登录页带上用户名和密码请求登录接口
  2. 服务端：接收请求并在数据库中查询账户的有效性
  3. 服务端：查询通过后利用「密钥」和「加密算法」对「用户数据」做签名 token 并返回给客户端此 token （此 token 有时效性）
  4. 客户端：本地存储 token（如 localStorage + Vuex）
  5. 客户端：每次路由跳转前都要判断 localStorage 是否存在 token ，有则正常跳转，无则跳转回登录页
  6. 客户端：每次发送请求时，在 Axios 请求头里携带上 token
  7. 服务端：接收请求并判断请求头有无 token ，有且 token 没有过期，正常返回数据；无或 token 失效返回 401 状态码
  8. 客户端：一旦发现 401 则重定向到登录页

一般回答完毕后面试官还会追问一些细节，这里列举两个常问的：

  1. 你是如何利用 Axios 实现携带 token 以及 401 状态码判定的？

    利用 Axios 的请求/响应拦截。使用 axios.interceptors.request.use 进行请求拦截，判断 localStorage 是否有 token ，有则在请求头里携带 token 。使用 axios.interceptors.response.use 进行响应拦截，判断 response.status 是否为 401 ，是则代表 token 失效，清空本地 token ，跳转登录页

  2. 你是如何监控路由跳转，并在没有 token 时跳转回登录页的？

    使用 Vue Router 的全局路由守卫 router.beforeEach ，该方法接收三个参数：to、from 和 next ，如果用户访问的是不需要登录就能访问的页面（如 to.path === ‘/login’），则直接跳转。否则判断本地是否有 token ，有则调用 next() ，无则 next(‘/login’) 跳转回登录页

SPA 的缺点有哪些，如何解决？

  • 不利于SEO
  • 首屏渲染时间过长

vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？

首页白屏的原因：
单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏

解决办法：

  • 1.将公用的JS库通过script标签外部引入，减小app.bundle的大小，让浏览器并行下载资源文件，提高下载速度；
  • 2.在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundle 的体积，在调用某个组件时再加载对应的js文件；
  • 3.上骨架屏或loading动画，提升用户体验；
  • 4.合理使用web worker优化一些计算
  • 5.缓存一定要使用，但是请注意合理使用
  • 6.最后可以借助一些工具进行性能评测，重点调优，例如chrome开发者工具的 performance 或 Google PageSpeed Insights 插件协助测试。

说说Vue2.0和Vue3.0有什么区别

  1. 重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：

  • 可直接监听数组类型的数据变化

  • 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升

  • 可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行

  • 直接实现对象属性的新增/删除

  1. 新增Composition API，更好的逻辑复用和代码组织

  2. 重构 Virtual DOM

  • 模板编译时的优化，将一些静态节点编译成常量
  • slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
  • 模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）

  1. 代码结构调整，更便于Tree shaking，使得体积更小

  2. 使用 Typescript 替换 Flow

为什么要新增Composition API，它能解决什么问题

Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是Vue的API设计迫使开发者使用watch，computed，methods选项组织代码，而不是实际的业务逻辑。

另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用，但是当mixin变多的时候，会使得难以找到对应的data、computed或者method来源于哪个mixin，使得类型推断难以进行。

所以Composition API的出现，主要是也是为了解决Option API带来的问题，第一个是代码组织问题，Compostion API可以让开发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他自己写的代码时，他可以更好的利用代码的组织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码。

第二个是实现代码的逻辑提取与复用，当然mixin也可以实现逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个组件时，很难看出property是来源于哪个mixin，来源不清楚，另外，多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。

SSR有了解吗？原理是什么？

在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，并且在服务器内部将Vue组件渲染成HTML，并且将数据、HTML一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程，叫做服务端渲染SSR。

而当客户端拿到服务器渲染的HTML和数据之后，由于数据已经有了，客户端不需要再一次请求数据，而只需要将数据同步到组件或者Vuex内部即可。除了数据以外，HTML也结构已经有了，客户端在渲染组件的时候，也只需要将HTML的DOM节点映射到Virtual DOM即可，不需要重新创建DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活。

使用SSR的好处：

  • 有利于SEO：其实就是有利于爬虫来爬你的页面，因为部分页面爬虫是不支持执行JavaScript的，这种不支持执行JavaScript的爬虫抓取到的非SSR的页面会是一个空的HTML页面，而有了SSR以后，这些爬虫就可以获取到完整的HTML结构的数据，进而收录到搜索引擎中。
  • 白屏时间更短：相对于客户端渲染，服务端渲染在浏览器请求URL之后已经得到了一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建DOM树就可以。而客户端渲染，需要先得到一个空的HTML页面，这个时候页面已经进入白屏，之后还需要经过加载并执行 JavaScript、请求后端服务器获取数据、JavaScript 渲染页面几个过程才可以看到最后的页面。特别是在复杂应用中，由于需要加载 JavaScript 脚本，越是复杂的应用，需要加载的 JavaScript 脚本就越多、越大，这会导致应用的首屏加载时间非常长，进而降低了体验感。

更多面试问答：

https://download.csdn.net/download/suli77/87425350