vue3对比vue2

1.vue3中template支持多个根标签
2.main.js
3.setup（取代data methods） ref
4.v-model在组件中的运用
5.新组件 Teleport

template支持多个根标签

虽然，但是
在用ant-design-vue搭的架子中，如果使用了多个根标签，跳转页面之后会出现白板，重新刷新页面之后才正常显示。（也不知道是哪的问题，就。。还是用一个根标签吧。

main.js

//vue3
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

//vue2
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

createApp(组件)与new Vue({template,render})

setup ref

setup函数返回一个对象，这个对象中包含方法和数据，生命周期钩子函数也在setup中运行，取代的是vue2中的data，methods。
ref类型的数据，是一种响应式的数据,待续

//setup函数有两个参数props和context
export default{
 props:{
    title: String
  },
  setup(props, context) {
   console.log(props.title)

   // Attributes (Non-reactive object)
   console.log(context.attrs)
    // Slots (Non-reactive object)
   console.log(context.slots)
    // Emit Events (Method)
   console.log(context.emit)
  }
}
 

// Vue2
export default{
  props:{
    title: String
  },
  data() {
    return {
      count: 0
    },
  methods:{
    add(){
      return this.count++
    }
  }
}

}

// Vue3
export default {
  props: {
    title: String
  },
  setup(props,context) {
   const count = ref(0)
   add(){
      return count.value ++
    }
  return {count,add}
  }
}

v-model在组件中的运用

vue2组件通信

//子组件