[JavaScript知识库]vue组件开发原理 SSR及CSR基础

组件开发原理

注：所有实现复杂功能的组件 都是从最开始的组件开始实现的，然后才是属性 各种值 这个和普通组件的引用方式是一样的 需要引入 注册组件 定义。需要的就是在基础组件上逐步添加我们所需要的功能。

1、Type属性实现

Type属性核心思路：通过prop传入值的不同切换需要的渲染类名，达到显示不一样的背景色的目的

// 第一步 准备两个类名用于切换
// 第二步 根据接受的props值改变对应的属性
具体写法
props：{
	type:{
		type:String,
		default:'default'// props默认配置，如果不传值则认为是默认的。
	}
}
注：分析代码后得出，如果传入的值是type，则返回的class属性名应该为 h-btn-type，所以需要单独在computed中定义
typeClass(){
	return 'h-btn-$(this.type)'
}

2、实现size属性

注 ：动态class的数组语法，可以同时支持多个动态class的数组绑定

：class= "[typeClass,sizeClass]" 里面这两个都是动态绑定的语法
具体写法
props：{
	size:{
		type:String,
		default:'default'// props默认配置，如果不传值则认为是默认的。
	}
}
注：分析代码后得出，如果传入的值是size，则返回的class属性名应该为 h-btn-szie，所以需要单独在computed中定义
sizeClass(){
	return 'h-btn-$(this.size)'
}

3、实现参数的校验

自定义组件属性后，需要校验用户定义的参数是否被定义 ，需要进行判断

需要用到一个属性：validator 进行判断

validator:function (value){
    //value代表当前传过来的值 需要对传入的参数值进行校验 如果满足放回true 不满足放回false
    const sizeList = ['small','large']
    return sizeList.includes(value)
    //includes方法是判断value是否在sizeList数组中能够到到对应匹配的 如果满足返回true 如果不满足放回false
    
}

4、组件的click事件处理

自定义组件上的click事件和原生的浏览器事件是不一样的，

vue的事件系统中有两种事件

1、浏览器原生事件（在浏览器支持的原生标签上绑定事件）

<button @click="handler"> </button>

2、自定义组件事件

<h-button @click= "handler"></h-button>

组件绑定的事件默认是不会被浏览器识别，我们需要做额外的处理让组件事件生效 有两种方案：

1、添加 .native修饰符 (不是全部都适用，有时候会产生其他问题)

当添加修饰符之后 事件会被绑定到组件的根元素上去

<h-button @click.native= "handler"></h-button>

2、使用$emit方法触发事件

用户的本意是在点击button函数的时候 触发组件和上绑定的click回调函数

原理是使用自定义事件 把 click当做一个自定义事件 去单独定义事件逻辑 触发自定义事件需要在子组件中使用$emit事件去触发。

写法：

App.vue中
<h-button @click= "clickHandler"></h-button>

组件内部的button按钮定义原生的click事件
<button @click="clickHandler"></button>
methods:{
	clickHandler(){
		// 触发的父组件传下来的自定义事件
		this.$emit('click')
	}
}

5、总结

1编写组件时应该API先行 先确定该如何给用户，然后在根据api编写逻辑

2、props的名称应该具备语义化 类型应该符合规范，并且可以添加自定义校验

3、组件绑定类似于原生的事件，默认是不会被识别的，需要额外处理

4、组件有一些设计需要整体把控，编写的过程是一个逐渐排错的过程、

6、Editor组件 基础第三方组件使用

在日常也业务开发中借助一些开源的基础的第三方组件，来完成我们自己的编辑器组件的编写、

组件依赖：wangEditor

安装依赖：npm i wangDitor --save

确定基础API ：主要为 v-model 提供编辑器数据的双向绑定

需要实现的功能：

1、编辑器组件可以接受我穿传入的数据，并且可以显示到编辑器内部，实现数据的回显，

2、一旦编辑器中进行内容编辑之后，绑定的content属性，也可以得到修改，变成编辑器中最新的值

相当于实现一个v-model属性

实现步骤：

v-model一旦写到一个组件身上，相当于传入了名为value的自定义属性，以及名为input的自定义时间 ，相当于是一个语法糖，可以一次完成两件事情

总结：4

1、在实际开发中 可能根据业务中三方成熟的插件 ，实现我们自己的vue组件

2、在自己的组件中，把三方插件的功能，按照api方式实现出来，然后在暴露一些vue组件的api提供给用户使用

3、组件身上添加v-model 一般用于组件内部有可输入的控件，比如说input textarea 内容编辑 目的是为了实现双向绑定

一旦组件上写了v-model之后 相当于1.名称为value的自定义属性绑定，2.名称为input自定义属性绑定

父子传参中 通过定义props：{value} 来接受传下来的数据

父子传参中 通过触发$emit(“input”,子组件数据)实现将子组件的数据传到父组件中

特别注意：v-model语法糖下，我们并不需要父组件中定义接受传入实参的方法

7、服务端渲染 SSR

服务端渲染：是指页面的内容完全由服务端侧决定到底要展示出什么内容。

1、新建server文件夹

2、生成一个node项目 npm init -y

3安装express ：npm install express --save

4、在server文件夹中建立一个app.js文件

在官网中找到一个hello word实例 然后使用 这就是一个最简单的node服务。

// 导入express包
 const express = require ('express')
// 初始化一个app实例对象
const app = express()
// 准备一个服务器端口号
const port = 3000
//创建一个路由'/'' 访问路由的额时候返回一个标签
app.get('/',(req,res)=> res.send('<p> 这是返回的标签 </p>'))
// 监听当前的3000端口号，开启服务
app.listen(port,()=>console.log('Example app listening on port ${port}!' ))

运行：node app.js

服务端渲染时浏览器查看源代码 是可以看到标签属性的，可以完整的看到源代码

8、客户端渲染 CSR (client side render)

客户端渲染：服务端值提供json格式的数据，渲染成什么样子由客户端通过js控制

就是普通的vue框架的渲染、

客户端渲染查看源代码时，源代码不会显示在浏览器中，只能看到一个main.js文件，和一个id为app的根元素，所以网页是通过js进行动态渲染的也就是客户端渲染 主流的方式就是客户端渲染

思考：如何得知一个网站是客户端渲染还是服务端渲染：查看源代码

9、客户端渲染VS服务端渲染

1、CSR执行流程：

浏览器加载html文件》浏览器下载js文件》浏览器运行vue代码》渲染页面

特点：首次渲染时间长 seo支持差 前后端分工开发效率高

2、SSR执行流程：

前后端分工搭配复杂，前端需要写好html模板交给后端，后端填充模板之后返回给浏览器 现在用的比较少了 都是前后端分离

特点 ：首次渲染时间短 seo支持良好 前后端效率低

思考：如何提高vue项目开发效率同时，提高首屏渲染时间 这点的haul就是vue框架中的服务端渲染

10、vue框架中的服务端渲染

思路：把vue组件交给服务端去渲染，渲染之后完整的内容直接返回给客户端 就可以解决渲染快，还能继续是用vue进行开发的问题了。

vue ssr

把server文件夹中的文件拷贝进来

安装依赖：npm install vue vue-server-rander --save

目标：把vue组件的渲染从客户端放到服务端

目的：既想使用vue组件开发，还想让首屏的时间短

解决方案：把vue渲染部分放到服务端即可

代码实现：

// 引入vue框架
const Vue = require ('vue')
// 引入express框架，进行服务端功能开发
const server = require('express')()
// 引入vue服务器渲染插件 帮助我们把vue组件渲染成字符串
const rander = require ('vue-server-rander').createRender()
// 编写一个通用路由 -> new 一个vue实例 把vue实例渲染成字符串（组件字符串）
server.get('*',(req,res) =>{
	//实例化app
	const app = new vue ({
  		data:{
		url:req.url
		},
 		template:'<div>访问的URL是：{{url}}</div>'
	})
			//方法是把组件变成字符串
		renderer.renderTostring(app,html)=>{
		if(err) throw err
		res.send(html)
}
})

同构的概念：

虽然完成了客户端的渲染，渲染出来的只使用了转化字符串的方法，所以如果添加事件其实是不支持的 这里就需要引入一个新的概念，叫做同构

同构的理念：一套vue代码，在服务端执行一次，在客户端再执行一次就叫做同构（这比较难）

1、服务端执行完成渲染解决了首次加载速度慢的问题

2、浏览器执行解决了绑定事件及恢复vue本身特性的问题

总结：

SSR 服务端渲染：网页内容呦服务端生成，首屏时间短 有利于seo

CSR：客户端渲染： vue react 框架渲染方式 spa都是客户端渲染 首屏渲染时间长不利于seo

同构的本质：

一份vue代码在服务端实现一遍 再客户端再实现一遍

服务端解决的是首屏显示快，客户端渲染是吧需要事件，响应式等vue经典特性都绑定进去

Nuxt.js中如何实现一步数据获取：asyncData方法 asyncData函数是Nuxtjs框架内置的一个函数 执行结果和data进行融合 一起返回当前组件

后续：如何加入路由 如何加入状态管理工具 如何完成部署上线