vue3和vue2的使用差异语法差异比较（逐步完善中。。）

已于 2022-05-19 20:02:03 修改
阅读量996 收藏 7
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-05-18 16:35:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40922551/article/details/124843864
版权

语法差异

一、 关于vuex的使用

vue2.0 创建仓库 new Vuex.Store({})
vue3.0 创建仓库 createStore({})

vue3中：

============================>创建
import { createStore } from 'vuex'
// 创建vuex仓库并导出
export default createStore({
  state: {
    // 数据
  },
  mutations: {
    // 改数据函数
  },
  actions: {
    // 请求数据函数
  },
  modules: {
    // 分模块
  },
  getters: {
    // vuex的计算属性
  }
})
====================================》使用
import { useStore } from 'vuex'
 const store = useStore()

二、关于router的使用和app的创建

vue2中：

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes =[]
onst router = new Router({
  routes,
  mode: 'hash',
})

vue3中：

import { createApp } from 'vue'
import App from './App'
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = []

// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})
createApp(App).use(router)

三、vue3新增组合式api语法

1.setup函数

setup () {
    return { }
  },

2.reactive函数(通常是用来定义响应式对象数据)

 setup () {
    const obj = reactive({
      name: 'ls',
      age: 18
    })
    // 修改名字
    const updateName = () => {
      obj.name = 'zs'
    }
    return { obj ,updateName}
  }

3.toRef函数(转换响应式对象中某个属性为单独响应式数据)

 setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    // 2. 模板中只需要使用name数据
    // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
    // let { name } = obj 不能直接解构，出来的是一个普通数据
    const name = toRef(obj, 'name')
    const updateName = () => {
      // toRef转换响应式数据包装成对象，value存放值的位置
      name.value = 'zs'
    }

    return {name, updateName}
  }

4.toRefs函数(转换响应式对象中所有属性为单独响应式数据)

setup () {
    // 1. 响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })
    // 以上方式导致数据就不是响应式数据了
    const obj3 = toRefs(obj)
    const updateName = () => {
      obj.name = 'zs'  //此处略有不同
    }

    return {...obj3, updateName}
  }

5.ref函数(简单数据类型定义为响应式数据)

setup () {
    // 1. name数据
    const name = ref('ls')
    const updateName = () => {
      name.value = 'zs'
    }
    // 2. age数据
    const age = ref(10)
    // 对于数据未之的情况下 ref 是最适用的
    // const data = ref(null)
    // setTimeout(()=>{
    //   data.value = res.data
    // },1000)

    return {name, age, updateName}
  }

6.computed函数(简单数据类型定义为响应式数据)

  setup () {
    // 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
    const age = ref(16)
    // 得到后年的年龄
    const newAge = computed(()=>{
      // 该函数的返回值就是计算属性的值
      return age.value + 2
    })

    return {age, newAge}
  }
  ===========================================》高级用法
   setup () {
    const age = ref(16)
    // 计算属性高级用法，传人对象
    const newAge = computed({
      // get函数，获取计算属性的值
      get(){
        return age.value + 2
      },
      // set函数，当你给计算属性设置值的时候触发
      set (value) {
        age.value = value - 2
      }
    })
    return {age, newAge}
  }

7.watch函数

setup () {
    const count = ref(0)
    const add = () => {
      count.value++
    }
    // 当你需要监听数据的变化就可以使用watch
    // 1. 监听一个ref数据
    // 1.1 第一个参数  需要监听的目标
    // 1.2 第二个参数  改变后触发的函数
    // watch(count, (newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // })


    const obj = reactive({
      name: 'ls',
      age: 10,
      brand: {
        id: 1,
        name: '宝马'
      }
    })
    const updateName = () => {
      obj.name = 'zs'
    }
    const updateBrandName = () => {
      obj.brand.name = '奔驰'
    }
    // 2. 监听一个reactive数据
    watch(obj, ()=>{
      console.log('数据改变了')
    })

    watch(()=>obj.brand, ()=>{
      console.log('brand数据改变了')
    },{
      // 5. 需要深度监听
      deep: true,
      // 6. 想默认触发
      immediate: true
    })

    // 3. 监听多个数据的变化
    // watch([count, obj], ()=>{
    //   console.log('监听多个数据改变了')
    // }) 


    // 4. 此时监听对象中某一个属性的变化 例如：obj.name 
    // 需要写成函数返回该属性的方式才能监听到
    // watch(()=>obj.name,()=>{
    //   console.log('监听obj.name改变了')
    // })

    return {count, add, obj, updateName, updateBrandName}
  }

8.ref属性

 <!-- vue2.0 获取单个元素 -->
    <!-- 1. 通过ref属性绑定该元素 -->
    <!-- 2. 通过this.$refs.box获取元素 -->
    <!-- <div ref="box">我是box</div> -->
    <!-- vue2.0 获取v-for遍历的多个元素 -->
    <!-- 1. 通过ref属性绑定被遍历元素 -->
    <!-- 2. 通过this.$refs.li 获取所有遍历元素  -->
    <!-- <ul>
      <li v-for="i in 4" :key="i" ref="li">{{i}}</li>
    </ul> -->

 <!-- 单个元素 -->
    <div ref="dom">我是box</div>
<!-- 被遍历的元素 -->
    <ul>
      <li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>
    </ul>
==============================>
setup () {
    // 1. 获取单个元素
    // 1.1 先定义一个空的响应式数据ref定义的
    // 1.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。
    const dom = ref(null)
    onMounted(()=>{
       console.log(dom.value)
    })
     // 2. 获取v-for遍历的元素
    // 2.1 定义一个空数组，接收所有的LI
    // 2.2 定义一个函数，往空数组push DOM
    const domList = []
    const setDom = (el) => {
      domList.push(el)
    }
    onMounted(()=>{
      console.log(domList)
    })
    return {省略。。。}
  }

四、父子通讯

1.父传子：

// 父组件的数据传递给子组件
  setup () {
    const money = ref(100)
    return { money }
  }
  ========================>
  // 子组件接收父组件数据使用props即可
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    // 获取父组件数据money
    console.log(props.money)
  }

2.子传父

 //子组件传递数据：
 setup ({emit}) {
    // 向父组件传值
  const changeMoney = () => {
      // 通知父组件，money需要变成50
      emit('change-money', 50)
    }
   return {changeMoney}
  }
  ==========================》
  //父组件接收
  <Son  @change-money="updateMoney" />
   setup () {
    const money = ref(100)
    const updateMoney = (newMoney) => {
      money.value = newMoney
    }
   return { updateMoney}
  }

3.父子双向数据绑定

  • 在vue2.x的时候 .sync 除去v-model实现双向数据绑定的另一种方式:
<!-- <Son :money='money' @update:money="fn"  /> -->
<Son :money.sync='money'  />
  • 在vue3.0的时候，使用 v-model:money=“money” 即可:
<!-- <Son :money="money" @update:money="updateMoney" /> -->
    <Son v-model:money="money" />

4.依赖注入（后代传值）

  //传值者：
  setup () {
    const money = ref(100)
    const changeMoney = (saleMoney) => {
      console.log('changeMoney',saleMoney)
      money.value = money.value - saleMoney
    }
    // 将数据提供给后代组件 provide
    provide('money', money)
    // 将函数提供给后代组件 provide
    provide('changeMoney', changeMoney)
  return { money }

接收方：=================》
setup () {
// 接收祖先组件提供的数据
const money = inject(‘money’)
return { money }
}

五、语法糖

vue2中：

<Son :value="msg" @input="msg=$event" />

vue3中：

<Son :modelValue="msg" @update:modelValue="msg=$event" />

演示：

<template>
  <div class="container">
    <!-- 如果你想获取原生事件事件对象 -->
    <!-- 如果绑定事函数 fn fn(e){ // e 就是事件对象 } -->
    <!-- 如果绑定的是js表达式  此时提供一个默认的变量 $event -->
    <h1 @click="$event.target.style.color='red'">父组件 {{count}}</h1>
    <hr>
    <!-- 如果你想获取自定义事件  -->
    <!-- 如果绑定事函数 fn fn(data){ // data 触发自定义事件的传参 } -->
    <!-- 如果绑定的是js表达式  此时 $event代表触发自定义事件的传参 -->
    <!-- <Son :modelValue="count" @update:modelValue="count=$event" /> -->
    <Son v-model="count" />
  </div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  setup () {
    const count = ref(10)
    return { count }
  }
}
</script>

<template>
  <div class="container">
    <h2>子组件 {{modelValue}} <button @click="fn">改变数据</button></h2>
  </div>
</template>
<script>
export default {
  name: 'Son',
  props: {
    modelValue: {
      type: Number,
      default: 0
    }
  },
  setup (props, {emit}) {
    const fn = () => {
      // 改变数据
      emit('update:modelValue', 100)
    }
    return { fn }
  }
}
</script>

六、混入（mixins语法）

// 全局混入 全局mixin
// vue2.0 写法  Vue.mixin({})
app.mixin({
  methods: {
    say () {
      console.log(this.$el,'在mounted中调用say函数')
    }
  },
  mounted () {
    this.say()
  }
})

<template>
  <div class="container1">
    <h1> 作者：周杰伦  <a href="javascript:;">关注</a> </h1>
    <hr>
    <Son />
  </div>
</template>
<script>
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son
  }
}
</script>

<template>
  <div class="container2">
    <h2> 作者：周杰伦  <button>关注</button> </h2>
  </div>
</template>
<script>
export default {
  name: 'Son'
}
</script>
<style scoped lang="less"></style>

// 配置对象
export const followMixin =  {
  data () {
    return {
      loading: false
    }
  },
  methods: {
    followFn () {
      this.loading = true
      // 模拟请求
      setTimeout(()=>{
        // 省略请求代码
        this.loading = false
      },2000)
    }
  }
}

<template>
  <div class="container1">
    <h1> 作者：周杰伦  <a href="javascript:;" @click="followFn">{{loading?'请求中...':'关注'}}</a> </h1>
    <hr>
    <Son />
  </div>
</template>
<script>
import Son from './Son.vue'
import {followMixin} from './mixins'
export default {
  name: 'App',
  components: {
    Son
  },
  mixins: [followMixin]
}
</script>

<template>
  <div class="container2">
    <h2> 作者：周杰伦  <button @click="followFn">{{loading?'loading...':'关注'}}</button> </h2>
  </div>
</template>
<script>
import {followMixin} from './mixins'
export default {
  name: 'Son',
  mixins: [followMixin]
}
</script>
<style scoped lang="less"></style>
  • 在vue2.0中一些可复用的逻辑可以使用mixins来封装，当是需要考虑逻辑代码冲突问题。vue3.0的组合API很好的解决了这个问题，就不在推荐使用mixins了

七、自定义指令

  • vue3中
directives:{
focus:{
	mounted(el){
		el.focus()
		}
	}
}
=======================>
app.directive('focus',{
	mounted(el){   //使用指令的DOM是否创建好，钩子函数：mounted
	el.focus()
	},
	updated(el){
	el.focus()
}
})
  • vue2中:
  • 在vue2的项目中使用自定义指令时，【mounted ->inserted 】【updated -> update 】
Vue.directive('focus',{
              inserted:function(el){
      //获取元素焦点
     el.focus();
		}       
   })
   ======================>带参数
   <input type="text" v-color='{color:"orange"}' />
   Vue.directive('color',{
    inserted:function(el,binding){   //使用指令的DOM是否创建好，钩子函数： inserted
        //binding表示传递过来的参数
        el.style.backgroundColor=binding.value.color;
    }
})
防火墙在线
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0中setup使用(两种用法)
01-21
一、setup函数的特性以及作用 　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　　Vue3 的一大特性函数 —- setup 　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 　　2、setup函数是 Composition API（组合API）的入口 　　3、在setu
vue2和vue3不同写法及区别
qq_59599812的博客
03-31 3457
-响应式原理不同,vue2原理基础依靠 Object.defineProperty；--写法却别：vue写法共有组合式和选项式两种写法，vue2主要使用。--vue2不支持多根节点，vue3支持多根节点。--vue2和vue3双向数据绑定不同。--vue2和vue3定义数据方法不同。--diff算法不同，vue3更优化。--vue2和vue3生命周期不同。--vue2和vue3插槽不同。2.写法不同，写法详解。写法，vue3主要使用。选项式写法 ，vue3。选项式和组合式写法。
vue3中v-model结合了vue2中的.sync语法
Tokisaki_Kurumi的博客
10-28 392
示例： 父组件： <template> <div>{{count}}</div> <hr/> <Son v-model:changeCount="count"></Son> <!-- 等价于--> <!-- <Son :changeCount="count" @update:changeCount="count=$event"></Son>--> </template
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 4715
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
从vue2到vue3，一文带你看完vue3的新特性
qq_42365082的博客
01-12 3060
前言 这篇文章的主要意义是：针对想要从vue2快速迁移到vue3的朋友，快速理解vue3的新特性。 为了让大家更好的理解，我会从设计者的角度来讲为什么vue3要这样设计api。 第一部分、vue2的痛点——代码糅杂 从vue2到vue3，最大的改动就是组合式API——setup。 为什么要这样改？ 在vue2项目中，当一个组件的代码量超过300行时，业务逻辑分散的问题很容易出现。比如下面这张图，大家可以直观的看到代码交叉在一起，错综复杂。 新增或者修改一个需求，就需要分别在data，metho
在使用vue3时与vue2做对比区别与效率的提升
weixin_41277748的博客
05-27 1553
创建vue项目在使用v-cli和使用vite中的区别 比如mian.js中引入app.vue文件时后要把后缀名加上 1、除了.js的后缀名不需要加后缀名，其他的都去要加上；而用v-cli中则不需要； 2、index.html文件vite搭建的项目这个文件不是放在public文件夹下，而是放在根目录下 3、打包vite做了优化，js文件体积变小了 在App.vue导入vue的区别 vue2 import Vue from 'vue' import App fro
vue2和vue3区别
qq_59737146的博客
02-13 1029
vue2和vue3区别
Vue3.0相对 Vue2.0的主要语法改变
李大人的博客
04-12 3572
Vue3.0的时代已经到来，为了紧追时代的步伐，学习 Vue3.0是势在必行的，在学习过程中，发现 Vue3.0相对于 Vue2.0，在语法上的改动并不是很大，为了巩固学习和便于日后复习，我特意总结一下Vue3.0相对 Vue2.0的主要语法改变。 1、ref 属性的定义 ref 是用于获取组件对象或者元素对象，在 Vue2.0中传入的是一个字符串，然而，在 Vue3.0中可以定义一个函数，函数的参数是接收到组件对象或者是元素对象，所以在使用过程中，可以自定义变量在函数中接收ref 的对象。如下例，用.
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
元素黛咪 一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 // vue2.x + element-ui npm i element-demi element-ui # or yarn add element-demi element-ui // vue3.x + element-plus npm i element-demi element-plus # or yarn add element-demi element-plus :top_hat: 用法 Vue2 import Vue from 'vue' import ElementUI from 'element-demi' Vue . use ( Elemen
在vue项目中使用sass语法问题
10-16
sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue常用组件通信方式及vue2和vue3写法对比
~~~
05-19 1402
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。父子组件：props / $emit、 ref / $parent隔代组件：provide / inject、eventBus、Vuex / Pinia兄弟组件：eventBus、Vuex / Pinia写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
vue2+vue3
qq_54817514的博客
05-13 4457
VUE2 一、初识Vue 1. 入门 vue的特点： 采用组件化模式 声明式编码 使用细腻Dom+优秀的Diff算法 入门示例： <!--引入Vue --> <script src="../js/vue.js" type="text/javascript"></script> </head> <body> <!-- 创建容器 --> <div id="root"> <h1>h
面试官：vue2和vue3的区别有哪些
字节叔叔
03-25 2050
每个管道都会创建一个新的函数，这会导致更多的函数创建和执行，而这些函数可能只是对数据进行了一些简单的操作，这些操作完全可以在组件中使用计算属性或方法来完成。Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。是 Vue 3 中的工具函数，可以将一个响应式对象转换成一个由所有属性都为响应式对象的普通对象。当响应式对象中的某个属性发生改变时，这个改变会被追踪，并且会触发视图更新。
Vue3和Vue2常用的不同地方总结，及Vue开发使用的重点部分
无简介！！
10-07 688
Vue3和Vue2常用的不同地方总结，及Vue开发使用的重点部分
vue3的用法跟vue2对比
neserAImw的博客
01-15 405
vue3的用法很vue2的对比
Vue3选项式和组合式生命周期说明
最新发布
weixin_44072254的博客
05-16 401
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
vue2和vue3的api差异
09-08
Vue2和Vue3的API差异主要包括以下几点： 1. 全局API：Vue2使用Vue.prototype.$xxx方式添加全局API，而Vue3使用app.config.globalProperties.xxx方式添加全局API。 2. 组件和指令：在Vue2中，组件和指令分别使用Vue.component和Vue.directive进行注册，而在Vue3中，统一使用app.component和app.directive进行注册。 3. 响应式系统API：Vue2使用Vue.observable来创建响应式对象，Vue3则引入了Composition API，提供了更灵活的响应式系统API，如reactive、ref、watchEffect等。 4. 数据双向绑定原理：在Vue2中，数据双向绑定原理使用的是ES5的数据劫持Object.defineProperty配合发布订阅模式来实现。而Vue3则通过Proxy的API（Reflect）实现数据双向绑定，可以直接监听对象而非属性，并且可以直接监听数组的变化。此外，Vue3的Proxy还提供了多达13种拦截方法，例如apply、ownKeys、deleteProperty、has等，而Object.defineProperty不具备这些功能。 总结起来，Vue3相对于Vue2在API设计上进行了一些改进和优化，提供了更灵活和强大的响应式系统API，以及更方便的数据双向绑定机制。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值