# Vue3

**Repository Path**: zijid/vue3

## Basic Information

- **Project Name**: Vue3
- **Description**: vue3学习记录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-18
- **Last Updated**: 2022-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Vue3学习
=
1. <a href="#install">安装</a>
2. <a href="#dir">目录结构</a>
3. <a href="#createApp">创建应用</a>
4. <a href="#插值方式">插值方式</a>
5. <a href="#响应式">响应式</a>
6. <a href="#computed">计算属性</a>
7. <a href="#类和行内样式">类和行内样式</a>
8. <a href="#ifElse">条件渲染</a>
9. <a href="#event">事件</a>
10. <a href="#v-model">数据绑定</a>
11. <a href="#生命周期">生命周期</a>
12. <a href="#watch">侦听器</a>
13. <a href="#refDom">ref访问dom</a>
14. <a href="#组件">组件</a>

---

<h1 id="install" style="color:red">安装</h1>

安装最新的vue

    npm init vite@latest或npm init vue@latest

都是使用vite构建的
安装依赖

    npm install
运行

    npm run dev

<h1 id="dir" style="color:red">目录结构</h1>

    public-会复制到根目录
    src
        assets-会被打包进assets目录并修改名字
        components-组件文件夹
    index.html-文档
    package.json-npm配置
    README.md-说明
    vite.config.js-vite配置

<div style="color:red;font-style: italic;">打包后空白在 vite.config.js中添加 base:"./"</div>

<h1 id="createApp" style="color:red">创建应用</h1>
vue3中可以使用组合api，使用什么api就引入什么api

```javascript
import {createApp} from "vue"//引入createApp
import App from "./App.vue"//使用构造器的老老实实这样写吧，不使用构造器可以使用组件选项进行代替

createApp(App).mount("#app")//挂载到id为app的元素上

```
_createApp_ 的作用是 ___创建根组件___，创建完还需要 ___挂载(mount)___ 到dom上 mount参数可以是css选择器也可以是dom元素
<h1 id="插值方式" style="color:red">插值方式</h1>

在dom中可以使用文本插值 ( {{ }} ) 的方式插值，双大括号内可以写变量或简单的表达式，在标签内可以使用v-bind:(缩写  : )绑定数据具体使用如下：

```html
<template>
    <div>
        {{"文本插值方式"}}
        <p v-bind:title="'值'">使用v-bind:绑定属性title</p>
        <p :title="'值'">使用缩写:方式绑定title</p>
    </div>
</template>
```
<div style="border:1px solid #e9e9e9;padding:8px">
    网页输出如下:
    <p title="值">使用v-bind:绑定属性title</p>
    <p title="值">使用缩写:方式绑定title</p>
</div>
在vue中可以使用v-html和v-text两种插入和JavaScript中的dom语法innerHTML和innerText对应
使用方式：
<template>
    <div>
        <p v-html="h1HTML"><p>
        <p v-text="h1Text"></p>
    </div>
</template>
<script>
    const h1HTML="<h1>v-html插入的h1</h1>",h1Text="<h1>v-text插入的h1</h1>"
</script>
<div style="border:1px solid #e9e9e9;padding:8px">
    网页输出如下:
    <div>
        <p><h1>v-html插入的h1</h1><p>
        <p>&lt;h1&gt;v-text插入的h1&lt;/h1&gt;</p>
    </div>
</div>
v-html会把值按html方式生成，v-text只会输出字符串

<h1 id="响应式" style="color:red">响应式</h1>


```html
<script setup>
import {reactive} from "vue" //导入reactive
const state=reactive({//创建响应式对象
	count:0
})
</script>

<template>
	{{state}}
	<button @click="state.count++" v-text="state.count"></button>
</template>
```
使用reactive创建的对象的属性值始终保持响应式,reactive的响应式是深层次的,不能追踪非对象数据；  
ref可以深层次检测所有数据可以赋值给值的value属性替换整个对象，reactive是根据属性追踪的，只能修改属性不应该直接替换整个对象  
可以使用shallowRef和shallowReactive创建浅层的响应式，shallowRef和shallowReactive只能检测一层如:

	shallowReactive({
		count:0,
		countObj:{
			count:0
		}
	})
vue只能检测到外层的count的变化而检测不到count的变化

ref使用的注意事项  
ref只会自动解套最外层的值，如果在对象内有值需要加.value或解构出来直接使用

ref语法糖$ref不需要使用.value
在vite.config.js里的vue插件函数上打开这个功能并重启

	{
		reactivityTransform: false
	}

<h1 id="computed" style="color:red">计算属性</h1>

```javascript
import {computed,ref} from "vue"//导入计算属性函数
let num=ref(1)
const computed1=computed(()=>{//第一种只读方式
	return num.value*3
})

const computed2=computed({//第二种读写方式
	get(){
		return num.value*2
	},
	set(val){
		num.value++
	}
})
```
计算属性是响应式的有缓存的，多次读写不会重新计算  
可以使用$computed访问时就不需要加value了

<h1 id="类和行内样式" style="color:red">类和行内样式</h1>

绑定类和普通类可以同时存在，类名绑定的方式有
1. 使用布尔变量觉得是否生成这个类
2. 使用对象保存类名对象
3. 使用数组保存字符串或类名对象

行内样式和普通样式可以同时存在，样式绑定的方式有
1. 使用字符串样式 样式名加变量属性值
2. 使用对象形式，以属性名为键，属性值为值
3. 使用数组形式，数组里可以同时保存1和2两种形式

```html
<script>
	import {reactive,ref,shallowReactive,shallowRef,computed} from "vue" 
	const action=ref(true)//布尔值，用来控制类名是否存在
	const classStyle=reactive({
	text:action
	})//类对象，直接传个:class
	const classArr=ref([classStyle])//类数组，直接传个:class
	const red=ref("red")//字符串属性值，传给需要属性值的地方
	const styleObj=reactive({//样式对象
		color:red
	})
	const styleArr=reactive([styleObj])//样式数组，可以保存对象和字符串两种形式
</script>
<template>
	<div :class="{text:action}">1</div>
	<div :class="classStyle">2</div>
	<div :class="classArr">3</div>
	<div :style="{color:red}">1</div>
	<div :style="[{color:red}]">2</div>
	<div :style="styleObj">3</div>
	<div :style="styleArr">4</div>
</template>
<style>
.text{
  color: red;
}
</style>
```


<h1 id="ifElse" style="color:red">条件渲染</h1>

修改dom的有：v-if、v-else-if、v-else v-for  
修改css的有：v-show  
这里的用法与普通判断、循环表达式差不多，如果真，运行下面的dom操作 

```javascript
<template>
<div v-if="true">会显示这里的dom</div>
<div v-else-if="true">这块虽然也是真，不过是先判断v-if，v-if成立后不会执行到这里</div>
<div v-else>如果上面的指令都不成立执行这里</div>
<div v-show="false">这个div会使用css display:none隐藏</div>
<div v-for="item in 10">{{item}}这个div会被渲10次，也可以使用可迭代对象代替数字进行迭代</div>
</template>
```
总结：  
修改dom的指令只在表达式成立时才会渲染，v-show每次都会渲染，
如果单次渲染操作小可以使用v-if,如果切换代价大使用v-show  

v-for 的key值还是不清楚怎么用  
[vue3文档-翻译中]:[https://staging-cn.vuejs.org/api/built-in-special-attributes.html#key]

<h1 id="event" style="color:red">事件</h1>
vue有鼠标点击事件(click)、键盘点击事件(keyup、keydown、keypress)

鼠标点击事件按键修饰符有

	.left 默认的鼠标左键点击
	.middle 鼠标中键点击
	.right 鼠标右键点击
键盘按键修饰符

	.enter
	.tab
	.delete (捕获“Delete”和“Backspace”两个按键)
	.esc
	.space
	.up
	.down
	.left
	.right

	
	参考vue的说明吧，只试了.enter 鼠标点击回车触发事件,想触发得有元素焦点
	.exact使用特定的按键组合顺序多一个少一个都不触发，顺序不对也不触发
事件修饰符

	.stop 停止事件继续传播
	.prevent 消除默认事件
	.self 只有在这个元素上触发才有效，子元素或者父元素触发都不行
	.capture 捕获模式可以先操作内部元素的事件,默认是先在 事件触发的元素开始执行
	.once 这个事件最多只能触发一次
	.passive 默认事件立即发生,不应该和.prevent一起使用

	事件修饰符可以串联，不同的串联方式结果也不一样，左边的先执行再执行后面的

	
<h1 id="v-model" style="color:red">数据绑定</h1>
在vue中如何实现一个数据双向绑定  
首先值得传到子组件，使用v-bind绑定数据传给子组件
当子组件收到值时 更改状态  
如何如果值在子组件内修改后，需要让父组件知道这个值被修改成了、被修改成了什么值这可以使用事件来完成

```html
<!-- HelloWorld.vue -->
<template>
	<div>
		{{msg}}
	</div>
	<button @click="msg+='1'">改变</button>
</template>
<script setup>
	defineProps({//使用props实现子组件获取值
		msg:String
	})
</script>
```
```html
<!-- App.vue -->
<template>
	<HelloWorld :msg="msg"></HelloWorld>	
</template>
<script setup>
	import {ref} from "vue"
	import HelloWorld from "./components/HelloWorld.vue"
	const msg=ref("hello world")
</script>
```
不太对 直接就实现了数据绑定
先这样，
本来要监听子组件事件 然后父组件改变值  

vue中使用v-model实现表单的双向绑定，组件上也能用需要使用value属性和input事件

这个指令主要是方便实现表单的数据绑定，每个表单改变后v-model绑定的变量也会改变 不同的表单得到的值也不一样

v-model修饰符

	.lazy v-model默认在input事件时直接改变变量,使用这个修饰符变量在@change事件时修改变量
	.number 把输入的值转变为数字
	.trim 清除字符中多余的空格 保留一个


<h1 id="生命周期" style="color:red">生命周期</h1>

	在setup中的都是先执行的，setup中的代码在创建组件(created)前,
	里面定义的生命周期也在选项式的生命周期前

```javascript
/*
生命周期构子有  
选项式				组合式					说明

beforeCreate		Not needed*			组件创建之前未挂载 无法访问dom
created				Not needed*			组件创建后未挂载 无法访问dom
beforeMount			onBeforeMount		组件挂载前渲染函数首次被调用
mounted				onMounted			组件挂载后
beforeUpdate		onBeforeUpdate		组件数据更新前，dom即将更新
updated				onUpdated			组件数据更新后 dom已更新
beforeUnmount		onBeforeUnmount		组件卸载前
unmounted			onUnmounted			组件卸载
keep-alive组件
activated			onActivated			组件激活	组件插入时生效
deactivated			onDeactivated		组件失活
beforeDestroy		onBeforeMount		组件卸载前
destroyed			onMounted			组件卸载
errorCaptured		onErrorCaptured		捕获子组件错误 返回false不再继续传播

开发阶段
renderTracked		onRenderTracked		当响应式依赖触发组件的渲染效果重新运行时，注册要调用的调试挂钩。
renderTriggered		onRenderTriggered	当响应式依赖触发组件的渲染效果重新运行时，注册要调用的调试挂钩。
*/

//仅仅记录并未实践

```
```html
<script setup>
	import {onMounted,onBeforeMount,onUnmounted} from "vue" 
	console.log("setup")
	onUnmounted(()=>{
	console.log("onUnmounted:");
	})
	onBeforeMount(()=>{
	console.log("onBeforeMount:");
	})
	onMounted(()=>{
	console.log("onMounted:");
	})
</script>
<script>
	export default{
		created(){
			console.log("create:");
		},
		beforeCreate(){
			console.log("beforeCreate:");
		},
		mounted(){
			console.log("mounted-script:");
		},
		beforeMount(){
			console.log("beforeMount-script:");
		}
	}
</script>
```

<h1 id="watch" style="color:red">侦听器</h1>
watch 第一个参数为响应式数据(ref的值,ref对象的.value的值，reactive对象)、函数、数组包含多个源，第二个参数是执行函数，第三参数是选项  

watchEffect 第一个参数是一个函数，这个函数里访问的值都会被监听，第二个参数是选项  
结束监听器需要接受一个返回值来结束，普通侦听器生命周期结束会自动结束，异步生成的侦听器不会自动结束


```javascript
import { reactive, ref ,watch,watchEffect,watchPostEffect} from "vue";
const count = ref(0);
const obj=reactive({
	count
})
const objRef=ref({
	count
})
watch(count,(newCount,oldCount)=>{
	console.log("响应式数据")
})
watch(()=>count.value,(newCount,oldCount)=>{
	console.log("函数式")
})
watch(obj,(newCount,oldCount)=>{
	conso
watch(objRef.value,(newCount,oldCount)=>{
	console.log("监听objRef")
})
watch(obj,(newCount,oldCount)=>{
	console.log("设置选项flush为post在都没更新后再执行")
},{
	flush:'post'
})
watchEffect(()=>{
	console.log('监听里面的访问到的值的变化和计算属性(computed)很像',obj.count);
})
watchEffect(()=>{
	console.log('监听ref的数据',count.value);
})
watchEffect(()=>{
	console.log('设置选项flush为post在都没更新后再执行',count.value);
},{
	flush:'post'
})
watchPostEffect(()=>{
	console.log('这个方法如同选项flush设置为post',count.value);
})

```

<h1 id="refDom" style="color:red">ref访问dom</h1>

在组件上使用属性值ref值为使用的名字，在setup中使用相同名字定义ref数据，在挂载后访问会获取到dom元素
```html
<script setup>
import { onMounted, ref } from "vue";
const input = ref(null)
const t = ref(true)
console.log('input',input.value);
onMounted(()=>{
	console.log('input.value.focus()',input.value);
})
function log(){
	console.log('input',input.value);
}
</script>
<template>
	<input type="text" ref="input" v-if="t">
	<button @click="log">点击</button>
	<button @click="t=!t">停止监听</button>
</template>

```

	如果获取不到元素会返回null

<h1 id="组件" style="color:red">组件</h1>