vue3和vue2的语法区别:1、vue2使用的是webpack形式去构建项目,而vue3使用vite构建项目;2、vue2中可以使用pototype的形式去进行操作,引入的是构造函数,而vue3中需要使用结构的形式进行操作,引入的是工厂函数。
本教程操作环境:windows10系统、Vue3版、Dell G3电脑。
vue3和vue2的语法有什么区别
1.webpack和vite
vue2使用的是webpack形式去构建项目
webpack是一开始是入口文件,然后分析路由,然后模块,最后进行打包,然后告诉你,服务器准备好了可以开始干了
vue3使用vite构建项目
先告诉你服务器准备完成,然后等你发送HTTP请求,然后是入口文件,Dynamic import(动态导入)code split point(代码分割)
最大的好处和区别就是为了让项目中一些代码文件多了以后去保存更新数据时更快能够看到实际效果,也就是所谓的(热更新)
2.main.js文件
vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数
vue3中需要使用结构的形式进行操作,引入的是工厂函数
vue3中app组件中可以没有根标签
3.setup函数
setup函数必须要return 返回出去
<script> export default { name: 'appName', setup(){ //变量 let name = '打工仔' let age = 18 //方法 function say(){ console.log(`我只是一个${name},今年${age}岁`) } //返回一个对象 return { name, age, say } } } </script>
你会发现当前的${name}中name不需要使用this去进行操作,this的作用只不过是取到某个作用域中变量而已,而setup函数提供了当前只在这个作用域中
这时候就很不爽了,那岂不是每次我定义的变量和方法都需要return,vue3中给我们提供了
在script标签上添加setup 如:5101c0cdbdc49998c642c71f6b6410a82cacc6d41bbb37262a98f745aa00fbf0,相当在编译运行时放到了setup中
注:setup比beforeCreate、created生命周期更早,也就是说在当前直接用this去获取data中的数据打出来的还是undefined
setup语法中课接收2个参数setup(props,context)
都知vue2中this.$attrs,this.$slots,this.$emit等同context中attrs,slots,emit
注:当我们只接受一个参数时,页面会提示警告,但是不影响使用
4.指令与插槽
vue2中使用slot可以直接使用slot,而vue3中必须使用v-slot的形式
v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用
vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突
vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes
vue3中移除v-on.native修饰符
vue3中移除过滤器filter
5.ref与reactive
ref
把数据变为响应式数据,ref把它们变成了对象,如果我们直接去操作代码是修改不了的,你会发现当前name和age还是通过get和set修改页面,这时你需要使用.value,并且ref还是Refimpl
<template> <div class="home"> <h1>姓名:{{name}}</h1> <h1>年龄:{{age}}</h1> <button @click="say">修改</button> </div> </template> <script> import {ref} from 'vue' export default { name: 'Home', setup(){ let name = ref('中介') let age = ref(18) console.log(name) console.log(age) //方法 function say(){ name='波妞' age=18 } return { name, age, say } } } </script>
这样的话那我们在页面上不是得{{name.value}}来做显示,实际不用这样的,在我们vue3中会检测到你的ref是对象,自动会给你加上.value,如果我们自己定义的ref对象,实例会变为refimpl,这个时候用XX.value.XX进行修改
<template> <div class="home"> <h1>姓名:{{name}}</h1> <h1>年龄:{{age}}</h1> <h2>职业:{{job.occupation}}</h2> <h2>薪资:{{job.salary}}</h2> <button @click="say">修改</button> </div> </template> <script> import {ref} from 'vue' export default { name: 'Home', setup(){ let name = ref('中介') let age = ref(18) let job=ref({ occupation:'程序员', salary:'10k' }) console.log(name) console.log(age) //方法 function say(){ job.value.salary='12k' } return { name, age, job, say } } } </script>
这时我们打印obj.value,他已经不再是refimpl对象,变成了proxy对象,因为vue3底层是proxy对象,基本数据类型都是按Object.defineProperty里面get和set进行数据劫持,vue3已经把reactive封装进去了,相当于我们在调用ref时,会自动调用reactive
reactive
上面我们说ref里面的对象会调用reactive,把Object转换为Proxy,现在我们直接通过reactive变成Proxy,它进行了一个深层次的响应式
<template> <div class="home"> <h1>姓名:{{name}}</h1> <h1>年龄:{{age}}</h1> <h2>职业:{{job.occupation}}<br>薪资:{{job.salary}}</h2> <h3>爱好:{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3> <button @click="say">修改</button> </div> </template> <script> import {ref,reactive} from 'vue' export default { name: 'Home', setup(){ let name = ref('波妞') let age = ref(18) let job=reactive({ occupation:'程序员', salary:'10k' }) let hobby=reactive(['吃饭','睡觉','打豆豆']) console.log(name) console.log(age) //方法 function say(){ job.salary='12k' hobby[0]='学习' } return { name, age, job, say, hobby } } } </script>
这时你肯定会觉得方法太多了,还不如使用ref提供的.value,是不是感觉爽爽爽,但是有一个问题,如果有一堆数据那不是要一直去.value,点到冒烟,这个时候你可以用模拟vue2中data的形式,就会感觉更香
<template> <div class="home"> <h1>姓名:{{data.name}}</h1> <h1>年龄:{{data.age}}</h1> <h2>职业:{{data.job.occupation}}<br>薪资:{{data.job.salary}}</h2> <h3>爱好:{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3> <button @click="say">修改</button> </div> </template> <script> import {reactive} from 'vue' export default { name: 'Home', setup(){ let data=reactive({ name:'波妞', age:18, job:{ occupation:'程序员', salary:'10k' }, hobby:['吃饭','睡觉','打豆豆'] }) //方法 function say(){ data.job.salary='12k' data.hobby[0]='学习' } return { data, say, } } } </script>
ref与reactive区别
ref定义的是基本数据类型
ref通过Object.defineProperty()的get和set实现数据劫持
ref操作数据.value,读取时不需要。value
reactive定义对象或数组数据类型
reactive通过Proxy实现数据劫持
reactive操作和读取数据不需要.value
6.vue3的响应式原理
vue2的响应式原理用Object.defineProperty的get和set进行数据劫持,从而实现响应式
vue2中只有get和set方法去进行属性的读取和修改操作,当我们进行新增,删除时,页面不会实时更新
直接通过下标改数组,页面也不会实时更新
vue3中响应式原理使用Proxy进行代理,使用window内置对象Reflect反射,学了Es6的语法的就知道我们在使用Proxy进行代理,好比甲方公司给出需要什么技术的前端攻城狮,让乙方去干招聘、面试等环节
Proxy可以拦截对象中任意的属性变化,当然包括读写,添加,删除等
Reflect对源对象属性进行操作
const p=new Proxy(data, { // 读取属性时调用 get (target, propName) { return Reflect.get(target, propName) }, //修改属性或添加属性时调用 set (target, propName, value) { return Reflect.set(target, propName, value) }, //删除属性时调用 deleteProperty (target, propName) { return Reflect.deleteProperty(target, propName) } })
【相关推荐:《vue.js教程》】
以上是vue3和vue2的语法有什么区别的详细内容。更多信息请关注PHP中文网其他相关文章!

React受欢迎的原因包括其性能优化、组件复用和丰富的生态系统。1.性能优化通过虚拟DOM和diffing机制实现高效更新。2.组件复用通过可复用组件减少重复代码。3.丰富的生态系统和单向数据流增强了开发体验。

React是构建动态和交互式用户界面的首选工具。1)组件化与JSX使UI拆分和复用变得简单。2)状态管理通过useState钩子实现,触发UI更新。3)事件处理机制响应用户交互,提升用户体验。

React是前端框架,用于构建用户界面;后端框架用于构建服务器端应用程序。React提供组件化和高效的UI更新,后端框架提供完整的后端服务解决方案。选择技术栈时需考虑项目需求、团队技能和可扩展性。

HTML和React的关系是前端开发的核心,它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义,React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML,实现智能渲染。3)组件生命周期管理HTML渲染,根据状态和属性动态更新。4)使用组件优化HTML结构,提高可维护性。5)性能优化包括避免不必要渲染,使用key属性,保持组件单一职责。

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件,函数组件更简洁,类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法,提高性能。4)状态管理使用useState或this.state,生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态,高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题,调试技巧包括使用ReactDevTools和优

React是一个用于构建用户界面的JavaScript库,其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染,优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件,高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当,可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting,保持代码可读性和可维护性是最佳实践。

React通过JSX与HTML结合,提升用户体验。1)JSX嵌入HTML,使开发更直观。2)虚拟DOM机制优化性能,减少DOM操作。3)组件化管理UI,提高可维护性。4)状态管理和事件处理增强交互性。

React组件可以通过函数或类定义,封装UI逻辑并通过props接受输入数据。1)定义组件:使用函数或类,返回React元素。2)渲染组件:React调用render方法或执行函数组件。3)复用组件:通过props传递数据,构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑,提升开发效率和代码可维护性。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

Dreamweaver CS6
视觉化网页开发工具

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中