前端知识点回顾-（2021-05-26）

1、浏览器篇

1.1、常用那几种浏览器测试？主流浏览器的内核有哪些？

Q1：IE、chrome、safari、opera、mozilla、FireFox
Q2：①Trident内核：IE内核、微软使用排版引擎
        ②webkit内核：chrome、safari使用，主要用于Mas OS系统，特点在于源码结构清晰、渲染速度极快，缺点是网页代码兼容性不高，编写不规范无法显示
        ③Gecko内核：Mozilla、FireFox使用，仅次于Trident的排版引擎，Gecko是一套开放源代码的、以C++编写的网页排版引擎
        ④Presto内核：Opera使用

1.2 说说你对浏览器内核的理解？

浏览器内核主要分为下面三个技术分支：排版渲染引擎、javaScript引擎以及其他
排版渲染引擎：主要负责获取网页的内容（html、xml、图像）等信息，以及计算网页的显示方式，然后输出到显示器中
javascript引擎：用来渲染javascript的，渲染越快，动态网页渲染越快

1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

①浏览器根据输入的url交给DNS域名解析，找到真实的ip地址
②浏览器根据ip地址向服务器发起TCP连接，与浏览器建立TCP三次握手
a、浏览器向服务起发送一条建立连接的请求
b、服务器收到请求后发送同意连接信号
c、浏览器接收到信号再次发送确认信号，双方建立连接
③浏览器向服务器发送HTTP请求
请求：请求头、请求方式、请求体等
④服务器返回响应报文（状态码、响应头、响应体）
a、服务器根据http请求获取相应的html内容
b、服务器返回对应htnl文件给浏览器
c、在浏览器还没接收完全时开始渲染页面
d、在渲染页面内容时，根据需要会继续发送请求css、图片、javascript等文件
⑤断开连接

1.4 浏览器缓存

①sessionStorage 会话临时缓存
优点：临时缓存、关闭会话就自动清空、不支持跨页面交互、储存大小5M
缺点：不能持久储存
②localStorage 本地永久缓存
优点：长期保留在浏览器中，除非手动清除、储存大小5M
缺点：IE8以上支持
③cookie
优点：兼容性好，几乎所有浏览器都支持
缺点：容量小，大概只有4k，每次请求都会携带，只要适用于登录场景

1.5. HTTP

1.5.1 http状态码

①以 2xx 为开头的都表示请求成功响应.

状态码	含义
200	请求成功
204	请求处理成功，但是没有资源可以返回
206	对资源某一部分进行响应，由Content-Range 指定范围的实体内容。

②以 3xx 为开头的都表示需要进行附加操作以完成请求

状态码	含义
301	永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI
302	临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。
303	该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
304	该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307	临时重定向。该状态码与 302 Found 有着相同的含义。

③以 4xx 的响应结果表明客户端是发生错误的原因所在。

状态码	含义
400	该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401	该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。
403	该状态码表明对请求资源的访问被服务器拒绝了。
404	该状态码表明服务器上无法找到请求的资源。

④以 5xx 为开头的响应标头都表示服务器本身发生错误

状态码	含义
500	该状态码表明服务器端在执行请求时发生了错误。
503	该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

1.5.2 URL和URI有什么区别？

URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

1.5.3 HTTP和HTTPS的区别

①https协议需要用到CA申请证书
②http是超文本传输协议，信息是明文传输，https是具有安全性的SSL加密传输协议
③采用不同的链接方式，端口也不一致，http是80，https是443
④http的连接很简单，无状态（无状态表示数据包传输与接收都是独立的，无连接表示通信双方没有长久保持对方的信号）
   https是采用http+SSL协议进行加密传输、身份认证的网络协议，安全性比较强

2、HTML篇

2.1  Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

Q1：告知浏览器解析器用什么文档标准解析这个文档
Q2：标准：js与排版都是以该浏览器最高的标准运行
        兼容：向后兼容
Q3：html 4.0.1 中声明3种DTD：
               ①strict（严格的）：包含所有的html元素与属性，但不包括表象跟过时元素（font），框架集不允许
               ②transitional（过渡的）：包含所有的html元素与属性，包括表象跟过时元素（font），框架集不允许
               ③frameset（框架集）：跟transitional一致，但是允许框架集
         html5中提出html

2.2 说说你对语义化的理解

优点：①结构清晰，易于阅读，维护
           ②提高用户体验，在样式加载失败时，页面结构清晰
           ③方便其他设备解析（屏幕阅读器），根据语义渲染页面
           ④有利于搜索引擎优化（SEO），根据不同的语义赋予不同的权重
语义化标签：title、h1-h6，header、nav、main、artical、ul、ol、aside、canvas、section、details、figure、mark等

2.3 HTML与XHTML有什么区别?

• 基础语言不同
  1、XHTML是基于du可扩展标记语言（XML）
  2、HTML是基于标准通用标记语言（SGML）
• 语言严格程度不同
  1、XHTML严格，存在DTD定义规则
  2、HTML松散
• 可混合应用不同
  1、XHTML可混合各种XML应用
  2、HTML不能混合
• 大小写敏感度不同
  1、XHTML区分大小写，标签使用小写
  2、HTML不区分大小写

2.4 页面导入样式时，使用link和@import有什么区别？

①属性差异
link属于XHTML标签，@import是css提供的语法
link可以加载css，也可以定义RSS，定义ref链接属性，@import只能加载css
②加载顺序不同
link伴随页面加载，@import需要加载完页面再加载，页面会出现闪烁问题
③兼容性
@import是css2.1提出的，只有ie5以上识别，link都支持
④使用dom控制样式的差别
当使用js控制dom去改变样式的时候，只能使用link标签，因为@import不能使用dom控制

2.5 HTML5有哪些新特性？

①语义化标签
语义化标签使得页面的内容结构化，见名知义

标签	描述
	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文档中的节（section、区段）
	定义页面独立的内容区域
	定义页面的侧边栏内容
	用于描述文档或文档某个部分的细节
	标签包含 details 元素的标题
	定义对话框，比如提示框

②增强型表单
新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

③新增表单元素：

表单元素	描述
	元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定
	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
	用于不同类型的输出

④新增表单属性

⑤新增视频 和音频 标签

⑥Canvas绘图、SVG绘图

⑦Web Storage、WebSocket

⑧地理定位

⑨拖放API

⑩Web Worker

2.6 iframe的优缺点？

优点：
①iframe可以原封不动展示原网页的内容
②iframe可用性强，方便快捷
③用于加载慢的广告跟第三方内容

缺点：
①产生多个页面，不便于管理
②框架个数多，出现滚动条，分散用户注意力，用户体验差
③不利于搜索引擎优化，目前搜索引擎爬虫还不能很好处理iframe内容
④兼容性差，很多移动设备（PDA手机）无法显示框架
⑤iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

2.7 img中的alt与title属性

alt：图片加载失败显示的替换文字
title：鼠标悬浮显示的文字，是对图片的进一步描述
搜索引擎主要是对alt属性的判断，一般包含关键字

3. CSS篇

3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素：span、img、a、input、select、b、i
块级元素：div、p、h1~h6、ul、ol、form
css盒模型：border、margin、padding

3.2 清除浮动有哪些方式？

①额外标签法（不推荐）:给谁清除浮动，就在其后额外添加一个空标签
优点：简单易懂
缺点：添加多余标签，结构化差
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

.clear{
    clear:both;
}

//html

②给父级添加overflow方法：可以通过触发BFC方式，实现清楚浮动效果
优点：代码简洁（若父盒子里还有position定位会引起麻烦）
缺点：内容增多时候会造成内容自动隐藏

③使用after伪元素清除浮动（常用） -父亲
优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1，出发hasLayout

div.clearfix:after{
    content:'',
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
div.clearfix{
    *zoom:1;
}

④使用before和after双伪元素清除浮动（较常用）
 

.clearfix:before,.clearfix:after{
    content:'';
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？

选择器：ID选择器>标签选择器>类选择器>后代选择器
继承属性：class属性，伪类a标签、列表ul、li、dl、dd、dt

3.4 CSS3新增伪类有哪些？

3.5 如何居中div？

①绝对定位——要求有固定宽高

main{
    position:absolute;
    top:calc(50% - 25px);
    left:calc(50% - 50px);
    width:100px;
    height:50px;
}

②translate种使用百分比，不依赖固定宽高

缺点：
      1） 有时候不能使用绝对定位
      2）如果需要居中的元素高度超出了视口，顶部会被视口裁剪

main{
   position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%); 
}

③基于视口的单位vh

main{
    margin:50vh auto;
    transform:translateY(-50%);
    
}

④基于flexbox——flex

main{
    margin:auto;
}
body{
    display:flex;
    min-height:100vh;
}

⑤在有宽高下的父级下居中

html{
    height:100%;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
main{}

3.6 为什么要初始化CSS?

每一个html标签都有自己默认的样式，每种浏览器不同，为了设计统一

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { 
    margin:0; padding:0; 
}
body, button, input, select, textarea { 
    font:12px/1.5tahoma, arial, \5b8b\4f53; 
}
h1, h2, h3, h4, h5, h6{ 
    font-size:100%; 
}
address, cite, dfn, em, var { 
    font-style:normal; 
}
code, kbd, pre, samp { 
    font-family:couriernew, courier, monospace; 
}
small{ 
    font-size:12px; 
}
ul, ol { 
    list-style:none; 
}
a { 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
sup { 
    vertical-align:text-top; 
}
sub{ 
    vertical-align:text-bottom; 
}
legend { 
    color:#000; 
}
fieldset, img { 
    border:0; 
}
button, input, select, textarea { 
    font-size:100%; 
}
table { 
    border-collapse:collapse; border-spacing:0; 
} 

3.7 说说你对BFC规范的理解？

①什么是BFC？

BFC全称：块级格式化上下文（block formatting context）,简单来说就是一种属性，这种属性会影响元素与元素之间的位置、间距

②形成BFC的条件

float：给元素添加浮动（属性为left、right，但none除外）
position：给元素添加定位（absolute、fixed）
display：添加display属性（inline-block、table-cell、table-caption）
overflow：添加overflow属性（hidden、auto、scroll，但是visible除外）

③BFC形成之后的问题

margin重叠问题、浮动相关问题

3.8 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？

4、Vue篇

4.1 生命周期面试题

4.1.1 什么是生命周期，作用是什么

每个vue实例被创建时会经过一系列的初始化过程，例如：编译模板、设置数据监听、将实例挂载到DOM上，数据更新变更DOM等。在这过程中会执行一些生命周期钩子函数，而我们可以根据业务需求在不同的生命周期钩子添加处理逻辑。
Vue的生命周期有8个阶段：beforeCreate、created、befeoreMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

4.1.2 简述每个生命周期使用哪些场景

Vue生命周期有8个阶段：

创建阶段：
①beforeCreate：new一个vue实例之后，只有一些默认的生命周期钩子与事件（$emit、$on），
data与methods数据还未初始化无法使用
——beforeCreate执行之后，进行数据初始化，这里会定义data数据，方法及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例，实现数据页面同时变更
②created：data与methods已经初始化，在这里我们可以进行业务数据的请求
——开始编译模板，将模板或者el转换为render函数
③beforeMount：模板已经编译完成，未挂载到页面
④mounted：vue实例已经初始化完成，操作DOM元素最早阶段，vue的创建阶段已经完成
运行期间：
⑤beforeUpdate：状态数据变更，data是最新的值，但是页面显示的还是旧数据，数据未同步
——生成一个新的虚拟dom（vnode），跟之前的vnode进行对比更新render函数里的数据
⑥updated：实例更新完成事件，数据已经同步
销毁阶段：
⑦beforeDestory：实例销毁前，仍可以操作dom
⑧destoryed：实例销毁完成，移除所有绑定的事件与子实例

4.1.3 第一次页面加载触发哪几个钩子

beforecreate、created、beforeMount、mounted

4.1.4 created跟mounted的区别

created：模板渲染成html前调用，初始化数据，不能操作dom
mounted：模板渲染成html后调用，可以进行dom的操作

4.1.5 vue获取数据在哪个周期函数

如果不操作dom元素，可以在created、beforeMount、mounted；涉及dom操作（比如图表init），需要在mounted

4.2 vue路由面试题

4.2.1 mvvm框架是什么？

定义：vm（视图模拟层）通过从后台接口m（modal层）请求数据，vm层从而与v（view层）进行数据双向绑定
作用：mvvm实现了更好的前后端分离，不再需要去操作dom元素实现数据更新
内容：View 是视图层，也就是用户界面；Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控；view modal是对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交等的事件处理注册逻辑
两个数据传输方向：
①模型转化成视图，即后端传递的数据转化成所看到的页面，实现的方式：数据绑定
②视图转化成模型，即将所看到的页面转化成后端的数据，实现方式：dom事件的监听
两者兼具就是数据双向绑定

4.2.2 vue-router是什么？有哪些组件？

vue-router是用来实现页面的跳转，通过传入不同的path，像服务器发送不同的请求，请求不同的资源
主要组件：router-view（渲染路由的容器）、router-link（路由声明式跳转 ，active-class是标签被点击时的样式，to跳转路由）、keep-alive（缓存组件，下次进入缓存页面不在触发created，将使用activated代替）
模式：①hash模式：哈希存在路由中，但是发送请求的时候并不会被带上，通过监听`hashchange`事件得到hash值的变化，来实现更新页面部分内容的操作           

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

②history模式：pushState() 和 replaceState()，向历史记录中添加或替换而无须重新加载页面。

function matchAndUpdate () {
   // todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

4.2.3 active-class 是哪个组件的属性？

router-link 路由声明跳转，active-class是该标签被点击时的样式（默认值router-link-active）
使用方法：①router-link标签内使用
                  ②在路由js文件配置，newRouter 时配置linkActiveClass
其余属性：①to：跳转地址
                  ②tag：指定组件渲染生成的标签，默认为a标签
                  ③replace：使用router.replace() 替换router.push()
                  ④append：是否跳转到相对路由

4.2.4 怎么定义vue-router的动态路由，怎么获取传值？

动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，以params
传值方式：
①query（查询参数）：参数拼接在url上，$route.query.xx
②params（命名路由）：/xx/参数值=>/router/:id，$route.params.xx 不是动态路由时，刷新页面会丢失

4.2.5 vue-router有哪几种导航钩子？

（1）全局导航钩子：
①beforeEach（前置钩子，守卫）：可以添加相关的路由的拦截处理，用户角色信息验证，next 方法必须要调用，否则钩子函数无法 resolved
②afterEach（后置钩子：不需要next函数，也不能改变路由

router.afterEach((to,from) => {
	if(to.meta && to.meta.title){
		document.title = to.meta.title
	}else{
		document.title = "666"
	}
})

（2）单独路由独享钩子：在路由上直接定义，跟beforeEach一致

{
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
        if (window.localStorage.getItem("id")) {
            next()
        } else {
            next({ name: "login" })
        }
    }
}

（3）组件内钩子
①beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，不能获取vue实例this，可以在next函数里vm访问vue实例
②beforeRouteUpdate：在当前路由改变，但是依然渲染该组件是调用
③beforeRouteLeave：导航离开该组件的对应路由时被调用,next(false)禁止离开该页面

4.2.6 route与router的区别

①route：表示当前路由对象信息，包含路劲、参数等信息
②router：vue的路由实例，可以调用push、go、replace方法实现路由变更

4.2.7 vue-router 响应路由参数的变化

当使用路由参数时，原来的组件实例会被复用，因为两个路由都渲染同个组件，也意味着生命周期created和mounted不在执行，可以使用beforeRouteUpdate，或者路由监听
或者在router-view 里添加不同的key，只要key变化重新创建该组件

4.2.8 vue-router的两种模式

①hash：#后面 hash 值的变化，并不会向服务器发送请求，也不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，可以添加更新部分内容操作
②history：会将URL修改得就和正常请求后端的URL一样，率刷新页面时会发送请求，因此需要服务端对每一个可能的path值都作相应的映射
相对应api：切换（back、forward、go）跟修改（pushState，replaceState），可以根据不同url的展示不同的状态数据，比如记录滚动条位置、阅读进度

4.2.9 vue-router实现路由懒加载（动态加载路由）

原理：结合vue的异步组件跟webpack的代码分割能力，把不同路由对应的组件分割成不同的代码块，当访问对应路由再加载对应的组件，避免一次性加载内容过多，影响页面加载
方法：
①使用AMD（异步加载模块）风格的require  

const Foo = resolve => require(['@/views/index.vue'],resolve)

  ②使用import

component: () => import('@/views/index.vue')
//使用组件分块打包
component: () => import(/* webpackChunkName: "index" */'@/views/index.vue')

③使用webpack特有的require.ensure()

component: r => require.ensure([], () => r(require('@/views/index.vue')), 'index')
//index为分组块

4.3 vue常见面试题

4.3.1 vue的优点

①轻量级框架：只关注视图层
②双向数据绑定：保留了angular的特点，但操作数据更方便
③组件化：保留了react的优点，实现了html的封装与重用
④视图、数据、结构分离：只需要操作数据变化就可以完成变更，可针对viewmodal进行编写测试
⑤虚拟DOM：不再使用原生操作dom节点，解放了dom操作，ref获取
⑥运行速度更快：跟react相比，一样操作虚拟的DOM，但是vue性能更好

4.3.2 vue父组件与子组件之间传递数据？

(1) 父传子
①父组件通过v-modal绑定数据，子组件通过props接收
②父组件触发子组件的方法，通过$refs调用方法并传参
(2) 子传父
①子组件通过$emit方法
(3) 兄弟组件传值：通过eventBus，或者vux

4.3.3 v-show和v-if指令的共同点和不同点？

共同点：控制元素的显示隐藏
不同点：
① 实现本质不同：v-show是通过控制css中的display为none控制隐藏，只会编译一次；v-if是动态向DOM树添加或者删除DOM元素，执行销毁与重建
②编译条件：v-show都会编译，控制css，v-if如果初始化为fasle就不会编译
③性能：v-show只会编译一次，v-if状态频繁变更会消耗性能
总结：频繁切换——v-show——切换开销小，初始开销大
           不频繁切换——v-if——初始开销大，切换开销小

4.3.4 如何让CSS只在当前组件中起作用？

在组件style上添加scoped

4.3.5 的作用是什么

vue的缓存组件，可以保留被包含组件的状态，避免重新渲染
使用场景：信息列表-查看信息，查看多个信息的时候，每次返回列表不需要重新渲染数据，也可以记住当前浏览的位置

4.3.6 如何获取dom?

使用ref

4.3.7 说出几种vue当中的指令和它的用法？

①v-modal：双向数据绑定
②v-on：事件绑定，v-once只绑定一次（元素与组件只渲染一次）
③v-for：数据循环
④v-if、v-show：控制显示隐藏
⑤v-html：渲染html代码
⑥v-bind:class： 绑定一个属性

4.3.8 vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转化成js模块
用途：js可以写成es6、style可以用scss或less、template可以加jade等

4.3.9 为什么使用key

由于vue组件高度复用，添加key可以标识组件的唯一性，Diff算法可以正确识别此节点，可以高效的更新虚拟DOM
例如：更新已渲染的列表数据时，使用就地复用原则，会根据key判断这个值是否修改，修改则重新渲染，不推荐使用index作为key，在列表中间插入数据，插入位置之后的元素需要重新渲染；建议使用数据中唯一标识的参数

4.3.10 axios及安装

请求后台资源的模块，npm install axios --save，支持promise
js中使用import进来，.get或.post调用，.then处理成功函数，.catch 处理失败
在vue的配置文件config下的index.js或者vue3的vue.config.js下：使用反向代理配置，添加changeOrigin为true允许跨域

4.3.11 v-modal的使用

v-modal用于表单数据的双向绑定，相当于做了两个操作，v-bind绑定一个value属性，v-on绑定ipnut事件
修饰符：.lazy(使用change事件同步)、.trim、.number

4.3.12 请说出vue.cli项目中src目录每个文件夹和文件的用法？

①assets：存在静态资源
②components：存放组件
③router：定义路由相关的配置
④app.vue: 应用主组件
⑤main.js : 入口文件

4.3.13 分别简述computed和watch的使用场景

①computed：
      当一个属性受到多个属性影响的时候使用，如购物车结算
      依赖vm中的data属性的变化而变化，当data中的属性变化时函数才执行
      在computed中不能对data中的属性进行赋值操作，否则会造成死循环
      当computed中的函数所依赖的属性没有发生变化，那么数据会从缓存中读取
②watch：
      当一个数据影响多个数据时使用，如搜索数据
      watch想要监听引用类型数据的变化，需要使用handle+ deep进行深度监听，obj:{handle(newval){},deep:true}
      特殊情况，watch无法监听到数据，更改数组必须要用splice()或者$set。
      immediate：true，页面首次加载的时候做一次监听

4.3.14 v-on可以监听多个方法吗？

可以，v-on="{input:oninput,focus:onFocus}"

4.3.15 $nextTick的使用

当修改了data数据然后马上获取这个dom元素的值，无法获取到更新后的值，这时，可以使用$nextTick回调，等到数据渲染之后再执行

4.3.16 vue组件中data为什么必须是一个函数

js的特性导致，在component中，data必须以函数形式存在，不可以是对象，否则会出现数据混淆

4.3.17 vue中如何使用event对象

绑定事件：
①使用不带括号的形式，event对象将被自动当成实参传入
②使用带圆括号的形式，我们需要使用$event变量传入对象

 4.3.18 组件间的通信