前言
最近在做牛客的前端题库，将自己认知薄弱的一些知识点整理了下来，这是Vue的部分，包括Object.defineProoerty()、动态路由、webpack配置、keep-alive参数含义、watch监听等。
Vue知识点
客户端、服务端渲染的区别
客户端渲染 | 服务端渲染 | |
|---|---|---|
html生成原理 | 由js生成html | 由后台语言通过一些模版引擎生成 |
优点 | 1．前后端分离，前端做视图和交互，后端提供接口、数据2．前端做路由；服务器计算压力变轻 | 1．响应快，用户体验好2．搜索引擎友好，有seo优化3．nodejs层服务器渲染，前端性能优化更顺手，可操作空间更大 |
缺点 | 用户等待时间变长，尤其是请求数多且有一定先后顺序的时候 | 1．增加服务器计算压力（虽可以做渲染缓存，但是毕竟多做了计算）2．如果不是增加node中间层，前后端分工不明，不能很好的并行开发 |
耗时比较 | 1．数据请求：客户端在不同网络环境进行数据请求，外网http请求开销大，导致时间差2．步骤：客户端需要等待js代码下载，加载完成再请求数据，渲染3．渲染内容：客户端渲染，是经历一个从无到有完整的渲染步骤 | 1．数据请求：服务端在内网请求，数据响应速度快2．步骤：服务端是先请求数据再渲染可视部分，即服务端不需要等待js代码下载，并会返回一个已经有内容的页面3．渲染性能：服务端性能比客户端高，速度快4．渲染内容：服务端先渲染可视部分，客户端再做二次渲染 |
适用场景 | 单页面应用如：React，Vue等等前端框架 | 用户体验比较高的比如首屏加载，重复较多的公共页面可以使用服务器渲染，减少ajax请求，挺升用户体验如：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java 配合vm模版引擎、NodeJS配合Jade。适合多页面应用。其实现在大部分网站 还是这种形式。 |
服务器端渲染有利于SEO，且首页加载快
客户端渲染节省后端资源，但可能会加载慢出现白屏
服务器端渲染耗费流量，局部页面的变化也需要重新请求完整的页面
客户端和服务器端在首屏渲染上网络请求次数是一样的(×) 客户端两次 服务端一次
客户端首屏渲染时首先拿到空的html模板，之后继续发起数据请求。而服务器端渲染只需要请求一次，服务器会将请求的数据放在html模板中一起返回。总结
1．有点网站为了让单页面应用利于seo，会让服务器和客户端同构，使用React／Vue渲染的方案。
2．对于同一个组件，服务端渲染“可视”的一部分，为确保组件有完整的生命周期和事件处理，客户端需要再次渲染
3．服务端渲染实际也是需要客户端进行开销很小的二次渲染
绑定的相关指令
v-model： 双向绑定
- 添加number修饰符：可以自动将用户的输入值转为数值类型，如果这个值无法被
parseFloat()解析，则会返回原始的值；添加trim修饰符：自动过滤用户输入的首尾空白字符；添加lazy修饰符：让内容在“change”事件时而非“input”事件时更新。 - 本质上是语法糖，负责监听用户的输入事件以更新数据；如果为不同元素绑定数据，则使用不同元素property，并抛出不同的事件；在vue2.2 版本新增功能，可以在自定义组件上使用v-model实现双向绑定
双向数据绑定：Vue实现双向数据绑定是采用数据劫持和发布者-订阅模式。数据劫持是利用ES5的Object.defineProperty(obj, key, value)方法来劫持每个属性的getter和setter。用户更新了View、Model的数据也自动被更新了，这种情况就是双向数据绑定。
v-on（@）：绑定事件
v-bind（:）： 绑定dom
获取动态路由中id的值
{ path: '/name/:id' }
router其实是VueRouter的一个实例，所以它是一个全局对象，包含了所有的子对象和属性。而route是正在跳转的这个路由的局部对象，可以获取这个正在跳转的路由的name，path，params，query等
代码语言：javascript复制this.$route.params.idwebpack配置的描述
module.rules可以指定多个loader，而loader的作用是对模块的源码进行转换- plugin是一个具有apply方法的JavaScript对象，由于plugin可以携带参数，所以必须在配置中向plugins属性传入一个实例
- webpack开始处理程序时，从入口开始递归构建一个依赖关系图，包含了程序所需的模块，然后打包为少量的bundle，通常只有一个bundle
- 模块热替换会在程序运行中，替换、添加、删除模块，
无需重新加载整个页面，无需更替所有模块。
watch监听
使用watch handler属性有一个特点，就是当值第一次绑定时，watch不会执行监听函数，只有值发生改变时才会执行。
如果需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，添加 immediate: true属性
代码语言：javascript复制new Vue({
data: { a: 1, b: 2 },
watch: {
a: {
handler: function(value){
console.log(value)
},
// immediate: true
}
}
})监听不会被发现
路由模式
- vue-router有两种模式，history和hash模式
- hash模式是通过
onhashchange事件，监听url的修改 - history通过H5提供的API history.pushState 和 history.pushState实现跳转且不刷新页面
- history模式需要后端进行配合
Vue响应式
Vue2无法检测property的添加或移除。由于Vue会在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让Vue将它转换为响应式的。(这里声明是指vue2，在3.x的时候已经实现了深层对象和数组元素直接赋值、删除属性的响应式)
代码语言：javascript复制data () {
return {
form: {
total: 10
}
}
}
// this.form.total是响应式的
// 若直接增加属性，是非响应式的
this.form.showFlag= true //非响应式的使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上
代码语言：javascript复制Vue.set(this.form, 'showFlag', true)还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名：
代码语言：javascript复制this.$set(this.form, 'showFlag', true)
