登录  /  注册

vue3和vue2的语法有什么区别

WBOY
发布: 2022-06-23 17:17:02
原创
9091人浏览过

vue3和vue2的语法区别:1、vue2使用的是webpack形式去构建项目,而vue3使用vite构建项目;2、vue2中可以使用pototype的形式去进行操作,引入的是构造函数,而vue3中需要使用结构的形式进行操作,引入的是工厂函数。

vue3和vue2的语法有什么区别

本教程操作环境: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: &#39;appName&#39;,
  setup(){
  //变量
   let name = &#39;打工仔&#39;
   let age = 18
   //方法
   function say(){
    console.log(`我只是一个${name},今年${age}岁`)
   }
   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>
登录后复制

你会发现当前的${name}中name不需要使用this去进行操作,this的作用只不过是取到某个作用域中变量而已,而setup函数提供了当前只在这个作用域中

这时候就很不爽了,那岂不是每次我定义的变量和方法都需要return,vue3中给我们提供了

在script标签上添加setup 如:,相当在编译运行时放到了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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    console.log(name)
    console.log(age)
    //方法
    function say(){
      name=&#39;波妞&#39;
      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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;中介&#39;)
    let age = ref(18)
    let job=ref({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.value.salary=&#39;12k&#39;
    }
    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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let name = ref(&#39;波妞&#39;)
    let age = ref(18)
    let job=reactive({
      occupation:&#39;程序员&#39;,
      salary:&#39;10k&#39;
    })
    let hobby=reactive([&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;])
    console.log(name)
    console.log(age)
    //方法
    function say(){
      job.salary=&#39;12k&#39;
      hobby[0]=&#39;学习&#39;
    }
    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 &#39;vue&#39;
export default {
  name: &#39;Home&#39;,
  setup(){
    let data=reactive({
      name:&#39;波妞&#39;,
      age:18,
      job:{
        occupation:&#39;程序员&#39;,
        salary:&#39;10k&#39;
      },
      hobby:[&#39;吃饭&#39;,&#39;睡觉&#39;,&#39;打豆豆&#39;]
    })
    //方法
    function say(){
      data.job.salary=&#39;12k&#39;
      data.hobby[0]=&#39;学习&#39;
    }
    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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号