一些杂七杂八的前端知识1

一、this指向

this是函数运行时自动生成的一个内部对象，只能在函数内部使用

1. 指向全局变量

纯粹的函数调用

2. 作为对象方法的调用

对象调用某个函数，这个函数里面所包含的this也就指向使用这个函数的对象了

3. 函数构造新对象时调用

new

4. apply调用

当 apply() 的参数为空时，this指向全局变量
当 apply(abj) 时，this指向obj对象

改变this指向：apply()，call()，bind()等函数

二、事件流

描述的是从页面中接受事件的顺序

冒泡型事件流：

元素节点 → 根节点；

捕获型事件流

根节点 → 元素节点；

三、事件代理（委托）

利用事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

好处：

减少事件处理器个数，提高性能；
DOM更新无需重新绑定事件处理器

阻止冒泡：

子元素中 e.stopPropagation()；
容器中检测target元素，e.stopPropagation()；

四、DNS域名解析查找顺序

浏览器缓存 → 操作系统缓存 → 本地区的域名服务器 → Root Server域名服务器

五、Vue知识点

1. MVVM的理解

Model - View - ViewModel 的缩写
Model：数据模型；定义数据修改和操作；业务逻辑
View：UI组件；将数据模型转化成UI展现出来
ViewModel：监听模型数据的变化；控制视图行为；处理用户交互；同步View和Model对象

2. Vue生命周期

控制整个Vue实例的过程时，更容易形成好的逻辑
-----第一次页面加载-----
beforeCreate（创建前）
created（创建后）——数据初始化
beforeMount（载入前）——编译模板；render函数
mounted（载入后）——挂载DOM；渲染
---------------------------
beforeUpdate（更新前）
updated（更新后）——更新；渲染
beforeDestroy（销毁前）
destroyed（销毁后）

3.Vue组件间参数传递

• 父组件与子组件
  • 父 → 子：子组件通过props方法接受数据
  • 子 → 父：$emit方法传递参数
• （非父子组件）兄弟组件传值
  • eventBus：创建一个事件中心，相当于中转站，可用它来传递事件和接受事件
  • VUEX

4. Vue实现数据双向绑定原理

使用 数据劫持 + 发布者-订阅模式，通过 Object.defineProperty() 来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

将MVVM作为数据绑定入口：
Observer：监听自己 model 数据变化
Compile：解析编译模板指令 {{ }}
watcher：搭起 Observer 与 Compile 之间通信桥梁

5. Vue的特点

组件化、性能好、钩子函数、插件、学习成本低、支持指令、支持过滤器、不支持低版浏览器、数据驱动

6. Vue的计算属性computed

在模板中放入太多的逻辑会让模板过重且难以维护，尽量在需要对数据进行复杂处理且多次使用的情况下使用computed

有以下使用好处：

1. 数据处理结构清晰；
2. 依赖于数据，数据更新，处理结果自动更新；
3. 计算属性内部 this 指向 vm 实例；
4. 在 template 调用时，直接写计算属性名；
5. 常用 getter 方法获取数据，也可使用 set 方法改变数据；
6. 相较于 methods ，不管依赖数据变不变，methods 都会重新计算，而 computed 在依赖数据不变时，从缓存中获取，不会重新计算。

7. 一句话回答Vue面试题

css 只在当前组件起作用

答：在 style 标签中写入 scoped

v-if 和 v-show 的区别

答：v-if 按照条件是否渲染，v-show 是 display 的 block 或 none

vue.js 的两个核心

答：数据驱动、组件系统

vue 的几种常见指令

答：v-if 、v-for 、v-bind 、v-on（可以绑定多个方法）、v-show 、v-else ……

$route 与 $router 的区别

答：$route 是“路由信息对象”，包括 path 、params 、hash 、query 、fullpath 、matched 、name 等路由信息参数；$router 是“路由实例对象”，包括路由跳转方法、钩子函数……

vue 常用修饰符

答：
----- 指令修饰符-----
① <input v-model.lazy=“msg”> —— 在 change 时而非 input 时更新
② <input v-model.number=“age”> —— 自动将用户输入转为数值类型
③<input v-model.trim=“name”>
---- ------------------
----- 事件修饰符-----
① v-on:click.stop —— 阻止单击事件继续传播
② v-on:submit.prevent —— 提交事件不再重载页面
③ .self ——当事件发生在该元素本身而不是子元素的时候触发
④ .capture —— 与 .self 相反
---- ------------------

vue 中 key 值的作用

答：v-for:key 的作用主要是为了 高效地更新虚拟DOM（diff算法）；除此之外，使用 key 属性可以强制替换元素
<transition>
  <span :key=“text”>{{text}}</span>
</transition>
如果 text 发生改变，整个 <span> 会发生更新，Vue会认为产生新元素，删除旧元素，从而触发 过渡。