VUE3.0总结

目录：

• vue3的启动方式

• 全局方法的定义

• setup组合api

• cimpositionApi

• setUp

• 计算

• 监听

• 生命周期

• 组件传递

• 跨层传参

• setUp中的this

• 全局配置

• 自定义set返回函数

vue3的启动方式

var app=createApp(App)
app.use(router).use(store).mount("#app")

全局方法的定义

app.config.globalProperties.$mysay=function(msg){alert(msg+"你好")}

setup组合api

ref 定义值类型数据

\\使用:<tag>{{num}}</tag>
import{ref} from 'vue'
set(){
const num =ref(5);
return {num}
}

 reactive
定义引用类型的数据

import{reactive} from 'vue'
set(){
const list = reactive([xxx,yyy])
const obj =reactive({name:"mumu",age:18})
return {list,obj}
}

 

cimpositionApi 优点

1.语义明确
2.书写简洁
3.阅读直观，不需要通过Vue再编译
4.复用，低耦合性更强（没有this）
5.和react books异曲同工
vue3.0按需加载
import{ref,reactive} from 'vue'

setUp

1.在beforecreated之前调用

2.里面的this 不是当前的实例

setup（props，ctx）

props传递过来的属性

ctx|context
上下文

ctx.attrs属性
ctx.slots插槽
ctx.parent父组件
ctx.root根组件
ctx.emit 发送事件
ctx.refs dom 节点

 计算computed

const rmsg =computef(()=>num.value.splie("").reverse().join())
const counter =computed({
set:v=>num.value+=1,
get:()=>num.value
})

监听watchEffect

const stop =watchEffect(()=>{
console.log(num.value)
localstorage.setitem("num",num.value.toString())
})

监听单个对象watch

watch（num，（num，preNum）=>{}）
watch(()=>list[0].(value,preValue)=>{})

生命周期

beforeCreate
created==setup
onMount，onMounted，onUpdate，onUpdated，onDestroy，onDestroyed
和vue2生命周期一样，加一个on

组件传递

 父传子 props
子传父 emit 发送事件

跨层传递

import mitt from ‘mitt’
const emitter =mitt()
export default emitter;
mitter.emit("hi","我是跨层数据")
mitter.on("hi",e=>console.log(e))

 setUp中的this

import{getCurrentInstance}from 'vue'
const app =getCurrentInstance().appContextapp是当前的实例
\\getCurrentInstance只能在setup或生命周期钩子中调用.

 

全局配置 

app.config.globalProperties

自定义set返回函数

import {ref,reactive,onMounted} from 'vue'
function reverseText(){
	
	const reverseRef = ref(null);
	onMounted(()=>{
		
		reverseRef.value.onclick = function(){
			//获取dom的文本
			var msg = reverseRef.value.innerText;
			
			msg = msg.split('').reverse().join('');
			reverseRef.value.innerText = msg;
		}	})
	return  {reverseRef}}
	export {reverseText}
}
//utils.js配置

<template>
  <div class="about">
    <h1 ref="elem">This is an about page</h1>
	<h1 ref="el">我是关于页面</h1> 
  </div>
</template>
<script>
	// 导入reverseText
  import {reverseTexe} from './utils.js'
  export default{
	  // 引用一个组件，单击哪个，文本翻转
	  setup(props,ctx){
		  const elem = reverseText();
		  const el = reverseText();
		 
		  return {elem,el};
	  }
  }
	
</script>

 

 about.vue和child.vue

about.vue

<Child :mynum="num">
给组件child传递参数mynum
<Child :mynum="num" @fee="sendSon($event)">

child.vue

porps:{mynum:{}}接收
setup(props,ctx){}
props获取
watch(props,(nval,oval){})
监听props变化
ctx.emit("fee",发送事件)