vue3 01学习日志

vue3

vue3的优点

按需引入组合式api ：更加接近原生js，更加直观没有this.更有效地降低了代码的耦合性

vue3的启动方式

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

vue3的全局方法的定义

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

setup组合api

ref定义 值类型的数据
reactive 定义引用类型的数据

import {ref, reactive} from 'vue';
set(){
const num= ref(5);
const list=reactive(['vue','react','anglar'])
return {num,list};
},

ref通常定义 值类型的数据

vue3 计算computed

记得先导入computed

const list = reactive(["vue","react","angular"])	
	// 计算
	//选中list的第一个元素进行分割后翻转输出
	const rmsg = computed(()=>list[0].split('').reverse().join(''))
	// 计算get和set
	const counter = computed({
	// 当获取counter值调用函数
	get(){return num.value},
	// 设置counter值调用函数
			set(v){
			num.value = v;
			if(v>10){
			num.value = 20;
		};
					
	}
})

vue3监听

跟计算一样先导入watch

<button @click="num++">{{num}}</button>

const num = ref(5);
//(num,onum)num发生变化时num 是新的num值onum是老的num值
watch(num,(num,onum)=>{
	console.log("num发生变化",num,onum);
})

num发生变化 6 5

第二种监听方法watchEffect

<button @click="stop()">停止</button>

	// 这个回调函数引用的值，都会被监听
	const stop = watchEffect(()=>{
		//向控制台输出num和list[0]
		//不管谁改变两个都会在后台输出
		console.log(num.value,list[0]);
		localStorage.setItem("num",num.value);
	})
	//如果只想监听num的变化就吧stop导出去并应用
	return {stop};
	

num发生变化 6 5 ‘vue’ 6 ‘vuess’

点击停止后 num发生变化 9 8

vue3生命周期

引入onMounted,onUnmounted

//进入页面输出
onMounted(()=>{
	console.log("组件以及挂载完毕")
})
//离开页面输出
onUnmounted(()=>{
	console.log("组件将要销毁");
})