vue学习124-143

niginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）
代理服务器，在BSD-like 协议下发行。

网关 正向代理 反向代理

网关：一个网络到另一个网络的关口，将不通网络间进行访问控制，转换，交接等
正向代理：用户利用代理服务器访问目标服务器。代理服务器的代理对象是用户。简单的说可以让我们访问我们不能直接访问的资源服务\

最小配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


}

1）worker_processes 1; 默认为1，表示开启一个业务进程

2）worker_connections 1024; 单个业务进程可接受连接数

3）include mime.types; 引入http mime类型

vue3

分析目录结构
main.js中的引入
在模板中vue3中是可以没有根标签了，这也是比较重要的改变
应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

//main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import {createApp} from 'vue
import App from './App.vue

//创建应用实例对象-app(类似于之前vue2中的vm实例，但是app比vm更轻)
createApp(APP).mount('#app')
//卸载就是unmount,卸载就没了
//createApp(APP).unmount('#app')



//之前我们是这么写的，在vue3里面这一块就不支持了，会报错的，引入不到 import vue from 'vue'; 
new Vue({
	render:(h) => h(App)
}).$mount('#app')



//多个应用实例
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

安装vue3的开发者工具
方式一：

• 打开chrome应用商店，搜索vue： 里面有个Vue.js devtools，且下面有个角标beta那个就是vue3的开发者工具

方式二：

• 线模式下，可以直接将包丢到扩展程序

reactive

• reactive 是 Vue3 中提供的实现响应式数据的方法。
• 在 Vue2 中响应式数据是通过 defineProperty 来实现的，
• 在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。
• reactive 参数必须是对象 (json / arr)

<template>
<div>
  <p>{{msg}}</p>
  <button @click="c">button</button>
</div>
</template>
 
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    let msg = reactive(0)
    function c() {
      console.log(msg);
      msg ++;
    }
    return {
      msg,
      c
    };
  }
}
</script>

ref

ref 本身是作为渲染结果被创建的

在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此不应该试图用它在模板中做数据绑定。

ref 的基本使用，用在元素上：

const vm = new Vue({
				el:'#app',
				data(){
					return {
						
					}
				},
				methods:{
					getdom(){
					let a = document.getElementById('aa')
						console.log(a); 
						 console.log(this.$refs.aa); 
					}
				}			
			})

toRefs
内容

toRefs 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。

<template>
  <div class="container">
    <h2>{{ name }} {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'App',
    setup() {
      const obj = reactive({
        name: 'ifer',
        age: 10
      })
      const updateName = () => {
        obj.name = 'xxx'
        obj.age = 18
      }
      return { ...toRefs(obj), updateName }
    }
  }
</script>

props 和 $emit

1、子组件向父组件传值，通过$emit 事件向父组件发送消息，将自己的数据传递给父组件。

2、props 可以在组件上注册一些自定义属性。父组件通过绑定该属性来向子组件传入数据，子组件通过 props 属性获取对应数据。

父组件

// parent.vue
<template>
	<div>
      	<p>childMessage: {{childMessage}}</p>
      	<children :sendmessage='childMessage' @showMsg="updataMsg"></children>
	</div>
</template>

import children from '/*...*/'

export default{
	data () {
		return {
			childMessage: '父组件给子组件传值'
		}
	},
	methods: {
		updataMsg(message) {
			this.childMessage = message
			console.log(this.childMessage)
		}
	},
	components: {
		children
	}
}

子组件

// children.vue
<template>
	<div>
		// 通过按钮点击事件将子组件的值传给父组件
	    <button @click="sendtoParent">Click this Button</button>
	</div>
</template>

<script>

export default {
  props: ['sendmessage'],
  methods: {
  	sendtoParent() {
  		//$emit括号里的第一个参数为自定义事件
  		this.$emit('showMsg','子组件通过$emit给父组件传值')
  	}
  }
}
</script>

生命周期

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

vue计算属性

一个数据, 依赖另外一些数据计算而来的结果

场景: 一个变量的值, 需要用另外变量计算而得来

语法:

computed: {
    "计算属性名" () {
        return "值"
    }
}

注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同

注意2: 函数内变量变化, 会自动重新计算结果返回

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发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调

自定义hook

hook就是一个函数,有一些特定逻辑的封装函数

• 用于处理字符串(url)
• 数据格式化(日期)
• 业务逻辑性
• 自定义hook相对于普通js复用逻辑的抽离,然后可以在页面调用

封装两个自定义hooks

判断当前的网络情况

import React, { useState, useEffect } from 'react';
// 自定义一个hook  功能判断当前的网络情况
// 函数名要以use开头
// 函数中必须要用到内置hook函数
const useOnline = () => {
  const [online, setOnline] = useState(navigator.onLine)

  // 让它在第1次挂载时执行
  useEffect(() => {
    const onlineFn = () => setOnline(true)
    const offlineFn = () => setOnline(false)

    // js提供的监听事件
    window.addEventListener('online', onlineFn, false)
    window.addEventListener('offline', offlineFn, false)

    return () => {
      window.removeEventListener('online', onlineFn, false)
      window.removeEventListener('offline', offlineFn, false)
    }
  }, [])
  return online
}


const App = () => {
  const online = useOnline()
  return (
    <div>
      {
        online
          ?
          <div style={{ color: 'green' }}>在线</div>
          :
          <div>离线</div>
      }
    </div>
  );
}

export default App;