带你了解一下vue3和vue2的语法之区别

本文带你了解一下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 如：<script setup></script>,相当在编译运行时放到了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)

}

})

以上就是vue3和vue2的语法区别解析，感谢观看！翼速应用平台内有更多相关内容，欢迎查阅！