相对于VUE2，VUE3有最直观的代码解释

VUE3已经是内测了，关注的同学应该都知道。如果你不快乐，你必须继续学习。毕竟是自己工作的问题。我们不废话了。现在让我们比较一下我们常用的。使用与使用CompositionAPI创建模板对于大多数组件，Vue2和Vue3中的代码即使不完全相同也非常相似。但是，Vue3支持片段，这意味着组件可以有多个根节点。这在渲染列表内组件以删除不必要的包装div元素时特别有用。但是，在这个例子中，两个版本的表单组件都将只保留一个根节点vue2using使用VUE3的唯一真正区别是访问数据的方式。在Vue3中，响应式数据被封装在一个响应式状态变量中，所以需要访问这个状态变量（state）来获取值设置数据这是主要区别-Vue2optionsAPI与Vue3组合API。选项API将代码分为不同的属性：数据、计算属性、方法等。同时，CompositionAPI允许根据函数而不是属性类型对代码进行分组。对于表单组件，只有两个数据属性：用户名和密码。Vue2的代码看起来是这样的——只要在数据属性VUE2export中放两个值default{props:{title:String},data(){return{username:'',password:''}}}VUE3在Vue3.0，必须在使用新的setup()方法上付出更多的努力，所有的组件初始化都应该在这个方法中完成。此外，为了让开发人员更好地控制反应性，可以直接访问Vue的反应性API。创建响应式数据需要三个步骤：1.从vue2导入reactive。使用响应式方法声明数据3.使用setup方法返回响应式数据这样模板就可以访问了代码看起来有点像这样，然后在模板中，使用比如state.username和state.password来访问import{reactive}from'vue'exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:''})return{state}}}创建方法VUE2Vue2选项API有一个单独的方法部分。本节可以定义所有的方法，并以任何你想要的方式组织它们//登录方法}}}VUE3Vue3compositionAPI中的setup方法也可以处理。它的工作方式有点类似于声明数据——方法必须被声明然后返回，以便组件的其余部分可以访问它,password:''})constlogin=()=>{//登录方法}return{login,state}}}Lifecycle使用VUE2Vue2直接从组件选项访问生命周期钩子。下面的示例代码会等待挂载的事件)},methods:{login(){//登录方法}}}VUE3现在有了Vue3组合API，几乎所有东西都在setup()方法中，包括挂载的生命周期钩子。但是默认不包含生命周期钩子，所以必须引入Vue3中的onmount方法。这看起来与之前导入reactive相同。然后，在setup方法中，通过传递函数import{reactive,onMounted}from'vue'exportdefault{props:{title:String},setup(){//..onMounted(()=>{console.log('componentmounted')})//...}}computedattributeVUE2添加了一个计算属性，用于将用户名转换为小写字母。要在Vue2中实现这一点，请向选项对象添加一个计算字段。从这里开始，属性exportdefault可以这样定义{//..computed:{lowerCaseUsername(){returnthis.username.toLowerCase()}}}VUE3Vue3的设计允许开发人员导入他们使用的内容，而不是导入不必要的内容项目包。本质上，他们不希望开发人员包含从未使用过的东西，这已成为Vue2中日益严重的问题。因此，要在Vue3中使用computed属性，必须先将computed导入到组件中。然后，类似于之前创建响应式数据的方式，将一段响应式数据变成一个计算值state=reactive({username:'',password:'',lowerCaseUsername:computed(()=>state.username.toLowerCase())})//...}}访问PropsVUE2访问props带来Vue2和Vue3一个之间的重要区别-这意味着完全不同的东西。在Vue2中，this几乎总是指组件，而不是特定的属性。虽然这使事情表面上很容易，但它使类型支持变得很痛苦。然而props可以很容易地访问-只需添加一个小例子，比如在挂载钩子VUE3期间打印出标题prop:mounted(){console.log('title:'+this.title)}但在Vue3中不再使用它访问道具、触发事件和获取属性。相反，setup()方法采用两个参数：1.props-对组件props的不可变访问2.context-Vue3公开的上下文选择属性(emit,slot,attrs)setup(props){//...onMounted(()=>{console.log('title:'+props.title)})//...}FiringeventsVUE2在Vue2中Firingevents非常简单，但是Vue3提供了更多关于如何访问属性/方法的控制。这个例子想要在按下“提交”按钮时触发父组件的登录事件。Vue2代码只需要调用this.$emit并传入payload对象login(){this.$emit('login',{username:this.username,password:this.password})}Vue3然而在Vue3中，this现在意思不一样了，得稍微改一下。幸运的是，文本对象公开了emit，提供了与this.$emit相同的东西。您所要做的就是将context添加为setup方法的第二个参数。c-text对象将被破坏，使代码更简洁。然后，只需调用emit即可触发事件。和以前一样，emit方法有两个参数：1.事件名称2.与事件一起传递的有效负载对象setup(props,{emit}){//...constlogin=()=>{emit('login',{username:state.username,password:state.password})}//...}访问属性VUE2VUE3感兴趣的是使用它很有趣。VUE2在中小型项目中优势还是比较明显的。VUE3的目标是在大型和超大型项目中使用它。是的，别担心