Vue2和Vue3开发区别

data建立数据

vue2:

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  }
}

vue3:

import { reactive } from 'vue'

export default {
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}

---------------------------------------------------------------------------------------------------------------------------------

template获取数据

vue2:

{{ xxx }}

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>

 vue3:

{{ state.xxx }}

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input
     type='text'
     v-model='state.username'
     placeholder='Username'
    />
    
    <input
     type='password'
     v-model='state.password'
     placeholder='Password'
    />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>

---------------------------------------------------------------------------------------------------------------------------------

methods方法

vue2:

export default {
  methods: {
    login () {
      // 登陆方法
    }
  }
}

 vue3:

export default {
  setup () {
    const login = () => {
      // 登陆方法
    }
    return { 
      login
    }
  }
}

---------------------------------------------------------------------------------------------------------------------------------

生命周期函数

vue2:

export default {
  mounted () {
    console.log('组件已挂载')
  }
}

 vue3:

需要手动引入生命周期函数

import { onMounted } from 'vue'

export default {
  setup () {
    onMounted(() => {
      console.log('组件已挂载')
    })
  }
}

---------------------------------------------------------------------------------------------------------------------------------

计算属性

vue2:

export default {
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  }
}

 vue3:

需手动引入computed

import { reactive, computed } from 'vue'

export default {
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })
   
   return { state }  
}

---------------------------------------------------------------------------------------------------------------------------------

接收 Props

vue2:

export default {
  props: {
    title: String
  },
  mounted () {
    console.log('title: ' + this.title)
  },
}

vue3:

setup接收（props）参数

import { onMounted } from 'vue'

export default {
  setup (props) {
    onMounted(() => {
      console.log('title: ' + props.title)
    })
  } 
}

---------------------------------------------------------------------------------------------------------------------------------

emit事件

vue2:

export default {
  methods:{
    login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}

 vue3:

setup接收（{ emit })

import { onMounted } from 'vue'

export default {
  setup (props, { emit }) {
    onMounted(() => {
      console.log('title: ' + props.title)
    })

    const login = () => {
      emit('login', {
        username: 'xxx',
        password: 'xxx'
      })
    }
    
    return { login }
  } 
}

---------------------------------------------------------------------------------------------------------------------------------

更多详情知识点请参考：带你体验Vue2和Vue3开发组件有什么区别 - 知乎