【随手记】Vue知识点

前言

最近在做牛客的前端题库，将自己认知薄弱的一些知识点整理了下来，这是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等

this.$route.params.id

webpack配置的描述

• module.rules可以指定多个loader，而loader的作用是对模块的源码进行转换
• plugin是一个具有apply方法的JavaScript对象，由于plugin可以携带参数，所以必须在配置中向plugins属性传入一个实例
• webpack开始处理程序时，从入口开始递归构建一个依赖关系图，包含了程序所需的模块，然后打包为少量的bundle，通常只有一个bundle
• 模块热替换会在程序运行中，替换、添加、删除模块，无需重新加载整个页面，无需更替所有模块。

watch监听

使用watch handler属性有一个特点，就是当值第一次绑定时，watch不会执行监听函数，只有值发生改变时才会执行。

如果需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，添加 immediate: true属性

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的时候已经实现了深层对象和数组元素直接赋值、删除属性的响应式)

data () {
  return {
    form: {
      total: 10
    }
  }
}
 
// this.form.total是响应式的
 
// 若直接增加属性，是非响应式的
this.form.showFlag= true  //非响应式的

使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上

Vue.set(this.form, 'showFlag', true)

还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名：

this.$set(this.form, 'showFlag', true)