vue3.0总结

今天就来谈谈vue3吧！

从接触vue3开始，我发现相较于vue2来说 ，vue3更偏向于原生js，下面就详细说一下vue2和vue3的区别吧！

vue3的特点

1. 性能比Vue2.x快了1.2~2.0倍。
2. 支持按需编译，体积比Vue2.x更小。。
3. 更好的Ts支持。
4. 暴露了自定义渲染API。
5. 更先进的组件。
6. vue3基本兼容vue2。
7. vue3的编写方式更偏向于原生的javaScript
8. 组合式的API

vue3组合式的API特点

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

	import {ref,reactive,computed,watch} from 'vue';

Vue2.x和Vue3.x在安装启动方面的区别

	Vue2.x	Vue3.x
安装	npm install -gvue-cli	npm install -g @vue/cli
项目创建	npm install -g @vue/cli项目名	vue create vue3
卸载	npm uninstall vue-cli -g
运行	npm run dev	npm run serve
配置	webpack.config.js(自动添加）	手动添加：vue.config.js
启动	import Vue from 'vue'; import App from './App.vue' new Vue({   router,   store,   render: h => h(App) }).$mount('#app')	var app = createApp(App) app.use(store).use(router).mount('#app')
定义全局方法		app.config.globalProperties.$mysay = function(msg){alert(msg+"你好")}

 setup组合api

<template>
    <div>
        <div>{{num}}</div>
        <p v-for="item in list">
    </div>
</template>
<script>
export default{
    //ref定义值类型数据
    //reactive定义引用类型的数据
    set（）{
    const  num=ref（5）；
    const list=reactive（["vue","react","angular"]）
    return{num,list}
    }
}
</script>

computed计算

// 计算 split('').reverse().join('') 切割 反转 连接
			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;
					};
					
				}
			})

watch监听单个对象 watchEffect

watch(num,(num,onum)=>{
				console.log("num发生变化",num,onum);
			})
const stop = watchEffect(()=>{
				// 这个回调函数引用的值，都会被监听
				console.log(num.value,list[0]);
				localStorage.setItem("num",num.value);
			})

生命周期

onMount，onMountde，onUpdate，onUpdated，onDestroy，onDestroyed

和vue2生命周期是一样，加一个on

setup（props，ctx）

props必须通过接收 props:{day:{type:String.default:""}}

ctx|context上下文
ctx.attrs 属性
ctx.emit 事件发送器
ctx.slots 插槽

自定义一个函数

import {ref,onMounted} from "vue"

function reveseText() {
	// 建议一个都没引用对象
	const reverseRef = ref(null);
	// onMounted挂载
	onMounted(() => {
		// reverseRef.value就是引用的dom
		reverseRef.value.onclick = function() {
			// 获取dom的文本
			var msg = reverseRef.value.innerText;
			// 翻转文本
			msg = msg.split('').reverse().join('');
			// 赋值给dom
			reverseRef.value.innerText = msg;
		}
	})

	return reverseRef;
}
export {reveseText}

vue引入

<template>
  <div class="about">
    <h1 ref="elem">This is an about page</h1>
  </div>
</template>
<script>
	// 导入reveserText
	import {reveseTexte} from './utils.js'
	export default{
		// 引用一个组件单击那个 文本反转
		setup(props,ctx){
			const elem=reveseText();			
			return {elem}
		}
	}
</script>

最后执行的是：点击This is an about page会反转

好了，今天的vue3就总结到这，希望会喜欢

相信不久的将来vue3一定会成为主流