从 vue2 到 vue3 发生了什么样的变化?

vue2

1. options API: 例如 methods:{},watch:{},computed:{}
2. vue是以属性方式响应的
3. 可以通过vue.use()处理非响应式的数据

vue3

1. composition API -------------- 解决代码的可读性(上下翻滚)
2. 使用了proxy代替Object.defineProperty()
3. 全新的全家桶
4. 全新的Ts支持
   1.TS解决了多人开发时的问题,明确变量的类型
   2.惊天类型检查,环境声明
5. vite
   1.不支持commonJS,但是支持es6模块话
   2.启动项目很快,周边库很少,之后才支持commonJs

vue3.0版本

<script>
1.在此处使用响应式的变量,监听属性,计算属性必须先进行导入
import {  ref, computed, watch } from 'vue'
setup(props,context){
	// props 用来接收传过来数据
	2.在setup中可以定义一些数据和方法
例如
	// 定义响应式数据
	const obj = ref({
		name:"zs",
		age:18
	})
	// 定义方法
	const btnClick = () => []
	-------使用计算属性---------
	const addAge = computed(()=>{
		return obj.value.age + 1
	})
	watch(obj,(val)=>{
		// 此处的val就是obj的值
	},{
		deep:tree
	})
	3.如何操做dom元素
		1.>绑定 在标签上绑定属性ref="target"
		2.>定义 target= ref(null)
		3.>操做 target.value.innnerHTML = '1234'
		// 操做生命周期钩子函数
		onMounted(() => {
     		console.log(target)
    	})
	4.返回对应的属性和方法
	return {
		obj,
		addAge,
		btnclick
	}
}
</script>

在3.0版本的vue中
过滤器的使用

全局过滤器	局部过滤器
1.声明app.config.gloabalProperties.$filter = {} 2.使用如:{{ $filter.formData(item.member.nickname) }}	废弃

vue3.2版本

<script setup>
	setup直接嵌入到scrip标签中
在vue3版本中,我们不像vue2一种在create声明周期函数中获取数据,因为在setup函数中就相当于在create这个时期,所以可以直接定义数据
	所见即所得,可以直接使用
	1.传过来的数据,我们可以通过两种方式进行接收
	import { defineProps } from 'vue'
	defineProps({
		msg:String
	}) 
	或者
	props:{
		msg:{
			required:true,
			type:String
		}
	}
在main.js函数中的优化挂载app组件
app.use(store).use(router).mount('#app')
1.取消了vue构造函数
2.按需导入
3.template支持多标签
</script>

备注:有错误希望大家可以指出,感谢!!!