Vue2, Vue3 차이점

Vue2, Vue3의 차이점

• - 템플릿 방식, 코드 방식, 라이프 사이클, 익스플로어 지원 여부

1. 템플릿 방식

• - Vue2는 루트 엘리먼트가 1개이며 Vue3는 루트 엘리먼트가 여러개로 가질 수 있다.

ex)

//Vue2
//1개의 루트(div)만 가진다
<template>
  <div>
    <h1>Title</h1>
  </div>
</template>

//Vue3
//여러개의 루트가 가능하다.

<template>
    <h1>Title</h1>
    <div>content</div>
</template>

2. 코드 방식

• - vue2에서는 Data, method, props로 나누어 작성, vue3는 setup()안에 모두 모아서 작성한다.

Vue2

export default {
    props: {
        title: String
    },
    data() {
        return {
            userName: '',
            password: ''
        }
    },
    method: {
        login() {

        }
    }
}

Vue3

export default{
    props: {
      title: String,
    },
    setup (){
      const state = reactive({
        userName: '',
        password: ''
      })
      
      const login = () =>{
        
      }
      //사용할 것을 리턴해줘야한다.
      return{
        login, state
      }
    }
}

3. LifeCycle

• - Vue2는 data, method와 같은 hierachy에서 선언하도록 되어있지만, Vue3는 setup() 안에 모두 넣어주어 관리한다.

Vue2

export default {
  mounted () {
    
  }
  data () {
    return {
      userName:'',
      password: ''
    }
  },
  method: {
    
  }
}

Vue3

export default{
    props: {
      title: String,
    },

    setup (){
        onBeforeMount(() => {
        
        })
      
        onMounted(() => {
        
        })
    }
}

4. 익스플로어 지원

• - Vue2는 지원하지만, Vue3는 지원하지 않는다.

정리