Vue3.0学习笔记

Vue3.0

特点

vue3基本兼容vue2

全局挂载方法

1.app启动

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

2.全局方法

app.config.globalProperties.$http = ()=>{}

conmpositionApi

1. 语句明确
2. 书写简洁
3. 阅读直观，不需要通过Vue再编译
4. 复用，低耦合性更强（没有this）
5. 和react hooks异曲同工
6. vue3.0 按需加载

import {ref,reactive} from 'vue'

srtup

• 在beforecreated之前调用
• 里面的this不是当前实例

响应式数据

1.ref

const num =ref(0)
return {num}
使用：<tag>{{num}}</tag>

2.reactive

引用类型的数据
const list = reactive([xxx,yyy])
const obj = reactive({name:"mumu",age:18})

computed 计算

const rmsg = computed(()=>num.value.split("").reverse().join())

const counter = computed({
		set:v=>num.value+=1,
		get:()=>num.value
})

watchEffexct 监听

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

watch 监听单个对象

watch(num,(num,preNum)=>{})

watch(()=>list[O].(value,preValue)=>{})

生命周期

• beforeCreatecreated==setup
• onMount,onMounted,onUpdate,onUpdated,onDestroy,onDestroyed
• 和vue2生命周期是一样，加一个on

setup(props,ctx)

• props传递过来的属性
• ctx|context 上下文
  ctx.attrs属性
  ctx.slots插槽
  ctx.parent父组件
  ctx.root根组件
  ctx.emit 发送事件
  ctx.refs dom节点

组件传递

1.父传子 props
2.子传父 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 = getCurrentlnstance().appContext
app是当前的实例

getCurrentlnstance只能在setup 或生命周期钩子中调用。

全局配置

app.config.globalProperties

自定义set 返回一个函数

import {ref,reactive, onMounted} from 'vue '
function reverseText(){
		const elem = ref(null);
		//获取元素与元素Rect
		const getElem=()=>{
			console.log(elem.value.innerText)
		}
		onMounted(()=>{
			//单击翻转
			elem.value.addEventListener( "click" ,()=>{
				elem.value.innerText =
				elem.value.innerText.split("").reverse().join('');
			})
		})
		return {elem,getElem}
}
export {reverseText}

import {reverseText} from './reverseText.js'
const {elem.getElem} =reverseText();
return {elem,getElem}

<p ref="elem">我爱我的祖国</p>

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",发送事件)