干货!!速看 Vue3笔记

欢迎大家关注公众号[小白讲前端]会首发更新

1.vue3介绍

2020年发布的vue3, 兼容非IE, 最新一代vue大版本, 其中集成了非常多新特性数据驱动 最小粒度更新 组件化 指令

vue3新特性:


1.1 template支持多个根节点

1.2 style中可以使用v-bind直接绑定动态数据

1.3 新增组合式API(composition API) , 也可以说是setup语法

1.4 响应数据采用ref, reactive.

1.5修改数据拦截方式为es6的proxy, 它可以直接拦截整个对象, 可以响应数组的变化~ 解决defineProperty的缺陷!!!

1.6 setup中是一个完整的作用域, 去掉了this, 修复了this指向不明的问题!!!

2.vue3的项目构建方式

传统webpack构建(采用webpack从入口main.js进行文件的打包读取,把不能识别的文件转换为标准js,css等)

2.1.安装脚手架@vue/cli

yarn global add @vue/cli

2.1.1脚手架创建项目

vue craete 项目名(只能全小写)

2.1.2启动项目

cd 项目名

yarn serve(启动运行) //默认端口8080

2.2.推荐使用vite构建

2.1.1使用npm或者yarn或者其他工具

npm create vite@latest
yarn create vite

2.2.2 启动项目
cd 项目名
yarn (安装依赖)
yarn dev (启动运行) //默认端口5173

3.vue3新语法

vue3推荐采用组合式API书写(setup)

setup写法是vue3的语法糖

3.1 动态数据

 <script setup>
  import {ref,reactive} from 'vue' //必须引入
  const 变量名1 = ref("")
  const 变量名2 = ref(0)
  const 变量名3 = ref(true)
  const 变量名4 = reactive([])
  const 变量名5 = reactive ({})
  //引用
    const usemoveActive = (val) => {
    变量名1.value = val 
   //用ref注册的变量,引用时要加.value使用
  }
    const useRactive = (val) => {
    变量名4 = val 
   //reactive注册的变量,直接使用
  }
 </script>

3.2 函数

<script setup>

  function 函数名1(){
   ...逻辑
  }
  const 函数名2 = () =>{
  }
  //可以使用箭头函数和普通函数
</script>

3.3 计算属性computed

<script setup>
import {computed} from 'vue' //还是用引入使用
const xxx = computed(() => {
   	...计算过程
   	return 结果
   })
 //就跟函数一样
</script>

3.4 监听器watch

<script setup>
import {watch} from 'vue' //还是用引入使用
watch(要监听变化的数据, (newval, oldval) => {
   	...变化后的回调
   })
</script>

3.5 自定义组件注册

import XXX from ‘路径’
在setup中, 引入组件后自动注册, 直接使用

<template>
 <XXX/>
</template>

3.6 生命周期

(vue3仍然是4个阶段 数据挂载/DOM挂载/更新/卸载销毁 )

整个setup就是围绕create阶段来执行, 在中间进行所以数据的初始化!!!
setup === beforeCreate + created

<script setup>
 import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue' //还是用引入使用
 onBeforeMount()  //DOM挂载前
 onMounted() //DOM挂载完毕! 可以在此处获取DOM
 onBeforeUpdate() //数据变化, DOM更新前
 onUpdated() //数据变化,DOM更新完毕!
 onBeforeUnmount() //卸载前
 onUnmounted() //卸载完毕

//...除此之外还有一些辅助钩子, onErrorCaptured, onActivated....等
</script>

4.组件注册

4.1 全局注册

main.js 文件中
app.component('自定义组件名字', 组件实例)

4.2 局部注册

组件.vue
	import 组件 from '组件地址'
	<组件/>

5.组件通信(props传递数据)

5.1父传子

给儿子元素绑定自定义属性

<子组件 name=‘xx’ :data=“动态值” />

<script setup>
// 在子组件中接收
 const props = defineProps({
 	//key接收的自定义属性名称: value约束
 	name: {
 		type: 数据类型,
 		required: true | false, //参数是否为必填
 		default: 默认值
 	}
 })
 
 {{ props.name }}
</script>

5.1子传父

1.在template中直接触发$emit

<template>
   <xxx @click="$emit('自定义事件', 参数)" />
</template>

2.在script setup中

<script setup>
const emit = defineEmits(['自定义事件1', '自定义事件2'])
//合适时机(函数里调用)
emit('自定义事件1', 参数)
</script>
//在父组件中使用
<子组件 @自定义事件1="callback" />

<script setup>
const callback = (传入的数据) => {
  	//..做自己的操作
  }
</script>

6.slot插槽(传递节点)

6.1具名插槽

  //在父元素.vue中
   	<子组件>
   		<template v-slot:mytable>
   			<table>xxxx</table>
   		</template>
   		<template #mydiv>
             	<div>xxxx</div>
   		</template>//#即是v-slot的缩写
         
   //子元素.vue 
   	<template>
   		//任意位置
   		<slot name='mytable'></slot> 
   		....自己本来的节点
   		<slot name='mydiv'></slot> 
   	</template>

6.作用域插槽

  //在父元素.vue中
     <child>
			//对象的写法
			<template #mytable="obj">
				<table>xxxx</table>
				{{ obj.arr }}
				{{ obj.data }}
			</template>
			
			//解构的写法
			<template v-slot:mytable="{arr, data}">
				<table>xxxx</table>
				{{ arr }}
				{{ data }}
			</template>
		</child>
		
	//在子元素.vue中
		<template>
			//任意位置
			<slot name='mytable' :arr="xxx" :data="xxxx"></slot> 
			....自己本来的节点
		</template>