Vue相关知识点

var mixin = {
    data: function () {
        return {
            message: 'hello',
            foo: 'abc'
        }
    }
}
new Vue({
    mixins: [mixin],
    data: function () {
          return {
            message: 'goodbye',
            bar: 'def'
          }
    },
   created: function () {
            console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
   }
})

7、简单说说MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。 Model 代表数据模型，也可以在 Model 中定义数据修改和

操作的业务逻辑。 View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。 ViewModel 监听模型数

据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model

和 View 。在 MVVM 架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，

Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据

的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，

而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需

要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

8、watch和computed的区别

Watch 只能监听 data 中的数据变化， computed 不需要， watch 可以进行异步操作， computed 不可

以， computed 不修改原始数据，通过 return 返回处理的数据，可以包含大量的逻辑运算

9、v-if和v-show的区别

9.1 、 v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲

染，条件为假，元素会被销毁）；

9.2 、 v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

9.3 、 v-if 有更高的切换开销， v-show 切换开销小；

9.4 、 v-if 有配套的 v-else-if 和 v-else ，而 v-show 没有

9.5 、 v-if 可以搭配 template 使用，而 v-show 不行

10、为什么不能v-for和v-if一起使用

v-for 优先级是比 v-if 高

永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件

判断）

如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成 dom 节点），再这一层进行 v-if 判

断，然后再内部进行 v-for 循环

<template v-if="isShow">
    <p v-for="item in items">
</template>

如果条件出现再循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项

computed:{
    items:function(){
        return this.list.filter(function(item){
            return item.isShow
        })
    }
}

11、key的作用是什么，值写index和id哪个更好

key 是为每个 vnode 指定唯一的 id ，在同级 vnode 的 Diff 过程中，可以根据 key 快速的进行对比，来判断

是否为相同节点，利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快 , 指定 key 后 , 可以

保证渲染的准确性 ( 尽可能的复用 DOM 元素。 ) 赋值时应优先使用 id 。

12 、过滤器怎么使用

// 全局使用
Vue.filter('globalFilter', function(){
    // ...
})
// 局部使用
filters: {
    formatMoney(num) {
    // ...
    },
}
<p>过滤器{{ money | formatMoney }}</p>

13、vuex五大核心分别是干什么的

state ： Vuex 中的基本数据，辅助函数 mapState

getters ：即从 store 的 state 中派生出的状态，有点类似计算属性，辅助函数 mapGetters

mutations ：是更改 Vuex 中的 store 中的状态的唯一方法，是同步的，辅助函数 mapMutations

actions ： Action 提交的是 mutation ，而不是直接变更状态。 Action 可以包含任意异步操作。辅助函

数 mapActions

Modules ： Vuex 允许我们将 store 分割到模块（ module ）。每个模块拥有自己的 state 、

mutations 、 actions 、 getters 、甚至是嵌套子模块 —— 从上至下进行类似的分割

14、如何调用mutations和actions的方法

//调用mutations：$store.commit('mutations中定义的方法')
//调用actions：$store.dispatch('actions中定义的方法')
actions调用mutations中的方法：
fn(context){
    context.commit('mutations中定义的方法');
}

15、vue-router常写属性都有什么

router-link 常用属性：

to 表示目标路由的链接

replace 设置 replace 属性的话，当点击时，会调用 roter.replace() 而不是 router.push() ，所以导航后不

会留下 history 记录，也就是不能回退到上一个页面

append 设置 append 属性后，则在当前路径前添加基路径，例如，我们从 /a 导航到一个相对路径 b ，如

果没有配置 append ，则路径为 /b ，如果配了，则为 /a/b

tag 有时候想要渲染成某种标签，例如

。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

active-class 设置链接激活时使用的 css 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配

置 , 默认值为 ‘router-link-active‘

exact " 是否激活 " ，默认是 false 。

vue-router 常用属性：

path 路由路径

name 路由名字

component 导入路由组件

redirect 路由重定向

mode 路由模式

children 子路由

meta 路由元信息

16、路由守卫都有哪些以及都做过哪些事情，三个参数分别是干什么的

全局守卫： beforeEach （登录拦截）、 afterEach

路由独享守卫： beforeEnter （部分路由的登录拦截）

组件内守卫： beforeRouteEnter （权限管理）、 beforeRouteUpdate 、 beforeRouteLeave

路由全局解析守卫： beforeResolve （这里根据单页面 name 的指向不同，去访问的接口域名也不同）

三个参数： to ：去哪， from ：从哪来， next ：下一步

当从a页面离开进入b页面时触发的生命周期
1.beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
2.beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
3.beforeEnter: 路由独享守卫
4.beforeRouteEnter: 路由的组件进入路由前钩子。
5.beforeResolve:路由全局解析守卫
6.afterEach:路由全局后置钩子
7.beforeCreate:组件生命周期，不能访问this。
8.created:组件生命周期，可以访问this，不能访问dom。
9.beforeMount:组件生命周期
10.deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
11.mounted:访问/操作dom。
12.activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
13.执行beforeRouteEnter回调函数next。

17、hash和history模式的区别

hash 模式就是 url 后面写 # 锚点，由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变

会触发 hashchange 事件（ hashchange 只能改变 # 后面的 url 片段）；更关键的一点是，因为 hash 发

生变化的 url 都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，所以人们在 html5

的 history 出现前，基本都是使用 hash 来实现前端路由的

history 模式： hash 能兼容到 IE8 ， history 只能兼容到 IE10 ； hash 本来是拿来做页面定位的，如果拿

来做路由的话，原来的锚点功能就不能用了。其次， hash 的传参是基于 url 的，如果要传递复杂的数

据，会有体积的限制，而 history 模式不仅可以在 url 里放参数，还可以将数据存放在一个特定的对象

中。 history api 可以分为两大部分：切换（ back 、 forward 、 go ）和修改

（ pushState , replaceState ）。 history 模式的问题：就怕刷新，

18、说说常用指令有哪些，如何自定义指令

v-if ：如果是真则渲染节点，否则不渲染节点

v-if 、 v-else 和 v-else-if ：类似 js 的 if...else 判断语句

v-show ：通过 display:none; 控制元素显示隐藏

v-for ：循环， v-for 的优先级高于 v-if ，不推荐一起使用

v-bind ：绑定属性，

v-on ：绑定事件，

.stop 阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式 , 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

v-model ：数据双向绑定

.lazy 默认情况下， v-model 同步输入框的值和数据。可以通过这个修饰符，转变为在 change 事件再同

步。

.number 自动将用户的输入值转化为数值类型

.trim 自动过滤用户输入的首尾空格

v-text 和 v-html ：用来更新 textContent 和输出真正的 html 结构

v-pre ：主要用来跳过这个元素和它的子元素编译过程。

v-cloak ：保持在元素上直到关联实例结束时进行编译。

v-once ：关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳

过，这可以用于优化更新性能。

// 自定义指令 v-focus
directives: {
    focus: {
        // 指令的定义
        inserted: function(el) {
            el.focus();
        },
    },
},

19、vue插槽如何使用

// 比如新建一个<base-layout> 组件
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
// 使用插槽
<base-layout>
<template v-slot:header> // 或者 <template #header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
// 作用域插槽，比如新建一个<current-user>组件
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
// 使用插槽
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
// 或者缩写
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>

20、vue单页应用优缺点

优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应

的数据绑定系统。 MVVM 、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。只关心数据，

不关心 DOM 。插件众多。维护状态方便。

缺点：不支持低版本的浏览器，最低只支持到 IE9 ；不利于 SEO 的优化（如果要支持 SEO ，建议通过服

务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现

前进、后退。

21、为什么做SSR，如何实现

更好的 SEO ，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备。通常可以产生更好的用户体验。

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数中使用；一些外部扩展库可能需要特

殊处理，才能在服务器渲染应用程序中运行。

涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序

(SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境

更多的服务器端负载

通过后端返回 html 结构，在前端进行渲染展示，可使用 Nuxt 实现。

22、如何实现路由懒加载

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力

减少首页加载用时

component: () => import('./Foo.vue')
// 或者
component: resolve => require(['@/components/home'],resolve)

23、scoped的作用是什么

scoped 的意思是下面的样式的作用域就是当前这个组件，不会影响全局的样式

24、$router和$route的区别

$router 是路由跳转， $route 是路由信息

25、data:{}和data(){return {}} 的区别

因为不使用 return 包裹的数据会在项目的全局可见，会造成变量污染，使用 return 包裹后数据中变量只

在当前组件中生效，不会影响其他组件。起到保护源数据的效果。

阔落阔落99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue相关知识点

更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备。之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需。可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力。都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，所以人们在。当数据变化但没有更新视图时使用，例如对象新增加的属性，数组新增加的成员。为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。的意思是下面的样式的作用域就是当前这个组件，不会影响全局的样式。组件中的可复用功能。
复制链接

扫一扫