站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

vue3和vue2的语法有什么区别

时间:2022-06-24 [网络编程]作者:fabuyuan 浏览:1 次

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)
}
})

【相关推荐:《vue.js教程》】

以上就是vue3和vue2的语法有什么区别的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Vue

转载请注明来源:vue3和vue2的语法有什么区别

本文永久链接地址:https://www.adminjie.com/post/13841.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    热门文章