vue

1为啥用Vue?

1MVVM 数据的双向绑定

2指令系统 不需要操作DOM

3组件化

2v-show和v-if、v-for

v-show 通过 display:none 隐藏元素,DOM还在。不可以触发组件的生命周期, 性能消耗 小

v-if 将 DOM元素整个添加或删除 ,可以触发组件的生命周期, 性能消耗 大

v-for和v-if不建议一起使用?

v-for优先级高一些所以,每次循环都会执行一次v-if判断,会大大影响效率。

如果一定要一起使用可以使用template标签包裹 里边写v-if

3vue生命周期

BeforeCreate 实例初始化后被调用,此时this没有,不能操作data和methods watch

Created函数 实例已经创建完成 ,可以访问data等但是不能操作dom

Beforemounte mounted

BeforeUpdate Updated

beforeDestroy Destroy

activated deactivated keep-alive 缓存的组件激活时/停用时

数据请求在created和mouted的区别? 都能拿到实例对象的属性和方法 放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况建议:放在create生命周期当中

4computed与watch区别

computed计算属性,watch监视属性。俩个都能监听data里的数据变化,区别是

既能用 computed 实现又可以用 watch 监听来实现的功能,推荐用 computed 。因为有缓存。

特别的是watch可以做具体的业务逻辑异步使用。

5组件中data为什么是函数?

函数会 产生数据污染情况 。如果是对象,组件复用的话,一个地方的数据变化会影响到另一个。

因为对象属于引用类型,俩个组件的实例指向的是同一个内存地址的数据。

6Vue set的使用

vue 对已经存在的对象后添加的属性无法做响应式。需要用到Vue.set方法,

特别的Vue对数组的改变也无法监听,需要用到数组的方法,来实现。

7Vue响应式原理

data变页面变

通过object.defineProperty 方法的getter和setter,监听data里的数据,变化会调用setter方法,重新生成DOM

页面变data变

通过v-model(语法糖)原理:v-on绑定的input事件,将value值设置为事件触发变化的值

<input type="text" :value='msg' @input='msg = $event.target.value'

8组件通信

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus
  5. $parent 或$root
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. Vuex

9nextTick理解

因为vue更新dom是一个异步操作,并不是数据变化会马上更新,会进入一个异步队列,等全部数据变化之后才渲染页面。因此要基于新的DOM操作时,需要用到这个函数。

10插槽

让父组件给子组件指定位置插入html结构,子组件利用solt决定位置。

特别的 作用域插槽是当数据在子组件(slot标签)身上需要传给父组件(template标签slot-scope)。

11mixin混合

多个组件可以复用的 如datacomponentsmethodscreatedcomputed等等 可以提取到混合函数里

局部混入:配置项mixins: [myMixin]全局混入 Vue.mixin()

特别的 当组件存在与mixin对象相同的选项的时候 ,会合并使用组件身上的优先,当有生命周期函数时会先执行混合函数,在执行组件身上的

12key原理

就是一个节点的唯一标识。在diff算法中可以根据key,更准确, 更快的找到对应的vnode节点

13keep-alive实现

在路由中设置keepAlive属性判断是否需要缓存 , 使用keep-alive标签包裹router-view

14Vuex

集中式状态管理

前端面试 -Vue2系列的更多相关文章

  1. 前端面试 -HTTP系列

    http和https 的区别? 端口 经济 安全性 响应速度 http 80端口 不需要 明文传输,安全性差 页面响应速度快,使用tcp的3次握手 https 443端口 费钱SSL需要ca 证书 S ...

  2. 2019前端面试系列——JS面试题

    判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'ob ...

  3. 2019前端面试系列——Vue面试题

    Vue 双向绑定原理        mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...

  4. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  5. 2019前端面试系列——CSS面试题

    盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...

  6. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  7. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  8. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  9. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

随机推荐

  1. 什么是通用 SQL 函数?

    1.CONCAT(A, B) – 连接两个字符串值以创建单个字符串输出.通常用于将两个 或多个字段合并为一个字段. 2.FORMAT(X, D)- 格式化数字 X 到 D 有效数字. 3.CURRDA ...

  2. springmvc组件组成以及springmvc的执行过程

    springmvc三大组件 处理器映射器:用户请求路径到Controller方法的映射 处理器适配器:根据handler(controlelr类)的开发方式(注解开发/其他开发) 方式的不同区寻找不同 ...

  3. 本地连接MySQL云服务器步骤与解决方案

    云服务器:aliyun MySQL 版本:mysql8 第一步首先,检查云服务器的 网络与安全 -> 安全组 是否开放了(MySQL)3306端口 第二步,登陆云服务器上的MySQL,检查需要远 ...

  4. 解释 WEB 模块?

    Spring 的 WEB 模块是构建在 application context 模块基础之上,提供一个适 合 web 应用的上下文.这个模块也包括支持多种面向 web 的任务,如透明地处理 多个文件上 ...

  5. Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"

    一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...

  6. ctfhub web 前置技能(请求方式、302跳转、Cookie)

    第一题:请求方式 打开环境分析题目发现当前请求方式为GET 查看源码发现需要将请求方式改为CTFHUB就可以 使用bp抓包 发送到repeater模块修改请求方式 即可得到flag 第二题:302跳转 ...

  7. C++大作业——教职工管理系统

    教职工信息管理系统 1.问题描述: 设计一个学校职工管理系统,要求实现如下功能:建立职工信息数据, 包括职工编号.姓名. 性别.工资.出生时间.岗位.参加工作时间和年 龄(必须计算得到),初始模拟数据 ...

  8. node-webkit文档翻译#package.json

    title: node-webkit文档翻译#package.json date: 2013-12-07 21:38:25 tags: node-webkit 基本示例 { "main&qu ...

  9. leetcode1753. 移除石子的最大得分

    题目描述: 你正在玩一个单人游戏,面前放置着大小分别为 a​​​​​​.b 和 c​​​​​​ 的 三堆 石子. 每回合你都要从两个 不同的非空堆 中取出一颗石子,并在得分上加 1 分.当存在 两个或 ...

  10. mint-ui中messagebox的使用

    效果图: 代码: // 安装 # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S // 引入全部组件 import ...