Web前端技术之vue3.0

学习 Vue2 ，准备系统学习一下 Vue，以最新的 Vue3 为准，记录一下 Vue 的学习笔记，也希望对其他人有帮助。

目录

vue3特点:

Vue2相对于Vue3的区别

vue2与vue3的安装区别

vue2与vue3的启动方式及全局定义方法

compositionApi

computed计算

watch 监听单个对象

watchEffect 监听

---

vue3特点:

首先来说一下vue3相对于vue2具有哪些特点：

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

Vue2相对于Vue3的区别

vue2与vue3的安装区别

	Vue2.x	Vue3.x
安装	npm install -g	vue-cli npm install -g @vue/cli
项目创建	vue init webpack 项目名	vue create vue3
卸载	npm uninstall vue-cli -g
运行	npm run dev	npm run serve
配置	webpack.config.js (自动添加）	手动添加：vue.config.js

vue2与vue3的启动方式及全局定义方法

	Vue2.x	Vue3.x
启动方式	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')
全局定义方法	Vue.prototype.$http = xxx;	app.config.globalProperties.$mysay = function(msg){alert(msg+"你好")}

compositionApi

优点：

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

vue3.0 按需加载

import {ref,reactive} from 'vue';

setup

注意：在beforecreated之前调用
           里面的this 不是当前的实例

用法如：

import {ref,reactive} from 'vue';
export default{
		    setup(props,ctx){
			console.log(props,ctx.attrs,"props，ctx")
			// ref 通常定义 值类型的数据
			const num = ref(5);
			// reactive 定义引用类型的数据
			const list = reactive(["vue","react","angular"])	
			// 计算
			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;
					};
					
				}
			})
           return {num,list,rmsg,counter};
            }
	}

响应式数据

ref：

const num = ref(5);
return {num}

用法：

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

reactive 引用类型数据

// reactive 定义引用类型的数据
const list = reactive(["vue","react","angular"])

使用：

<p v-for="(item,index) in list" :key="item"  @click="list.splice(index,1)">{{item}}</p>

computed计算

// 计算
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 监听单个对象

// 单个监听
			watch(num,(num,onum)=>{
				console.log("num发生变化",num,onum);
			})

watchEffect 监听

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