v u e

nginx

Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现

正向代理：
正向代理最大的特点是客户端非常明确要访问的服务器地址；服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。
反向代理：
客户端是无感知代理的存在的，反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。反向代理，“它代理的是服务端”，主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息

nginx的基础配置（代理等）：

nginx ‐c kerwin.conf 加载kerwin.conf 并启动服务器
//不能有中文目录
nginx ‐s
{
stop — fast shutdown
reload — reloading the configuration file(每次修改完kerwin.conf后 ，都通过此方法 重新加载一次)
}

静态文件serve
location / {
root html;//是当前文件夹下有个html文件夹
index index.html index.html
}
location /frontend {
root html ;
#只要加载localhost/frontend路径 那么就会从 html/frontend/路径提供文件服务
}

下面四种情况分别用http://localhost/proxy/test.html 进行访问。
// 注意 /proxy/ 后面的/ 需要加上
(1)location /proxy/ {
proxy_pass http://127.0.0.1:8000/;
}

会被代理到http://127.0.0.1:8000/test.html 这个url

(2)相对于第一种，最后少一个 /
 location /proxy/ {
 proxy_pass http://127.0.0.1:8000;
 }
会被代理到http://127.0.0.1:8000/proxy/test.html 这个url

(3)location /proxy/ {
 proxy_pass http://127.0.0.1:8000/xiaoming/;
 }
会被代理到http://127.0.0.1:8000/xiaoming/test.html 这个url。

(4)相对于第三种，最后少一个 / ：

 location /proxy/ {
 proxy_pass http://127.0.0.1:8000/xiaoming;
 }
会被代理到http://127.0.0.1:8000/xiaomingtest.html 这个url

 // ^~ /proxy 以proxy 开头的

将nginx部署在线上作为webserver：serve 静态资源， 并反向代理node服务

vue3

import {createApp{} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App)
.use(router)
.use(store)
.mount ('#app')

import{
createRouter,
createWebHashHistory
}from 'vue-router';
import Home from '../views/Home.vue';
const routes =[{
path:/'
name:'Home,
component:Home}
];
export default createRouter({
history:createwebHashHistory(),
routes
});

import createStore from 'vuex';
export default createStore({
state:{}
mutations:{}
actions:{}
modules:{
}):

reactive

作用：创建响应式对象，非包装对象，可以认为是模板中的状态。
template可以放兄弟节点
reactive类似useState,如果参数是字符串，数字，会报警告，value cannot be made reactive,所以应
该设置对象，这样可以数据驱动页面

<div>
	{{countobj.count}}-<button @click="add">add</button>
</div>
setup (){

const countobj = reactive({
	count:0
})
const add ()=
	countobj count++
}
return{
	countobj,
	add
}
}

ref

作用：创建一个包装式对象，含有一个响应式属性value。它和reactive的差别，就是前者没有包装属性value
const count=ref(0),可以接收普通数据类型，count.value++

<div>
	{{count}}-<button @click="add">add</button>
</div>
setup (){
const add =()=>{
	count.value++
}
const count ref(0)
return{
	count,
	add
	}
}

toRefs

默认直接展开state,那么此时reactive数据变成普通数据，通过toRefs,可以把reactive里的每个属性，转化为ref对象，这样展开后，就会变成多个ref对象，依然具有响应式特性

props&emit

props:["mytite'"],//正常接收
setup (props,{emit}){
	console.log(props.mytitle)
	const handleclick = ()=>{
	emit('kerwinevent')
}
return{
handleclick
}
}

生命周期

原方法	升级后
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
beforeDestroy	beforeUnmount
destroyed	unmounted

计算属性

computed(回调函数)

setup (){
const mytext ref('')

const computedSum=computed(() => mytext.value.substring(0,1).toUppercase()+
mytext.value.substring(1))
//注意nytext.value
	return{
	mytext,
	computedSum
 }
}

watch

监听器watch是一个方法，它包含2个参数

const reactivedata = reactive({count:1})
const text=ref("")
watch(()=reactivedata.count,
val => {
	console.log('count is ${val}')
})
watch(text,
val=>{
console.log(count is ${val})
})

第一个参数是监听的值，count.value表示当count.value发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调

自定义hooks

虽然composition api比之前写法好像更麻烦了，但是用上自定义hooks.就可以实现函数编程的复用了，更加简洁高效了。一直在模仿。

import{
	ref
}from 'vue';
function usecount(){
	const count ref(1);
	const addCount (num 1)=>count.value +num;
	return{
		count,
		addCount
	}
}
export {useCount}