vue.2.x和vue3.x的差异

在vue官网发布3.x之前,小编前端时间正好学了react基础。当学vue3.x的时候,发现好多新特性都是借鉴react的hooks特性,这也对学习vue3.x的更容易一些。所以小编推荐有时间看看react,对你的学习vue3.x的学习也会更容易一些呦~

言归正传vue3.x新特性

  1. 底层使用Typescript
  2. 响应式底层从 Object.defineProperty 变成  Proxy
  3. hooks---参照react

重点来啦vue2.x & vue3.0语法差异分析

template,style----机会没有什么差异

script的vue2.x和vue3.x的对比

## data

vue2.x

data() { return  {} }

实现响应式

  • 定义在data中
  • 使用Vue.set实现响应式

vue3.x

import { reactive } from 'vue'

setup (props) {
    const state = reactive({
      title: 'Hello Vue3.0'
    })
    return state
 }

实现响应式

  • 从vue包中导入 toRefs 函数,导出state的时候,进行包裹。代码如下
setup (props) {
    const state = reactive({
      title: 'Hello Vue3.0'
    })
   return { ...toRefs(state), xxx }
 }

## methods

vue2.x

methods: { 方法 }

vue3.x

  • 写在setup函数中,并且要return返回方法名称
  • 记得要把返回的state数据,通过toRefs变成响应式的数据,否则不会起作用。代码如下
return {
      ...toRefs(state),
      play
 }

 ## computed

vue2.x

computed: {计算属性}

vue3.x

  • 写在setup函数中。代码如下
const getDoubleNum = computed(() => state.num * 2)
  •  写在state中
const state = reactive({
      myName: computed(() => 'my name is HuangWei  --- vue3.x')
 })

 注意:需要从vue包中导入 computed 函数,如果是写在setup函数中,最后return的时候,返回计算属性函数

##  生命周期函数

vue2.x

created、mounted、beforeDestory、Destoryed ... 和 data同级

vue3.x

写在setup函数中,onCreated、onMounted、onBeforeUnmount、onUnmounted ...

对比

beforeCreate-> 使用 setup()

created-> 使用setup()

beforeMount -> onBeforeMount

Mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestory ->onBeforeDestory

destoryed -> onDestoryed

## 组件传值

vue2.x

父传子:props

子传父:this.$emit

兄弟组件传值: 公共bus,父组件作为中间件

vue3.x

父传子(爷孙传,多级之间可传值)

父组件:provide---provide('名字',值)

子组件:inject----inject('名字')

代码如下:

父组件:




                    
                    

你可能感兴趣的:(vue.2.x和vue3.x的差异)