1.创建

//vue2
new Vue({
  el:'#app',
  data:{}
})

//vue3
Vue.createApp({
  data(){
    return {}
  }
})

2.组件注册

//vue2
Vue.component('name',component)

//vue3
const app = Vue.createApp({})
app.component('name',component)

3.生命周期

//vue2销毁
beforeDestroy(){
}
destroyed(){
}

//vue3销毁
beforeUnmount(){
}
unmounted(){
}

4.绑定样式

//vue2 无法直接获取到引用当前组件传递的class

//vue3 可以通过$attrs.class获取绑定样式，指定绑定位置 

5.事件处理

//vue2
<button @click="onClick">按钮</button>
export default{
  methods:{
    onClick(){
      this.click1()
      this.click2()
    },
    click1(){
       //...
    },
    click2(){
      //...
    }
  }
}

//vue3
<button @click="click1,click2">按钮</button>
export default{
  methods:{
    click1(){
       //...
    },
    click2(){
      //...
    }
  }
}

6.自定义组件v-model

//vue2
<myinput :value="value" @input="value=$event" />

//vue3
<myinput :model-value="value" @update:model-value="value=$event" />

7.过滤器

//vue3 弃用过滤器